Add content in angular roadmap (#2087)

* add informtion about angular roadmap

* Update content/roadmaps/104-angular/content/100-typescript-basics/100-what-is-typescript.md

* Update content/roadmaps/104-angular/content/100-typescript-basics/101-why-use-typescript.md

* Update content/roadmaps/104-angular/content/100-typescript-basics/102-structural-typing.md

* Update content/roadmaps/104-angular/content/100-typescript-basics/103-type-inference.md

* Update content/roadmaps/104-angular/content/100-typescript-basics/104-union-types.md

* Update content/roadmaps/104-angular/content/100-typescript-basics/105-builtin-types.md

* Update content/roadmaps/104-angular/content/100-typescript-basics/106-type-guard.md

* Update content/roadmaps/104-angular/content/112-creating-a-custom-x/100-directive.md

* Update content/roadmaps/104-angular/content/112-creating-a-custom-x/101-pipe.md

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

content/roadmaps/104-angular/content/100-typescript-basics/100-what-is-typescript.md

@@ -1 +1,9 @@
-# What is typescript
+# What is Typescript
+
+TypeScript is a strongly typed, object-oriented, compiled programming language that builds on JavaScript. It is a superset of the JavaScript language, designed to give you better tooling at any scale. TypeScript calls itself “JavaScript with syntax for types.” In short, it is JavaScript with some additional features. The secret to the success of TypeScript is in the type checking, ensuring that the data flowing through the program is of the correct kind of data.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://thenewstack.io/what-is-typescript/'>What is TypeScript</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/typescript/'>W3Schools – TypeScript Tutorial</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.tutorialspoint.com/typescript/index.htm'>Tutorials point – TypeScript Tutorial</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=d56mG7DezGs'>TypeScript Crash Course for Beginners</BadgeLink>

content/roadmaps/104-angular/content/100-typescript-basics/101-why-use-typescript.md

@@ -1 +1,7 @@
-# Why use typescript
+# Why use TypeScript
+
+TypeScript extends JavaScript, providing a better developer experience. The benefits of using TypeScript over JavaScript include.Static typing – TypeScript comes with optional static typing and a type inference system, which means that a variable declared with no type may be inferred by TypeScript based on its value. Object-oriented programming – TypeScript supports object-oriented programming concepts like classes, inheritance, etc. Compile time checks – JavaScript is an interpreted programming language. There is no compilation involved. Hence, the errors get caught during the runtime. Since TypeScript compiles into JavaScript, errors get reported during the compile time rather than the runtime. Code editor support – IDEs or code editors like VS Code support autocomplete for a TypeScript codebase. They also provide inline documentation and highlight the errors. Use existing packages – You might want to use an npm package written in JavaScript. Since TypeScript is a superset of JavaScript, you can import and use that package. Moreover, the TypeScript community creates and maintains type definitions for popular packages that can be utilized in your project.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://linguinecode.com/post/5-reasons-why-to-use-typescript'>linguinecode - Reasons to use TypeScript</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.codemotion.com/magazine/backend/why-you-should-use-typescript-for-your-next-project/'>Codemotion - Reasons to use TypeScript</BadgeLink>

content/roadmaps/104-angular/content/100-typescript-basics/102-structural-typing.md

@@ -1 +1,11 @@
-# Structural typing
+# Structural Typing
+
+Type compatibility in TypeScript is based on structural subtyping. `Structural typing` is a way of relating types based solely on their members. This is in contrast with nominal typing. 
+
+TypeScript’s structural type system was designed based on how JavaScript code is typically written. Because JavaScript widely uses anonymous objects like function expressions and object literals, it’s much more natural to represent the relationships found in JavaScript libraries with a structural type system instead of a nominal one.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/redox-techblog/structural-typing-in-typescript-4b89f21d6004'>Structural typings — Medium</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.typescriptlang.org/docs/handbook/type-compatibility.html'>Structural typings — Typescriptlang</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=kWtwsX_rT3k'>Structural typing video for Beginners</BadgeLink>
+

content/roadmaps/104-angular/content/100-typescript-basics/103-type-inference.md

@@ -1 +1,7 @@
-# Type inference
+# Type Inference
+
+In TypeScript, several places where `type inference` is used to provide type information when there is no explicit type annotation. The type of the x variable is inferred to be a number. This inference occurs when variables and members are initialized, set parameter default values are, and determine function return types. For example, `let x: number`. In most cases, type inference is straightforward. In the following sections, we’ll explore some nuances in how types are inferred. For example, `let x: (number | null)[]`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.typescriptlang.org/docs/handbook/type-inference.html'>Type Interface - typescriptlang</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=3ui_st7rtfA'>Type Inference video for Beginners</BadgeLink>

content/roadmaps/104-angular/content/100-typescript-basics/104-union-types.md

@@ -1 +1,7 @@
-# Union types
+# Union Types
+
+In TypeScript, we can define a variable that can have multiple types of values. In other words, TypeScript can combine one or two types of data (i.e., number, string, etc.) in a single type, a union type. Union types are a powerful way to express a variable with multiple types. Two or more data types can be combined using the pipe ('|') symbol between the types. For example,  `(type1 | type2 | type3 | .. | typeN)`. 
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html'>Union Types - typescriptlang</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=uxjpm4W5pCo'>Union Type video for Beginners</BadgeLink>

content/roadmaps/104-angular/content/100-typescript-basics/105-builtin-types.md

@@ -1 +1,7 @@
-# Builtin types
+# Builtin Types
+
+The Builtin types represent the different types of values supported by the language. The builtin types check the validity of the supplied values before they are stored or manipulated by the program. This ensures that the code behaves as expected. The Builtin types further allow for richer code hinting and automated documentation too.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.tutorialspoint.com/typescript/typescript_types.htm'>TypeScript Types - Tutorialspoint</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Nt9ajBrqV_M'>Builtin Type video for Beginners</BadgeLink>

content/roadmaps/104-angular/content/100-typescript-basics/106-type-guard.md

@@ -1 +1,10 @@
-# Type guard
+# Type Guard
+
+A type guard is a TypeScript technique used to get information about the type of a variable, usually within a conditional block. Type guards are regular functions that return a boolean, taking a type and telling TypeScript if it can be narrowed down to something more specific. Type guards have the unique property of assuring that the value tested is of a set type depending on the returned boolean.
+
+TypeScript uses built-in JavaScript operators like `typeof`, `instanceof`, and the `in` operator, which is used to determine if an object contains a property. Type guards enable you to instruct the TypeScript compiler to infer a specific type for a variable in a particular context, ensuring that the type of an argument is what you say it is.
+
+Type guards are typically used for narrowing a type and are pretty similar to feature detection, allowing you to detect the correct methods, prototypes, and properties of a value. Therefore, you can quickly figure out how to handle that value.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://blog.logrocket.com/how-to-use-type-guards-typescript/'>Types Guards - Blog</BadgeLink>

content/roadmaps/104-angular/content/112-creating-a-custom-x/100-directive.md

@@ -1 +1,9 @@
-# Directive
+# Directive
+
+Directives are the functions that will execute whenever the Angular compiler finds them. Angular Directives enhance the capability of HTML elements by attaching custom behaviors to the DOM.
+
+From the core concept, Angular directives are categorized into three categories: Attribute Directives, Structural Directives, and Component Directives.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.freecodecamp.org/news/angular-directives-learn-how-to-use-or-create-custom-directives-in-angular-c9b133c24442/'>Create a custom directive - Freecodecamp</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=AoN56g6UAsE'>Create a custom directive video for Beginners</BadgeLink>

content/roadmaps/104-angular/content/112-creating-a-custom-x/101-pipe.md

@@ -1 +1,7 @@
-# Pipe
+# Custom Pipes
+
+Pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions in template expressions to accept an input value and return a transformed value. Pipes are helpful because you can use them throughout your application while only declaring each pipe once. For example, you would use a pipe to show the date as April 15, 1988, rather than the raw string format.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://angular.io/guide/pipes-custom-data-trans'>Create a custom pipe - angular.io</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=P2587FN4Y0w'>Create a custom pipe video for Beginners</BadgeLink>