From 91e08472d0e93e30bb5fc4d9543118ccc710942b Mon Sep 17 00:00:00 2001
From: Uma Das <61022623+CodeWithUma@users.noreply.github.com>
Date: Sun, 2 Oct 2022 17:08:40 +0530
Subject: [PATCH] Add content to Angular Roadmap (#2005)

* Add content to Angular Roadmap - Basics

* Update content/roadmaps/104-angular/content/102-angular-basics/100-angularjs-vs-angular.md

* Update content/roadmaps/104-angular/content/102-angular-basics/101-angular-components.md

* Update content/roadmaps/104-angular/content/102-angular-basics/102-angular-templates.md

* Update content/roadmaps/104-angular/content/102-angular-basics/103-angular-modules.md

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
---
 .../102-angular-basics/100-angularjs-vs-angular.md  |  8 +++++++-
 .../102-angular-basics/101-angular-components.md    | 13 ++++++++++++-
 .../102-angular-basics/102-angular-templates.md     |  8 +++++++-
 .../102-angular-basics/103-angular-modules.md       |  7 ++++++-
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/content/roadmaps/104-angular/content/102-angular-basics/100-angularjs-vs-angular.md b/content/roadmaps/104-angular/content/102-angular-basics/100-angularjs-vs-angular.md
index 43c981a6c..5008965a7 100644
--- a/content/roadmaps/104-angular/content/102-angular-basics/100-angularjs-vs-angular.md
+++ b/content/roadmaps/104-angular/content/102-angular-basics/100-angularjs-vs-angular.md
@@ -1 +1,7 @@
-# Angularjs vs angular
\ No newline at end of file
+# AngularJS vs. Angular
+
+AngularJS was the older version of Angular, whose support officially ended in January 2022. Angular is a component-based front-end development framework built on TypeScript, which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angularjs.org/'>AngularJS Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/start'>Official - Getting started with Angular</BadgeLink>
\ No newline at end of file
diff --git a/content/roadmaps/104-angular/content/102-angular-basics/101-angular-components.md b/content/roadmaps/104-angular/content/102-angular-basics/101-angular-components.md
index 1780d85ad..37e779033 100644
--- a/content/roadmaps/104-angular/content/102-angular-basics/101-angular-components.md
+++ b/content/roadmaps/104-angular/content/102-angular-basics/101-angular-components.md
@@ -1 +1,12 @@
-# Angular components
\ No newline at end of file
+# Angular Components
+
+Components are the main building block for Angular applications. Each component consists of:
+
+* An HTML template that declares what renders on the page
+* A TypeScript class that defines the behavior
+* A CSS selector that defines how the component is used in a template
+* Optionally, CSS styles applied to the template
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/component-overview'>Angular Components Overview</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x5PZwb4XurU'>Standalone Components in Angular</BadgeLink>
\ No newline at end of file
diff --git a/content/roadmaps/104-angular/content/102-angular-basics/102-angular-templates.md b/content/roadmaps/104-angular/content/102-angular-basics/102-angular-templates.md
index 9eedb2e4e..89530de91 100644
--- a/content/roadmaps/104-angular/content/102-angular-basics/102-angular-templates.md
+++ b/content/roadmaps/104-angular/content/102-angular-basics/102-angular-templates.md
@@ -1 +1,7 @@
-# Angular templates
\ No newline at end of file
+# Angular Templates
+
+A Template is a form of HTML which tells Angular to go towards another component. To create many Angular features, special syntax within the templates is used.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/template-overview'>Understanding Templates</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/template-syntax'>Template Syntax</BadgeLink>
\ No newline at end of file
diff --git a/content/roadmaps/104-angular/content/102-angular-basics/103-angular-modules.md b/content/roadmaps/104-angular/content/102-angular-basics/103-angular-modules.md
index 9005f0182..45e8a9dde 100644
--- a/content/roadmaps/104-angular/content/102-angular-basics/103-angular-modules.md
+++ b/content/roadmaps/104-angular/content/102-angular-basics/103-angular-modules.md
@@ -1 +1,6 @@
-# Angular modules
\ No newline at end of file
+# Angular Modules
+
+Modules in Angular act like a container where we can group the components, directives, pipes, and services, related to the application.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/architecture-modules'>Introduction to Modules</BadgeLink>
\ No newline at end of file