add content to rendering topics in angular roadmap (#2168)

Co-authored-by: Ibtesam Ahmed ( SK ) <51031949+SkyLineProgrammers@users.noreply.github.com>

content/roadmaps/104-angular/content/105-rendering-topics/100-builtin-directives.md

@@ -1 +1,10 @@
-# Builtin directives
+# Builtin directives
+
+SKDirectives are classes that add additional behavior to elements in your Angular applications. Use Angular's built-in directives to manage forms, lists, styles, and what users see.
+
+`NgClass` Adds and removes a set of CSS classes. | `NgStyle` Adds and removes a set of HTML styles. | `NgModel` Adds two-way data binding to an HTML form element.
+
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/built-in-directives'>Understanding BuiltIn Directives</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Web' href='https://thinkster.io/tutorials/angular-2-directives'>BuiltIn Directives Types</BadgeLink>

content/roadmaps/104-angular/content/105-rendering-topics/101-builtin-pipes.md

@@ -1 +1,10 @@
-# Builtin pipes
+# Builtin pipes
+
+Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application , some common pipes are 
+
+`DatePipe` | `UpperCasePipe` | `LowerCasePipe` | `CurrencyPipe` | `DecimalPipe` | `PercentPipe`
+
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/pipes'>Understanding BuiltIn Pipes</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Web' href='https://codecraft.tv/courses/angular/pipes/built-in-pipes/'>BuiltIn Pipes - exampls</BadgeLink>

content/roadmaps/104-angular/content/105-rendering-topics/102-change-detection.md

@@ -1 +1,7 @@
-# Change detection
+# Change detection
+
+Change detection is the process through which Angular checks to see whether your application state has changed, and if any DOM needs to be updated. At a high level, Angular walks your components from top to bottom, looking for changes. Angular runs its change detection mechanism periodically so that changes to the data model are reflected in an application’s view. Change detection can be triggered either manually or through an asynchronous event
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/change-detection'>Understanding Change detection</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=f8sA-i6gkGQ'>4 Runtime Performance Optimizations ( Change detection )</BadgeLink>