Run prettier

2023-03-30 01:23:01 +01:00
1 parent d081ecf5b3
commit 7434ff71eb
@@ -1,48 +1,47 @@
 ---
-jsonUrl: "/jsons/roadmaps/angular.json"
-pdfUrl: "/pdfs/roadmaps/angular.pdf"
+jsonUrl: '/jsons/roadmaps/angular.json'
+pdfUrl: '/pdfs/roadmaps/angular.pdf'
 order: 3
-briefTitle: "Angular"
-briefDescription: "Step by step guide to become a Angular Developer in 2023"
-title: "Angular Developer"
-description: "Everything that is there to learn about Angular and the ecosystem in 2023."
+briefTitle: 'Angular'
+briefDescription: 'Step by step guide to become a Angular Developer in 2023'
+title: 'Angular Developer'
+description: 'Everything that is there to learn about Angular and the ecosystem in 2023.'
 hasTopics: true
 dimensions:
  width: 968
  height: 2277.8
 schema:
-  headline: "Angular Developer Roadmap"
-  description: "Learn how to become a Angular Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place."
-  imageUrl: "https://roadmap.sh/roadmaps/angular.png"
-  datePublished: "2023-01-05"
-  dateModified: "2023-01-20"
+  headline: 'Angular Developer Roadmap'
+  description: 'Learn how to become a Angular Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  imageUrl: 'https://roadmap.sh/roadmaps/angular.png'
+  datePublished: '2023-01-05'
+  dateModified: '2023-01-20'
 seo:
-  title: "Angular Developer Roadmap: Learn to become a Angular developer"
-  description: "Community driven, articles, resources, guides, interview questions, quizzes for angular development. Learn to become a modern Angular developer by following the steps, skills, resources and guides listed in this roadmap."
+  title: 'Angular Developer Roadmap: Learn to become a Angular developer'
+  description: 'Community driven, articles, resources, guides, interview questions, quizzes for angular development. Learn to become a modern Angular developer by following the steps, skills, resources and guides listed in this roadmap.'
  keywords:
-    - "guide to becoming a angular developer"
-    - "angular developer roadmap"
-    - "angular roadmap"
-    - "become angular developer"
-    - "angular developer skills"
-    - "angular skills test"
-    - "skills for angular development"
-    - "learn angular development"
-    - "what is angular"
-    - "angular quiz"
-    - "angular interview questions"
+    - 'guide to becoming a angular developer'
+    - 'angular developer roadmap'
+    - 'angular roadmap'
+    - 'become angular developer'
+    - 'angular developer skills'
+    - 'angular skills test'
+    - 'skills for angular development'
+    - 'learn angular development'
+    - 'what is angular'
+    - 'angular quiz'
+    - 'angular interview questions'
 relatedRoadmaps:
-  - "frontend"
-  - "javascript"
-  - "react"
-  - "vue"
-  - "nodejs"
+  - 'frontend'
+  - 'javascript'
+  - 'react'
+  - 'vue'
+  - 'nodejs'
 sitemap:
  priority: 1
-  changefreq: "monthly"
+  changefreq: 'monthly'
 tags:
-  - "roadmap"
-  - "main-sitemap"
-  - "skill-roadmap"
+  - 'roadmap'
+  - 'main-sitemap'
+  - 'skill-roadmap'
 ---
-
@@ -7,4 +7,4 @@ Visit the following resources to learn more:
 - [What is TypeScript](https://thenewstack.io/what-is-typescript/)
 - [W3Schools – TypeScript Tutorial](https://www.w3schools.com/typescript/)
 - [Tutorials point – TypeScript Tutorial](https://www.tutorialspoint.com/typescript/index.htm)
- [TypeScript Crash Course for Beginners](https://www.youtube.com/watch?v=d56mG7DezGs)
+- [TypeScript Crash Course for Beginners](https://www.youtube.com/watch?v=d56mG7DezGs)
@@ -1,6 +1,6 @@
 # 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. 
+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.

@@ -9,4 +9,3 @@ Visit the following resources to learn more:
 - [Structural typings — Medium](https://medium.com/redox-techblog/structural-typing-in-typescript-4b89f21d6004)
 - [Structural typings — Typescriptlang](https://www.typescriptlang.org/docs/handbook/type-compatibility.html)
 - [Structural typing video for Beginners](https://www.youtube.com/watch?v=kWtwsX_rT3k)
-
@@ -5,4 +5,4 @@ In TypeScript, several places where `type inference` is used to provide type inf
 Visit the following resources to learn more:

 - [Type Interface - typescriptlang](https://www.typescriptlang.org/docs/handbook/type-inference.html)
- [Type Inference video for Beginners](https://www.youtube.com/watch?v=3ui_st7rtfA)
+- [Type Inference video for Beginners](https://www.youtube.com/watch?v=3ui_st7rtfA)
@@ -1,6 +1,6 @@
 # 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)`. 
+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)`.

 Visit the following resources to learn more:

@@ -5,4 +5,4 @@ The Builtin types represent the different types of values supported by the langu
 Visit the following resources to learn more:

 - [TypeScript Types - Tutorialspoint](https://www.tutorialspoint.com/typescript/typescript_types.htm)
- [Builtin Type video for Beginners](https://www.youtube.com/watch?v=Nt9ajBrqV_M)
+- [Builtin Type video for Beginners](https://www.youtube.com/watch?v=Nt9ajBrqV_M)
@@ -3,10 +3,11 @@
 An observable is a function that acts as a wrapper for a data stream. They support to pass messages inside your application. An observable is useless until an observer subscribes to it. An observer is an object which consumes the data emitted by the observable. An observer keeps receiving data values from the observable until the observable is completed, or the observer unsubscribes from the observable. Otherwise observers can receive data values from the observable continuously and asynchronously. So we can perform various operations such as updating the user interface, or passing the JSON response.

 There are 4 stages for a life cycle of an observable.
- - Creation
- - Subscription
- - Execution
- - Destruction
+
+- Creation
+- Subscription
+- Execution
+- Destruction

 Visit the following resources to learn more:

@@ -5,7 +5,7 @@ In a nutshell, the main differences between the Promise and the Observable are a
 - The Promise is eager, whereas the Observable is lazy,
 - The Promise is always asynchronous, while the Observable can be either asynchronous or synchronous,
 - The Promise can provide a single value, whereas the Observable is a stream of values (from 0 to multiple values),
-you can apply RxJS operators to the Observable to get a new tailored stream.
+  you can apply RxJS operators to the Observable to get a new tailored stream.

 Visit the following resources to learn more:

@@ -4,4 +4,4 @@ RxJS provides a variety of filtering operators that you can use to filter and tr

 Visit the following resources to learn more:

- [Understanding RxJS Operators]( https://rxjs.dev/api/operators)
+- [Understanding RxJS Operators](https://rxjs.dev/api/operators)
@@ -2,20 +2,20 @@

 In RxJS, "transformation" refers to the process of modifying or manipulating the data emitted by an Observable. There are a variety of methods available in RxJS that can be used to transform the data emitted by an Observable, including:

- - map: applies a function to each item emitted by the Observable and emits the resulting value
- - flatMap: applies a function to each item emitted by the Observable, and then flattens the resulting Observables into a single Observable
- - concatMap: applies a function to each item emitted by the Observable, and then concatenates the resulting Observables into a single Observable
- - mergeMap: applies a function to each item emitted by the Observable, and then merges the resulting Observables into a single Observable
- - switchMap: applies a function to each item emitted by the Observable, and then switches to the latest resulting Observable
+- map: applies a function to each item emitted by the Observable and emits the resulting value
+- flatMap: applies a function to each item emitted by the Observable, and then flattens the resulting Observables into a single Observable
+- concatMap: applies a function to each item emitted by the Observable, and then concatenates the resulting Observables into a single Observable
+- mergeMap: applies a function to each item emitted by the Observable, and then merges the resulting Observables into a single Observable
+- switchMap: applies a function to each item emitted by the Observable, and then switches to the latest resulting Observable

 These are just a few examples of the many methods available in RxJS for transforming the data emitted by an Observable. Each method has its own specific use case, and the best method to use will depend on the requirements of your application.

 Here are the official documentation links for the RxJS transformation methods:

- - [map](https://rxjs.dev/api/operators/map)
- - [flatMap](https://rxjs.dev/api/operators/flatMap)
- - [concatMap](https://rxjs.dev/api/operators/concatMap)
- - [mergeMap](https://rxjs.dev/api/operators/mergeMap)
- - [switchMap](https://rxjs.dev/api/operators/switchMap)
+- [map](https://rxjs.dev/api/operators/map)
+- [flatMap](https://rxjs.dev/api/operators/flatMap)
+- [concatMap](https://rxjs.dev/api/operators/concatMap)
+- [mergeMap](https://rxjs.dev/api/operators/mergeMap)
+- [switchMap](https://rxjs.dev/api/operators/switchMap)

 You can find more information and examples on these methods in the official RxJS documentation. Additionally, you can find more operators on https://rxjs.dev/api/operators and you can also find more information on the library as a whole on https://rxjs.dev/
@@ -2,28 +2,28 @@

 Combination operators in RxJS are used to combine multiple observables into a single observable. There are several types of combination operators, including:

- - Merge: merges multiple observables into a single observable that emits items from each source observable in a sequence.
+- Merge: merges multiple observables into a single observable that emits items from each source observable in a sequence.

- - Concat: concatenates multiple observables into a single observable that emits the items from each source observable in sequence, one after the other.
+- Concat: concatenates multiple observables into a single observable that emits the items from each source observable in sequence, one after the other.

- - Zip: combines the items from multiple observables into a single observable by combining the items from each observable at a corresponding index.
+- Zip: combines the items from multiple observables into a single observable by combining the items from each observable at a corresponding index.

- - CombineLatest: combines the latest values from multiple observables into a single observable by emitting an item whenever any of the source observables emit an item.
+- CombineLatest: combines the latest values from multiple observables into a single observable by emitting an item whenever any of the source observables emit an item.

- - WithLatestFrom: combines the latest value from one observable with the latest values from multiple other observables.
+- WithLatestFrom: combines the latest value from one observable with the latest values from multiple other observables.

- - ForkJoin: combines the items from multiple observables into a single observable by emitting an item only after all of the source observables have emitted an item.
+- ForkJoin: combines the items from multiple observables into a single observable by emitting an item only after all of the source observables have emitted an item.

 Further documentation can be found in the official RxJS documentation:

- - Merge: https://rxjs.dev/api/operators/merge
+- Merge: https://rxjs.dev/api/operators/merge

- - Concat: https://rxjs.dev/api/operators/concat
+- Concat: https://rxjs.dev/api/operators/concat

- - Zip: https://rxjs.dev/api/operators/zip
+- Zip: https://rxjs.dev/api/operators/zip

- - CombineLatest: https://rxjs.dev/api/operators/combineLatest
+- CombineLatest: https://rxjs.dev/api/operators/combineLatest

- - WithLatestFrom: https://rxjs.dev/api/operators/withLatestFrom
+- WithLatestFrom: https://rxjs.dev/api/operators/withLatestFrom

- - ForkJoin: https://rxjs.dev/api/operators/forkJoin
+- ForkJoin: https://rxjs.dev/api/operators/forkJoin
@@ -1,5 +1,4 @@
-# RxJS Operators 
-
+# RxJS Operators

 RxJS is mostly useful for its operators, even though the Observable is the foundation. Operators are the essential pieces that allow complex asynchronous code to be easily composed in a declarative manner.

@@ -17,9 +16,9 @@ Pipeable operators are functions, so they could be used like ordinary functions:

 ```bash
 obs.pipe(op1(), op2(), op3(), op4());
- ```
+```

- ## Creation Operators
+## Creation Operators

 **What are creation operators?** Distinct from pipeable operators, creation operators are functions that can be used to create an Observable with some common predefined behavior or by joining other Observables.

@@ -35,4 +34,3 @@ Visit the following resources to learn more:

 - [List of creation operators](https://rxjs.dev/guide/operators#creation-operators-list)
 - [Full RxJS Operators Documentation](https://rxjs.dev/guide/operators)
-
@@ -5,4 +5,4 @@ AngularJS was the older version of Angular, whose support officially ended in Ja
 Visit the following resources to learn more:

 - [AngularJS Website](https://angularjs.org/)
- [Official - Getting started with Angular](https://angular.io/start)
+- [Official - Getting started with Angular](https://angular.io/start)
@@ -2,12 +2,12 @@

 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
+- 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

 Visit the following resources to learn more:

 - [Angular Components Overview](https://angular.io/guide/component-overview)
- [Standalone Components in Angular](https://www.youtube.com/watch?v=x5PZwb4XurU)
+- [Standalone Components in Angular](https://www.youtube.com/watch?v=x5PZwb4XurU)
@@ -5,4 +5,4 @@ A Template is a form of HTML which tells Angular to go towards another component
 Visit the following resources to learn more:

 - [Understanding Templates](https://angular.io/guide/template-overview)
- [Template Syntax](https://angular.io/guide/template-syntax)
+- [Template Syntax](https://angular.io/guide/template-syntax)
@@ -4,4 +4,4 @@ Modules in Angular act like a container where we can group the components, direc

 Visit the following resources to learn more:

- [Introduction to Modules](https://angular.io/guide/architecture-modules)
+- [Introduction to Modules](https://angular.io/guide/architecture-modules)
@@ -5,4 +5,4 @@ Dependency Injection is one of the fundamental concepts in Angular. DI is wired
 Visit the following resources to learn more:

 - [Understanding Dependency Injection](https://angular.io/guide/dependency-injection)
- [Dependency Injection in Action](https://angular.io/guide/dependency-injection-in-action)
+- [Dependency Injection in Action](https://angular.io/guide/dependency-injection-in-action)
@@ -5,4 +5,4 @@ Routing in Angular allows the users to create a single-page application with mul
 Visit the following resources to learn more:

 - [Angular Routing](https://angular.io/guide/routing-overview)
- [Common Routing Tasks](https://angular.io/guide/router)
+- [Common Routing Tasks](https://angular.io/guide/router)
@@ -2,4 +2,4 @@

 Angular is an strong front-end JavaScript framework which means that it enforces a certain style of application development and project structure that developers need to follow to develop apps with Angular. However, it also offers enough flexibility to allow you to structure your project in an understandable and manageable manner.

-In this module, we will have a look at some of the most basic concepts that you need to understand before diving into the framework with more advanced concepts.
+In this module, we will have a look at some of the most basic concepts that you need to understand before diving into the framework with more advanced concepts.
@@ -5,4 +5,4 @@ The command can be used to build a project of type "application" or "library". W
 Visit the following resources to learn more:

 - [Ng Build - Angular.io](https://angular.io/cli/build)
- [Building an Angular project](https://www.youtube.com/watch?v=VB6WuCPDwz0)
+- [Building an Angular project](https://www.youtube.com/watch?v=VB6WuCPDwz0)
@@ -5,4 +5,4 @@ ng serve — This command builds, deploy, serves and every time watches your cod
 Visit the following resources to learn more:

 - [Ng serve - Angular.io](https://angular.io/cli/serve)
- [Running a project with ng serve](https://www.youtube.com/watch?v=-w-RfHcLt5U)
+- [Running a project with ng serve](https://www.youtube.com/watch?v=-w-RfHcLt5U)
@@ -2,8 +2,7 @@

 ng generate is used to create the component in angular project. These are the two main ways to generate a new component in Angular: using ng g c <component_name>, and using ng generate component <component_name>. Using either of these two commands, the new component can be generated pretty easily and followed by the suitable component name of your choice.

-
 Visit the following resources to learn more:

 - [Ng generate - Angular.io](https://angular.io/cli/generate)
- [Angular cli generate component](https://www.youtube.com/watch?v=NlHlu_zzmo4)
+- [Angular cli generate component](https://www.youtube.com/watch?v=NlHlu_zzmo4)
@@ -4,8 +4,7 @@ ng test is used to runs unit tests in angular project.

 `ng test <project> [options]` | `ng t <project> [options]`

-
 Visit the following resources to learn more:

 - [Ng test - Angular.io](https://angular.io/cli/test)
- [Angular Ng test commands](https://www.youtube.com/watch?v=n1O_eRwzRKA)
+- [Angular Ng test commands](https://www.youtube.com/watch?v=n1O_eRwzRKA)
@@ -5,4 +5,4 @@ End-to-end testing (E2E) of Angular applications is performed using the Protract
 Visit the following resources to learn more:

 - [Ng e2e - Angular.io](https://angular.io/cli/e2e)
- [Angular cli generate component](https://www.youtube.com/watch?v=3vFnhzEGfew)
+- [Angular cli generate component](https://www.youtube.com/watch?v=3vFnhzEGfew)
@@ -9,4 +9,4 @@ The default Angular project, All dependencies installed in node_modules folder ,
 Visit the following resources to learn more:

 - [Ng New - Angular.io](https://angular.io/cli/new)
- [ng New command](https://www.youtube.com/watch?v=NdEpZezptkQ)
+- [ng New command](https://www.youtube.com/watch?v=NdEpZezptkQ)
@@ -1,10 +1,10 @@
 # Angular CLI

-The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. we can install angular latest CLI using the following command 
+The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. we can install angular latest CLI using the following command

 `npm install -g @angular/cli`

 Visit the following resources to learn more:

 - [Angular CLI - Angular.io](https://angular.io/cli)
- [Angular CLI - setup](https://www.youtube.com/watch?v=mZnzX3J5XKI)
+- [Angular CLI - setup](https://www.youtube.com/watch?v=mZnzX3J5XKI)
@@ -1,6 +1,6 @@
 # Template statements

-Template statements are methods or properties that you can use in your HTML to respond to user events. With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms. Enclose the event in `()`  which causes Angular to evaluate the right hand side of the assignment as one or more template statements chained together using semicolon `;`.
+Template statements are methods or properties that you can use in your HTML to respond to user events. With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms. Enclose the event in `()` which causes Angular to evaluate the right hand side of the assignment as one or more template statements chained together using semicolon `;`.

 Visit the following resources to learn more:

@@ -4,8 +4,7 @@ SKDirectives are classes that add additional behavior to elements in your Angula

 `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.

-
 Visit the following resources to learn more:

 - [Understanding BuiltIn Directives](https://angular.io/guide/built-in-directives)
- [BuiltIn Directives Types](https://thinkster.io/tutorials/angular-2-directives)
+- [BuiltIn Directives Types](https://thinkster.io/tutorials/angular-2-directives)
@@ -1,11 +1,10 @@
 # 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 
+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`

-
 Visit the following resources to learn more:

 - [Understanding BuiltIn Pipes](https://angular.io/guide/pipes)
- [BuiltIn Pipes - exampls](https://codecraft.tv/courses/angular/pipes/built-in-pipes/)
+- [BuiltIn Pipes - exampls](https://codecraft.tv/courses/angular/pipes/built-in-pipes/)
@@ -5,4 +5,4 @@ Change detection is the process through which Angular checks to see whether your
 Visit the following resources to learn more:

 - [Understanding Change detection](https://angular.io/guide/change-detection)
- [4 Runtime Performance Optimizations ( Change detection )](https://www.youtube.com/watch?v=f8sA-i6gkGQ)
+- [4 Runtime Performance Optimizations ( Change detection )](https://www.youtube.com/watch?v=f8sA-i6gkGQ)
@@ -1 +1 @@
-# Rendering topics
+# Rendering topics
@@ -1,10 +1,10 @@
 # Reactive Forms

-Reactive Forms in angular are those which used to handle the inputs coming from the user. We can define controls by using classes such as FormGroup and FormControl. 
+Reactive Forms in angular are those which used to handle the inputs coming from the user. We can define controls by using classes such as FormGroup and FormControl.

 Visit the following resources to learn more:

 - [Reactive forms - Angular](https://angular.io/guide/reactive-forms)
 - [Angular Reactive Forms](https://www.javatpoint.com/angular-reactive-forms)
 - [How To Use Reactive Forms in Angular](https://www.digitalocean.com/community/tutorials/angular-reactive-forms-introduction)
- [Reactive Form in Angular](https://www.youtube.com/watch?v=8k4ctDmVn7w)
+- [Reactive Form in Angular](https://www.youtube.com/watch?v=8k4ctDmVn7w)
@@ -1,6 +1,6 @@
 # Template Driven Forms

-A Template driven form is the simplest form we can build in Angular. It is mainly used for creating simple form application. 
+A Template driven form is the simplest form we can build in Angular. It is mainly used for creating simple form application.

 It uses two-way data-binding (ngModel) to create and handle the form components.

@@ -9,4 +9,4 @@ Visit the following resources to learn more:
 - [Building a template-driven form](https://angular.io/guide/forms)
 - [Template-Driven Forms](https://codecraft.tv/courses/angular/forms/template-driven/)
 - [Template driven form](https://www.youtube.com/watch?v=whr14XxB8-M)
- [Template driven form Validations](https://www.youtube.com/watch?v=cVd4ZCIXprs)
+- [Template driven form Validations](https://www.youtube.com/watch?v=cVd4ZCIXprs)
@@ -1 +1 @@
-# Configuration
+# Configuration
@@ -1 +1 @@
-# Router events
+# Router events
@@ -6,4 +6,3 @@ Visit the following resources to learn more:

 - [What is Dependency Injection ? - angular.io ](https://angular.io/guide/dependency-injection)
 - [Introduction of Dependency injection](https://www.youtube.com/watch?v=OFPIGlxunL0)
-
@@ -4,7 +4,7 @@ A component instance has a lifecycle that starts when Angular instantiates the c

 Your application can use lifecycle hook methods to tap into key events in the lifecycle of a component or directive to initialize new instances, initiate change detection when needed, respond to updates during change detection, and clean up before deletion of instances.

-The following life cycle hooks of angular are : 
+The following life cycle hooks of angular are :

 `OnChanges` , `OnInit` , `DoCheck` , `OnDestroy` , `AfterContentInit` , `AfterContentChecked` , `AfterViewInit` , `AfterViewChecked`

@@ -7,4 +7,3 @@ Visit the following resources to learn more:
 - [What is NGXS ? - Ngxs.io ](https://www.ngxs.io/)
 - [Details about NGXS - Medium ](https://medium.com/@knoldus/introduction-to-ngxs-state-management-pattern-library-for-angular-ec76f681ceba)
 - [Practise of NGXS](https://www.youtube.com/watch?v=SGj11j4hxmg)
-
@@ -6,4 +6,3 @@ Visit the following resources to learn more:
 - [What is NGRX ? - ngrx.io ](https://ngrx.io/)
 - [Details about NGRX - Medium ](https://ahmedrebai.medium.com/introduction-to-state-management-with-ngrx-and-angular-91f4ff27ec9f)
 - [Practise of NGRX](https://www.youtube.com/watch?v=f97ICOaekNU)
-
@@ -1 +1 @@
-# Zones
+# Zones
@@ -7,4 +7,4 @@ From the core concept, Angular directives are categorized into three categories:
 Visit the following resources to learn more:

 - [Create a custom directive - Freecodecamp](https://www.freecodecamp.org/news/angular-directives-learn-how-to-use-or-create-custom-directives-in-angular-c9b133c24442/)
- [Create a custom directive video for Beginners](https://www.youtube.com/watch?v=AoN56g6UAsE)
+- [Create a custom directive video for Beginners](https://www.youtube.com/watch?v=AoN56g6UAsE)
@@ -5,4 +5,4 @@ Pipes to transform strings, currency amounts, dates, and other data for display.
 Visit the following resources to learn more:

 - [Create a custom pipe - angular.io](https://angular.io/guide/pipes-custom-data-trans)
- [Create a custom pipe video for Beginners](https://www.youtube.com/watch?v=P2587FN4Y0w)
+- [Create a custom pipe video for Beginners](https://www.youtube.com/watch?v=P2587FN4Y0w)