0% found this document useful (0 votes)

27 views125 pages

Angular Learning Resources Guide

Uploaded by

ap s

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

27 views125 pages

Angular Learning Resources Guide

Uploaded by

ap s

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

Learn Angular

This repository contains a list of resources to learn Angular. It includes tutorials, articles,
videos, books, and other resources to help you learn Angular from scratch.

npm npm npm npm GitHub issues GitHub pull requests GitHub
GitHub last commit GitHub top language GitHub repo size
GitHub code size in bytes GitHub contributors GitHub forks GitHub stars
GitHub watchers

Table of Contents
Introduction
Features of Angular
Difference between AngularJS vs Angular
Angular vs React
Roadmap
Configuration
Prerequisites
Installation
Components
Three main building blocks
Component Creation
Using Angular CLI
Manual Creation
Example
Scope
View Encapsulation
Emulated View Encapsulation
Shadow DOM View Encapsulation
None View Encapsulation
Component Communication
Parent to Child
Child to Parent
Standalone Components
Data Binding
One Way Binding
Two Way Binding
Directives
Structural Directives
Attribute Directives
Custom Directives
Other Directives
New Control Flow
Pipes
Date Pipe
Uppercase Pipe
Lowercase Pipe
Currency Pipe
Percent Pipe
Slice Pipe
Decimal/number Pipe
JSON Pipe
Async Pipe
Decorators
Input
Output
HostListener
ContentChild & ContentChildren
ViewChild & ViewChildren
HostListener
ContentChild & ContentChildren
ViewChild & ViewChildren
Life Cycle Hooks
OnChanges
OnInit
DoCheck
AfterViewInit
AfterViewChecked
AfterContentInit
AfterContentChecked
OnDestroy
Forms
Template Driven Forms
Reactive Forms
Services
Injectable Decorator
Dependency Injection
Providers
Routing
Router Outlet
Router Link
Router Link Active
Router State
Router Events
Router Guards
Lazy Loading
HTTP Client
Destroy Ref
Http
Module
Router
Route Parameter
Route Guards
Observables
Creating Observables
Subscribing to Observables
Difference between Observables and Promises in Angular
Unsubscribe
Renderer2
JIT
AOT
Deferrable Views
Meta Tags
Title Service
Dynamic Title
Meta Service
Angular Signals
Security
Preventing cross-site scripting (XSS)
Angular’s cross-site scripting security model
Preventing cross-site scripting (XSS)
Angular’s cross-site scripting security model
Sanitization and security contexts
Sanitization example
Direct use of the DOM APIs and explicit sanitization calls
Trusting safe values
Content security policy
Enforcing Trusted Types
Use the AOT template compiler
Server-side XSS protection
HTTP-level vulnerabilities
Cross-site request forgery
HttpClient XSRF/CSRF security
Configure custom cookie/header names
Disabling XSRF protection
Cross-site script inclusion (XSSI)
Auditing Angular applications
Angular Animations
Installing Angular Animations
Angular Universal
Creating an Angular Universal application
Bootstrap
Installing Bootstrap
Importing Bootstrap
Angular Material
Installing Angular Material
Importing Angular Material
Tailwind CSS
Installing Tailwind CSS
Importing Tailwind CSS
PrimeNG
Installing PrimeNG
Importing PrimeNG
SPA
Advantages of SPA
PWA
Installing PWA
Configuring PWA
Building PWA
Service Worker
Features of PWA
CLI Commands
Version compatibility
Deploying an Angular Application
Imports
TypeScript
RxJS
Learn From GitHub Repositories
Learn From Websites
Learn From Books
Learn From YouTube Channels
Learn More From Blogs Sites
List of Online Editors/Compiler for Angular
List of Twitter Users to Follow
List of LinkedIn Users to Follow
List of Discord Servers to Join

Introduction
Angular is a popular open-source framework by Google for building single-page and
dynamic web applications. It offers tools and libraries for components, services, forms,
routing, and HTTP client, all built with TypeScript. Angular is known for its
performance, scalability, and developer productivity.

Features of Angular
Component-Based Architecture: Reusable, self-contained units of code that define
the UI and behavior of a part of the application.
Two-Way Data Binding: Automatic synchronization of data between the model and
the view.
Dependency Injection: Provides components with the services they need for better
modularity and testability.
Routing: Powerful system for navigation between different views, supporting deep
linking, lazy loading, and route guards.
Forms: Tools for template-driven and reactive forms, based on a model-driven
approach.
HTTP Client: Simple API for making HTTP requests and handling responses.
Observables: Handles asynchronous operations and event handling.
TypeScript: Superset of JavaScript with static typing, better tooling, error checking,
and code completion.
Performance: Optimized for performance with virtual DOM, lazy loading, tree
shaking, and ahead-of-time compilation.
Mobile Support: Tools for building responsive, touch-friendly mobile applications,
including PWAs.
SEO Friendly: Tools for server-side rendering, pre-rendering, and meta tags to
improve search engine visibility.
Community Support: Large, active community providing support and sharing
knowledge.

Difference between AngularJS vs Angular

AngularJS Angular
Based on MVC Architecture Based on Components
AngularJS Angular
Uses JavaScript to build the
Uses TypeScript to build the application
application
No Mobile Support Mobile supports
Runs on both client-side as well as server-
Run on only client-side
side
CLI not present CLI present
No SEO Friendly Seo Friendly
Performance is slow Performance is fast

Back to top⤴️
Angular vs React
Angular: A full-fledged framework by Google for building web applications. It
includes features like two-way data binding, routing, forms, and HTTP client. Ideal
for large, complex applications needing a complete solution.

React: A JavaScript library by Facebook focused on building user interfaces. It

provides a simple, declarative way to build UI components. Suitable for small to
medium-sized applications requiring flexibility and customization.

Comparison: Angular offers a complete solution with built-in features, while React
focuses on the view layer, allowing developers to choose additional tools and libraries.

When to use Angular: Best for large, complex applications needing integrated tools and
scalability.

When to use React: Best for small to medium-sized applications needing flexibility and
a focus on the UI.

Configuration

Prerequisites
[Link]
NPM
Angular CLI
Installation

Install the Angular CLI globally:

npm install -g @angular/cli

If you are using pnpm, you can use the following command:

pnpm install -g @angular/cli

If you are using yarn, you can use the following command:

yarn global add @angular/cli

If you are using bun, you can use the following command:

bun install -g @angular/cli

If you want to install a specific version of the Angular CLI, you can use the following
command:

npm install -g @angular/cli@version-number

If you have already installed the Angular CLI, you can update it to the latest version
using the following command:

npm install -g @angular/cli@latest

Check version

ng version

Create a new Angular project: (Replace [PROJECT NAME] with your project name)

# with standalone component

ng new [PROJECT NAME]

# without standalone component

ng new [PROJECT NAME] --standalone=false

## without routing
ng new [PROJECT NAME] --routing=false

## without testing
ng new [PROJECT NAME] --skip-tests=true

## without dependencies
ng new [PROJECT NAME] --skip-install=true

## without git
ng new [PROJECT NAME] --skip-git=true

## with experimental zonless

ng new [PROJECT NAME] --experimental-zoneless
Note: In version v16 and earlier, there is no standalone component. In version v17 and
later, the standalone component is default enabled. You can enable or disable the
standalone component using the --standalone flag while creating a new project (In this
repository, an example repository is created with the latest version of Angular).

Navigate to the project directory:

cd [PROJECT NAME]

Run the application:

ng serve

Open the browser and navigate to [Link]

Project structure(Version 16 and earlier):

[PROJECT NAME]
├── node_modules
├── src
│ ├── app
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── ...
│ ├── assets
│ │ ├── .gitkeep
│ │ └── ...
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ └── ...
├── .editorconfig
├── .gitignore
├── [Link]
├── [Link]
├── [Link]
├── [Link]
├── [Link]
└── ...

Project structure(Version 17 and later):

[PROJECT NAME]
├── node_modules
├── public
│ ├── [Link]
│ └── ...
├── src
│ ├── app
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ └── ...
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ └── ...
├── .editorconfig
├── .gitignore
├── [Link]
├── [Link]
├── [Link]
├── [Link]
├── [Link]
└── ...

Back to top ⤴️
Components
Component is the main building block of an Angular Application. It is a TypeScript class
that interacts with the HTML template and provides the data and logic to the view.

Three main building blocks

There are three main building blocks of an Angular component:

Template
Class
Metadata

Template - Defines the layout and content of the View.

Class - Class provides the data & logic to the View.

MetaData - Metadata Provides additional information about the component to the

Angular.

Component metadata properties

There are several properties that can be defined in the component metadata:

Selector
Providers
Styles
StyleUrls
Template
TemplateUrl

Selector - Defines the element name or CSS selector that identifies the component in the
HTML template.

selector: 'app-root'

Providers - Defines the providers of the component’s dependencies.

providers: [MyService]

styles - Defines the inline styles for the component.

styles: ['h1 { color: red; }']

styleUrls - Defines an array of URLs of the stylesheets for the component.

styleUrls: ['./[Link]']

template - Defines the HTML template for the component.

template: '<h1>My Component</h1>'

templateUrl - Defines the URL of the HTML template for the component.

templateUrl: './[Link]'

Component Creation

Using Angular CLI

ng generate component [component-name]

# or

ng g c [component-name]

Manual Creation
Step 1 - Create a new folder for the component inside the src/app folder.

src/app/[component-name]

Step 2 - Create a new TypeScript file for the component inside the new folder.

src/app/[component-name]/[component-name].[Link]

Step 3 - Create a new HTML file for the component inside the new folder.

src/app/[component-name]/[component-name].[Link]

Step 4 - Create a new CSS file for the component inside the new folder.
src/app/[component-name]/[component-name].[Link]

Step 5 - Import the Component class from the @angular/core module.

import { Component } from '@angular/core';

Step 6 - Decorate the class with the @Component decorator.

@Component({
selector: 'app-[component-name]',
standalone: true,
templateUrl: './[component-name].[Link]',
styleUrls: ['./[component-name].[Link]']
})

If you want to create a non-standalone component, set the standalone property to false.
The standalone component is enabled by default in Angular v17 and v18. In Angular v19
and later, the standalone component is enabled by default and the standalone property is
not required. You can disable the standalone component by setting the standalone
property to false.

Step 7 - Define the selector, template, and styles for the component.

selector - The selector for the component.

templateUrl - The URL of the HTML template for the component.
styleUrls - An array of URLs of the stylesheets for the component.

Step 8 - Export the class.

export class [ComponentName]Component {

// Component logic here
}

Step 9 - Import the component class in the [Link] file.

import { [ComponentName]Component } from './[component-name]/[component-
name].component';

Step 10 - Add the component to the declarations array in the @NgModule decorator.

declarations: [
AppComponent,
[ComponentName]Component
]

If you created a standalone component, [Link] file is not required. You can
import the component in the [Link] file. as shown below.
import { [ComponentName]Component } from './[component-name]/[component-
name].component';

@Component({
selector: 'app-root',
standalone: true,
imports: [[ComponentName]Component],
templateUrl: './[Link]',
styleUrl: './[Link]'
})

export class AppComponent {

title = 'app';
}

Step 11 - Use the component selector in the HTML template.

<app-[component-name]></app-[component-name]>

Step 12 - Run the application using the ng serve command.

ng serve

# or

ng serve --open

Example

Creating the component files (Version 16 and earlier) -

//[Link]
import { Component } from '@angular/core';

@Component({
selector: 'test-component',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class TestComponent {

// Component logic here
}

<h1>Test Component</h1>

/*[Link]*/
h1 {
color: red;
}

Importing the component in the [Link] file -

//[Link]
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

Importing the component in the [Link] file -

//[Link]
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { TestComponent } from './[Link]';

@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrl: './[Link]'
})
export class AppComponent {
title = 'app';
}

<app-test-component></app-test-component>

In Version 16 and earlier of Angular, there is no standalone component. You need to

import the component in the [Link] file. If you created a non-standalone
component, you will see no standalone property in the @Component decorator.

Creating the component files (Version 17 and 18) -

//[Link]
import { Component } from '@angular/core';

@Component({
selector: 'app-test-component',
standalone: true,
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class TestComponent {

// Component logic here
}

<h1>Test Component</h1>

/*[Link]*/
h1 {
color: red;
}

Importing the component in the [Link] file -

//[Link]
import { Component } from '@angular/core';
import { TestComponent } from './[Link]';

@Component({
selector: 'app-root',
imports: [TestComponent],
templateUrl: './[Link]',
styleUrl: './[Link]'
})
export class AppComponent {
title = 'app';
}

In version 17 and 18 of Angular, the standalone component is enabled by default with the
standalone property set to true in the @Component decorator. You can disable the
standalone component by setting the standalone property to false or not adding the
standalone property in the @Component decorator.

Creating the component files (Version 19 and later) -

//[Link]
import { Component } from '@angular/core';

@Component({
selector: 'app-test-component',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class TestComponent {

// Component logic here
}

<h1>Test Component</h1>

/*[Link]*/
h1 {
color: red;
}

Importing the component in the [Link] file -

//[Link]
import { Component } from '@angular/core';
import { TestComponent } from './[Link]';

@Component({
selector: 'app-root',
imports: [TestComponent],
templateUrl: './[Link]',
styleUrl: './[Link]'
})
export class AppComponent {
title = 'app';
}

<app-test-component></app-test-component>

In version 19 and later of Angular, the standalone component is enabled by default. You
can disable the standalone component by setting the standalone property to false in the
@Component decorator.

Inside app folder, [Link] file is created by default in version 17 and later of
Angular. And [Link] file is created by default in version 17 and later of Angular.

// [Link]
import { ApplicationConfig, provideZoneChangeDetection } from
'@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './[Link]';

export const appConfig: ApplicationConfig = {

providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
],
};

// [Link]
import { Routes } from '@angular/router';

export const routes: Routes = [];

You can import the component in the [Link] file and use the component
selector in the HTML template.

Creating the inline Template & StyleUrls -

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: '<h1> {{title}} works </h1>',
styles: ['h1 { font-weight: bold; }']
})
export class AppComponent {
title = 'app';
}

Global Scope: Accessible anywhere in the application.

Local Scope: Accessible only within a specific function or block.
Component Scope: Accessible within a component and its child components.

Global Scope
Accessible from anywhere in the application; defined outside any function or block.

Example :

// Global Scope
let globalVariable = 'Global Variable';

function testFunction() {
[Link](globalVariable); // Output: Global Variable
}

testFunction();

Example in Angular :

import { Component } from '@angular/core';

// Global Scope
let globalVariable = 'Global Variable';

@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class AppComponent {

title = globalVariable;
}

<h1>{{ title }}</h1>
Local Scope

Accessible only within the function or block where defined.

Example :

function testFunction() {
// Local Scope
let localVariable = 'Local Variable';
[Link](localVariable); // Output: Local Variable
}

testFunction();
[Link](localVariable); // Error: localVariable is not defined

Example in Angular :

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class AppComponent {

testFunction() {
// Local Scope
let localVariable = 'Local Variable';
[Link](localVariable); // Output: Local Variable
}
}

<button (click)="testFunction()">Test Function</button>

Component Scope
Accessible within the component and its children.

Example :

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class AppComponent {

// Component Scope
title = 'app';
}

<h1>{{ title }}</h1>

Back to top⤴️
View Encapsulation
Controls how styles are applied to components. By default, Angular uses Emulated View
Encapsulation, scoping styles to the component.

Emulated View Encapsulation

Default mode in Angular, emulating shadow DOM to scope styles to the component.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
encapsulation: [Link]
})
export class AppComponent {
title = 'app';
}

Stackblitz Example

Shadow DOM View Encapsulation

Uses native shadow DOM to encapsulate styles within the component, preventing them
from affecting other components.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
encapsulation: [Link]
})
export class AppComponent {
title = 'app';
}

Stackblitz Example
None View Encapsulation

Disables encapsulation; styles can affect other components.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
encapsulation: [Link]
})
export class AppComponent {
title = 'app';
}

Stackblitz Example

Back to top ⤴️
Component Communication
Passing data between Angular components using Input/Output decorators, EventEmitter,
and services.

Parent to Child

Input Decorator - The @Input decorator is used to pass data from a parent component to
a child component. It allows the parent component to bind a property to the child
component.

Example :

import { Component, Input } from '@angular/core';

@Component({
selector: 'app-child',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class ChildComponent {

@Input() message: string;
}

<p>{{ message }}</p>

import { Component } from '@angular/core';

@Component({
selector: 'app-parent',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class ParentComponent {

message = 'Hello from parent component';
}

<app-child [message]="message"></app-child>

Stackblitz Example

Child to Parent

Output Decorator - The @Output decorator is used to pass data from a child component
to a parent component. It allows the child component to emit events that the parent
component can listen to.

Example :

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'app-child',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class ChildComponent {

@Output() messageEvent = new EventEmitter<string>();

sendMessage() {
[Link]('Hello from child component');
}
}

<button (click)="sendMessage()">Send Message</button>

import { Component } from '@angular/core';

@Component({
selector: 'app-parent',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class ParentComponent {

message: string;
receiveMessage($event) {
[Link] = $event;
}
}

<app-child (messageEvent)="receiveMessage($event)"></app-child>
<p>{{ message }}</p>

Stackblitz Example

Back to top⤴️
Siblings to Siblings Communication
Using Services - Services are a way to share data and functionality between components
in Angular. You can create a service that holds the data and methods that need to be
shared between components.

Example 1 :

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})

export class DataService {

message: string;

setMessage(message: string) {
[Link] = message;
}

getMessage() {
return [Link];
}
}

import { Component } from '@angular/core';

import { DataService } from './[Link]';

@Component({
selector: 'app-sibling1',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class Sibling1Component {

message: string;

constructor(private dataService: DataService) {}

sendMessage() {
[Link]('Hello from sibling1 component');
}
}

<button (click)="sendMessage()">Send Message</button>

import { Component } from '@angular/core';

import { DataService } from './[Link]';

@Component({
selector: 'app-sibling2',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class Sibling2Component {

message: string;

constructor(private dataService: DataService) {}

receiveMessage() {
[Link] = [Link]();
}
}

<p>{{ message }}</p>
<button (click)="receiveMessage()">Receive Message</button>

Stackblitz Example

Example 2 :

Using RxJS Subjects - RxJS Subjects are a way to share data and events between
components in Angular. You can create a Subject that emits events and subscribe to those
events in the components.

import { Injectable } from '@angular/core';

import { Subject } from 'rxjs';

@Injectable({
providedIn: 'root'
})

export class DataService {

message = new Subject<string>();

setMessage(message: string) {
[Link](message);
}
}

import { Component } from '@angular/core';

import { DataService } from './[Link]';

@Component({
selector: 'app-sibling1',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class Sibling1Component {

message: string;

constructor(private dataService: DataService) {}

sendMessage() {
[Link]('Hello from sibling1 component');
}
}

<button (click)="sendMessage()">Send Message</button>

import { Component } from '@angular/core';

import { DataService } from './[Link]';

@Component({
selector: 'app-sibling2',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class Sibling2Component {

message: string;

constructor(private dataService: DataService) {}

ngOnInit() {
[Link](message => {
[Link] = message;
});
}
}

<p>{{ message }}</p>

Example 3 :
Using ViewChild and ViewChildren - ViewChild and ViewChildren are a way to access
child components in Angular. You can use ViewChild to access a single child component
and ViewChildren to access multiple child components.

import { Component, ViewChild } from '@angular/core';

import { Sibling2Component } from './[Link]';

@Component({
selector: 'app-sibling1',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class Sibling1Component {

@ViewChild(Sibling2Component) sibling2: Sibling2Component;

sendMessage() {
[Link] = 'Hello from sibling1 component';
}
}

<button (click)="sendMessage()">Send Message</button>
<app-sibling2></app-sibling2>

import { Component } from '@angular/core';

@Component({
selector: 'app-sibling2',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})

export class Sibling2Component {

message: string;
}

<p>{{ message }}</p>

Stackblitz Example

Back to top⤴️
Standalone Components
A standalone component is a type of component which is not part of any Angular module.
It provides a simplified way to build Angular applications by reducing the need for
NgModules. Standalone components are self-contained and declare their own
dependencies.
Creating a Standalone Component
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-standalone',
standalone: true, // Mark as standalone
imports: [CommonModule], // Import required dependencies
template: `
<h1>Standalone Component</h1>
<p>This is a self-contained component</p>
`
})
export class StandaloneComponent {
// Component logic here
}

Key Features of Standalone Components

Self-contained: Declares its own dependencies through the imports array
No NgModule required: Can be used without declaring in a module
Easier testing: Simpler to test due to explicit dependencies
Better tree-shaking: Enables more efficient bundle optimization
Simplified lazy-loading: Can be lazy-loaded directly without module

Using Standalone Components

// Importing in another standalone component
@Component({
selector: 'app-parent',
standalone: true,
imports: [StandaloneComponent],
template: `
<app-standalone></app-standalone>
`
})
export class ParentComponent {}

// Bootstrapping a standalone component

import { bootstrapApplication } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
providers: [
// Root providers here
]
});
Converting to Standalone

To convert an existing component to standalone:

1. Add standalone: true to the component decorator

2. Move dependencies from NgModule imports to component imports
3. Remove component declaration from NgModule
4. Import required dependencies directly in the component

Back to top ⤴️
Data binding
Data binding is a core feature of Angular that allows you to bind data between the
component’s class and the HTML template. There are two types of data binding in
Angular:

There are two types of data binding in Angular:

One-way binding - This allows for passing data from the component’s class to the
HTML template or vice-versa.

Two-way binding - This allows for binding a property of an HTML element to a

property in the component’s class and vice-versa.

One way binding

One-way binding allows for passing data from the component’s class to the HTML
template.

There are several ways to achieve one-way binding in Angular, including:

1. From Component to View

2. From View to Component

1. From Component to View - This allows for passing data from the component’s class
to the HTML template.

There are several ways to achieve one-way binding from the component to the view in
Angular, including:

1. Interpolation
2. Property binding
3. Class binding
4. Style binding
5. Attribute binding

Interpolation - This allows for embedding expressions in the HTML template. It is

denoted by double curly braces ({{}}).

Example :

<h1>{{ firstText }} {{ lastText }}</h1>

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
firstText = 'Interpolation';
lastText = 'Example';
}

Stackblitz Example

Property binding - This allows for binding a property of an HTML element to a property
in the component’s class. It is denoted by square brackets ([]).

Example :

<button [disabled]="isDisabled">I am disabled</button>

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
title = 'Angular Property Binding Example';

isDisabled = true;
}

Stackblitz Example

class binding - This allows for binding a class of an HTML element to a property in the
component’s class. It is denoted by square brackets ([]).

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
isActive = false;
toggleActive() {
[Link] = ![Link];
}
}

<div [[Link]]="isActive">This div is active.</div>

<button (click)="toggleActive()">Toggle Active</button>

.active {
background-color: yellow;
}

Stackblitz Example

style binding - This allows for binding a style of an HTML element to a property in the
component’s class. It is denoted by square brackets ([]).

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
backgroundColor = 'red';
textColor = 'white';
}

<div [[Link]-color]="backgroundColor">
<h1 [[Link]]="textColor">Hello, world!</h1>
</div>

Stackblitz Example

attribute binding - This allows for binding an attribute of an HTML element to a

property in the component’s class. It is denoted by square brackets ([]).

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
imageUrl = '[Link]
imageAlt = 'Example image';
isButtonDisabled = false;
}

<img [[Link]]="imageUrl" [[Link]]="imageAlt">

<button [[Link]]="isButtonDisabled">Click me</button>

Stackblitz Example

b. From View to Component - This allows for passing data from the HTML template to
the component’s class.

There are several ways to achieve one-way binding from the view to the component in
Angular, including:

1. Event binding
2. ngModel

Event binding - This allows for binding an event of an HTML element to a method in
the component’s class. It is denoted by parentheses (()).

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: [ './[Link]' ]
})
export class AppComponent {
onClick() {
[Link]('Button was clicked');
}
}

<h1>Event Binding Example</h1>

<button (click)="onClick()">Click me</button>

Stackblitz Example

ngModel - The ngModel directive is used to create two-way data binding between an
input element and a property in the component’s class. It is commonly used to bind form
controls to properties in the component.

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
name: string = '';
}

<input [(ngModel)]="name" placeholder="Enter your name">

Remeber 💡:
The (click) calls the specified function when a user clicks on the given element (in your
example, when a user clicks on a row).

The (change) event binds to HTML’s onChange event. This event is fired for <input>,
<select>, and <textarea> elements when a change to the element’s value is committed
by the user.

The (change) event can also be specifically implemented by other Angular components. It
is generally implemented on components where the contents of the component are
changed by the user.

☝️Source of Explaination
Two ways binding

Two-way binding allows for binding a property of an HTML element to a property in the
component’s class and vice-versa. It is denoted by [(ngModel)].

There are several ways to achieve two-way binding in Angular, including:

1. ngModel
2. ngModelChange
3. change event

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
name: string = '';
}

<input [(ngModel)]="name" placeholder="Enter your name">

Stackblitz Example

Back to top⤴️
ngModelChange - The ngModelChange event is emitted when the value of an input
element bound to ngModel changes. It can be used to perform additional logic when the
value changes.

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

name: string = '';

onNameChange(value: string) {
[Link]('Name changed to:', value);
}
}

<input [(ngModel)]="name" (ngModelChange)="onNameChange($event)"

placeholder="Enter your name">
<p>Your name is: {{name}}</p>

Stackblitz Example

change event - The change event is emitted when the value of an input element changes.
It can be used to perform additional logic when the value changes.

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

name: string = '';

onNameChange(value: string) {
[Link]('Name changed to:', value);
}
}

<input [(ngModel)]="name" (change)="onNameChange($[Link])"

placeholder="Enter your name">
<p>Your name is: {{name}}</p>

Stackblitz Example
Back to top ⤴️
Directives
Directives add behaviour to an existing DOM element or an existing component instance.

Types of Directives
There are three types of directives in Angular:

1. Structural Directives - Structural directives are used to add or remove elements

from the DOM based on a condition. They are denoted by an asterisk (*) before the
directive name.

2. Attribute Directives - Attribute directives are used to change the appearance or

behavior of an element. They are denoted by square brackets [] before the directive
name.

3. Custom Directives - Custom directives are user-defined directives that add custom
behavior to an element. They can be used to encapsulate complex behavior and reuse
it across multiple components.

Structural Directives
There are several built-in structural directives in Angular, including:

1. NgIf
2. NgFor
3. NgSwitch

ngIf - The ngIf directive is used to conditionally display elements based on the value of a
given expression. It is commonly used to show or hide elements in the UI based on
certain conditions.

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
showElement = true;
}

<h1>ngIf Example</h1>
<div *ngIf="showElement">
This element will only be displayed if showElement is true.
</div>
Stackblitz Example

ngFor - The ngFor directive is used to iterate over a list of items and create a template for
each item. It is commonly used to display a list of items in the UI.

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

items = ['Item 1', 'Item 2', 'Item 3'];
}

<h1>ngFor Example</h1>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>

Stackblitz Example

ngSwitch - The ngSwitch directive is used to conditionally display elements based on the
value of a given expression. It is similar to a switch statement in JavaScript.

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
value = 1;
}

<h1>ngSwitch Example</h1>
<div [ngSwitch]="value">
<div *ngSwitchCase="1">Case 1</div>
<div *ngSwitchCase="2">Case 2</div>
<div *ngSwitchCase="3">Case 3</div>
<div *ngSwitchDefault>Default case</div>
</div>

Stackblitz Example
Attribute Directives

There are several built-in attribute directives in Angular, including:

1. NgClass
2. NgStyle
3. NgModel

ngClass - The ngClass directive is used to conditionally apply CSS classes to an element
based on the value of a given expression. It is commonly used to apply styles to elements
based on certain conditions.

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
isHighlighted = true;
}

<h1>ngClass Example</h1>
<div [ngClass]="{ highlighted: isHighlighted }">
This element will have the 'highlighted' class if isHighlighted is true.
</div>

.highlighted {
background-color: yellow;
}

Stackblitz Example

ngStyle - The ngStyle directive is used to conditionally apply inline styles to an element
based on the value of a given expression. It is commonly used to apply dynamic styles to
elements based on certain conditions.

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
color = 'red';
}
<h1>ngStyle Example</h1>
<div [ngStyle]="{ color: color }">
This element will have the color style set to the value of the color
property.
</div>

Stackblitz Example

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
name: string;
}

<h1>ngModel Example</h1>
<form>
<label for="name">Name:</label>
<input type="text" id="name" [(ngModel)]="name" name="name" />
</form>

Stackblitz Example

Custom Directives

Custom directives are user-defined directives that add custom behavior to an element.
They can be used to encapsulate complex behavior and reuse it across multiple
components.

Example :

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
selector: '[appCustomDirective]',
})
export class CustomDirectiveDirective {
constructor(private el: ElementRef) {}

@HostListener('mouseenter') onMouseEnter() {
[Link]('yellow');
}
@HostListener('mouseleave') onMouseLeave() {
[Link](null);
}

private highlight(color: string) {

[Link] = color;
}
}

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './[Link]';

import { CustomDirectiveDirective } from './[Link]';

@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent, CustomDirectiveDirective],
bootstrap: [AppComponent],
})
export class AppModule {}

<h1>Custom Directive Element</h1>

<div appCustomDirective>
This element will have a yellow background when the mouse is over it.
</div>

Stackblitz Example

There are several other built-in directives in Angular, including:

ngContainer
ngTemplate
ngContent
ngTemplateOutlet

ngContainer - The ngContainer directive is a simple container that doesn’t generate any
markup in the DOM. It’s mainly used as a placeholder to group and structure content
within Angular templates.

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

condition = true;
}

<h1>ngContainer Example</h1>
<div *ngIf="condition">
<ng-container>
<p>Content to be conditionally rendered</p>
<p>More content...</p>
</ng-container>
</div>

Stackblitz Example

ngTemplate - The ngTemplate directive is used to define a reusable template block that
can be used later within the same component or shared across components using the
ngTemplateOutlet directive.

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

selectedTemplate: any;
}

<h1>ngTemplate Example</h1>
<ng-template #myTemplate>
<p>This is a template</p>
<p>It can be reused in multiple places</p>
</ng-template>

<button (click)="selectedTemplate = myTemplate">Load Template</button>

Stackblitz Example

ngContent - The ngContent directive is used for content projection or transclusion. It

allows you to create reusable components with customizable content.

Example :
import { Component } from '@angular/core';

@Component({
selector: 'app-child',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class ChildComponent {}

import { Component } from '@angular/core';

@Component({
selector: 'app-parent',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class ParentComponent {}

<app-child>
<p>Content projected into the child component</p>
</app-child>

Stackblitz Example

ngTemplateOutlet - The ngTemplateOutlet directive is used to render a template

defined using ngTemplate. It allows you to dynamically render a template within a
component’s template.

Example :

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

selectedTemplate: any;
}

<h1>ngTemplateOutlet Example</h1>
<ng-container *ngTemplateOutlet="selectedTemplate"></ng-container>
<ng-template #template1>
Template 1 content
</ng-template>

<ng-template #template2>
Template 2 content
</ng-template>

<button (click)="selectedTemplate = template1">Load Template 1</button>

<button (click)="selectedTemplate = template2">Load Template 2</button>

Stackblitz Example

New Control Flow

Conditionally display content with @if, @else-if and @else

@if (a > b) {
<p>{{a}} is greater than {{b}}</p>
}

@if (a > b) {
{{a}} is greater than {{b}}
} @else if (b > a) {
{{a}} is less than {{b}}
} @else {
{{a}} is equal to {{b}}
}

Repeat content with the @for block

@for (item of items; track [Link]) {

{{ [Link] }}
}

Providing a fallback for @for blocks with the @empty block

@for (item of items; track [Link]) {

<li> {{ [Link] }}</li>
} @empty {
<li aria-hidden="true"> There are no items. </li>
}

Conditionally display content with the @switch block

@switch (userPermissions) {
@case ('admin') {
<app-admin-dashboard />
}
@case ('reviewer') {
<app-reviewer-dashboard />
}
@case ('editor') {
<app-editor-dashboard />
}
@default {
<app-viewer-dashboard />
}
}

Syntax:

Expression | pipeOperator[:pipeArguments]

# Expression: is the expression, which you want to transform

# | : is the Pipe Character
# pipeOperator : name of the Pipe
# pipeArguments: arguments to the Pipe

Built-in Pipes
There are several built-in pipes in Angular, including:

Date Pipe
Uppercase Pipe
Lowercase Pipe
Currency Pipe
Percent Pipe
Slice Pipe
Decimal/number Pipe
JSON Pipe
Async Pipe

Date Pipe
The date pipe is used to format a date value according to the locale rules specified in the
application.

import { DatePipe } from '@angular/common';

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
date = new Date();

constructor(private datePipe: DatePipe) {}

formatDate() {
return [Link]([Link], 'shortDate');
}
}

<h1>Date Pipe Example</h1>

<p>{{ date | date: 'shortDate' }}</p>

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './[Link]';

import { DatePipe } from '@angular/common';

@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [DatePipe],
})
export class AppModule {}

Stackblitz Example

Uppercase Pipe

The uppercase pipe is used to transform a string to uppercase.

<h1>Upper Case Pipe Example</h1>

<p>{{ name | uppercase }}</p>

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
name = 'Manthan Ank';
}

Stackblitz Example
Lowercase Pipe

The lowercase pipe is used to transform a string to lowercase.

<p>{{ name | lowercase }}</p>

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
name = 'Manthan Ank';
}

Stackblitz Example

Currency Pipe
The currency pipe is used to format a number as currency using the locale rules specified
in the application.

<h1>Currency Pipe Example</h1>

<p>{{ price | currency }}</p>

import { CurrencyPipe } from '@angular/common';

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
price = 100;

constructor(private currencyPipe: CurrencyPipe) { }

formatCurrency() {
return [Link]([Link], 'USD', true);
}
}

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

Stackblitz Example

Percent Pipe

The percent pipe is used to format a number as a percentage.

<h1>Percent Pipe Example</h1>

<p>{{ percentage | percent }}</p>

import { PercentPipe } from '@angular/common';

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
percentage = 0.5;

constructor(private percentPipe: PercentPipe) {}

formatPercentage() {
return [Link]([Link], '2');
}
}

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './[Link]';

import { HelloComponent } from './[Link]';
import { PercentPipe } from '@angular/common';

@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PercentPipe],
})
export class AppModule {}

Stackblitz Example
Slice Pipe

The slice pipe is used to create a new array or string containing a subset of the elements
of the input array or string.

<p>{{ ['apple', 'banana', 'orange', 'mango'] | sli[Link] }}</p>

Stackblitz Example

Decimal/number Pipe

The number pipe is used to format a number as text. It can be used to format a number as
a percentage, currency, or decimal number.

<p>{{ 123456.78 | number:'3.2-3' }}</p>

Stackblitz Example

JSON Pipe

The json pipe is used to transform a JavaScript object into a JSON string.

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

data = { name: 'Manthan Ank', age: 25 };
}

Stackblitz Example

Async Pipe
The async pipe is used to subscribe to an Observable or Promise and return the latest
value it has emitted.

<p>{{data$ | async}}</p>

// [Link]
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable()
export class DataService {
private data$: Observable<string>;
constructor() {
// Simulating an asynchronous data source
[Link]$ = of('Hello, async pipe!').pipe(
// Simulating delay
delay(2000)
);
}

getData(): Observable<string> {
return [Link]$;
}
}

// [Link]
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { DataService } from './[Link]';

@Component({
selector: 'app-example',
template: '<div>{{ data$ | async }}</div>',
})
export class ExampleComponent {
data$: Observable<string>;

constructor(private dataService: DataService) {

[Link]$ = [Link]();
}
}

Stackblitz Example

Impure Pipes

By default, Angular pipes are pure, meaning they are stateless and do not change unless
the input value changes. However, you can create impure pipes by setting the pure
property to false in the @Pipe decorator.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'impurePipe',
pure: false,
})

export class ImpurePipe implements PipeTransform {

transform(value: any): any {
return value;
}
}
<p>{{ data | impurePipe }}</p>

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

data = 'Hello, world!';
}

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './[Link]';

@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent, ImpurePipe],
bootstrap: [AppComponent],
})
export class AppModule {}

Stackblitz Example

Back to top⤴️
Decorators
Decorators are design patterns used to isolate the modification or decoration of a class
without modifying the source code.

There are several built-in decorators in Angular, including:

@Component
@Directive
@Injectable
@Pipe
@NgModule
@Input
@Output
@HostListener
@ContentChild
@ContentChildren
@ViewChild
@ViewChildren
Component

The @Component decorator is used to define a new component in Angular.

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

title = 'My App';
}

<h1>{{ title }}</h1>

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './[Link]';

@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})

export class AppModule {}

Directive
The @Directive decorator is used to define a new directive in Angular.

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
selector: '[appCustomDirective]',
})

export class CustomDirective {

constructor(private el: ElementRef) {}

@HostListener('mouseenter') onMouseEnter() {
[Link]('yellow');
}

@HostListener('mouseleave') onMouseLeave() {
[Link](null);
}
private highlight(color: string) {
[Link] = color;
}
}

<div appCustomDirective>
This element will have a yellow background when the mouse is over it.
</div>

import { NgModule } from '@angular/core';

import { CustomDirective } from './[Link]';

@NgModule({
declarations: [CustomDirective],
})

export class AppModule {}

Injectable

The @Injectable decorator is used to define a new service in Angular.

import { Injectable } from '@angular/core';

@Injectable
export class DataService {
getData() {
return 'Hello, world!';
}
}

import { Component } from '@angular/core';

import { DataService } from './[Link]';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

data: string;

constructor(private dataService: DataService) {

[Link] = [Link]();
}
}

import { NgModule } from '@angular/core';

import { AppComponent } from './[Link]';

@NgModule({
declarations: [AppComponent],
providers: [DataService],
})

export class AppModule {}

Pipe

The @Pipe decorator is used to define a new pipe in Angular.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'customPipe',
})

export class CustomPipe implements PipeTransform {

transform(value: any, args?: any): any {
return value;
}
}

<h1>{{ data | customPipe }}</h1>

import { NgModule } from '@angular/core';

import { CustomPipe } from './[Link]';

@NgModule({
declarations: [CustomPipe],
})

export class AppModule {}

NgModule

The @NgModule decorator is used to define a new module in Angular.

import { NgModule } from '@angular/core';

@NgModule({
imports: [],
declarations: [],
providers: [],
bootstrap: [],
})

export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './[Link]';

@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})

export class AppModule {}

Input

The @Input decorator is used to pass data from a parent component to a child component.

import { Component, Input, OnInit } from '@angular/core';

@Component({
selector: 'app-child',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class ChildComponent implements OnInit {
@Input() message: string;
constructor() { }

ngOnInit() {}

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-parent',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class ParentComponent implements OnInit {
parentMessage = 'Hello from the parent component!';
constructor() {}

ngOnInit() {}
}

<p>{{ message }}</p>

<app-child [message]="parentMessage"></app-child>

<h1>@Input Example</h1>
<app-parent></app-parent>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './[Link]';

import { RouterModule } from '@angular/router';
import { ChildComponent } from './child/[Link]';
import { ParentComponent } from './parent/[Link]';

@NgModule({
imports: [BrowserModule, FormsModule, RouterModule],
declarations: [AppComponent, ChildComponent, ParentComponent],
bootstrap: [AppComponent],
})
export class AppModule {}

Output

The @Output decorator is used to pass data from a child component to a parent
component.

import { Component, EventEmitter, OnInit, Output } from '@angular/core';

@Component({
selector: 'app-child',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class ChildComponent implements OnInit {
@Output() messageEvent = new EventEmitter<string>();

constructor() {}

ngOnInit() {}

sendMessage() {
[Link]('Hello from the child component!');
}
}

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-parent',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class ParentComponent implements OnInit {
constructor() {}

ngOnInit() {}
handleMessage(message: string) {
[Link](message);
}
}

<button (click)="sendMessage()">Send message</button>

<app-child (messageEvent)="handleMessage($event)"></app-child>

<h1>@Output Decorator Example</h1>

<app-parent></app-parent>

HostListener

The @HostListener decorator is used to listen for events on the host element of a
directive or component.

<h1>@HostListener Decorator Example</h1>

<p>Click the host element to trigger the 'click' event.</p>

import { Component, HostListener } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
@HostListener('click')
onClick() {
[Link]('The host element was clicked!');
}
}

contentChild & contentChildren

The @ContentChild and @ContentChildren decorators are used to query for content
children in the component’s view.

import {
Component,
ContentChild,
ContentChildren,
ElementRef,
OnInit,
QueryList,
} from '@angular/core';

@Component({
selector: 'app-parent',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class ParentComponent implements OnInit {
@ContentChild('childButton1', { static: true }) childButton1: ElementRef;
@ContentChildren('childButton2') childButtons2: QueryList<ElementRef>;

ngAfterContentInit() {
[Link]([Link]);
[Link]((button) => {
[Link]([Link]);
});
}

constructor() {}

ngOnInit() {}
}

<ng-content></ng-content>

<h1>@ContentChild Decorator Example</h1>

<app-parent></app-parent>

viewChild & viewChildren

The @ViewChild and @ViewChildren decorators are used to query for view children in the
component’s view.
import { Component, ElementRef, QueryList, ViewChild, ViewChildren } from
'@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: [ './[Link]' ]
})
export class AppComponent {
@ViewChild('childButton1', { static: true }) childButton1: ElementRef;
@ViewChildren('childButton2') childButtons2: QueryList<ElementRef>;

ngAfterViewInit() {
[Link]([Link]);
[Link](button => {
[Link]([Link]);
});
}
}

<h1>@viewChild & @viewChildren Example</h1>

<button #childButton1>Button 1</button>
<button #childButton2>Button 2</button>
Back to top⤴️
Life Cycle Hooks
Angular provides a set of lifecycle hooks that give you visibility into key moments in the
component’s lifecycle.

There are several lifecycle hooks in Angular, including:

ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy

OnChanges
It is called when the data-bound properties of a directive/component are changed. It is
called before ngOnInit and whenever one or more data-bound input properties change.

<form>
<input [(ngModel)]="message" name="message" />
<button type="submit" (click)="onSubmit()">Submit</button>
</form>
<p>{{ message }}</p>

import {
Component,
Input,
OnChanges,
OnInit,
SimpleChanges,
} from '@angular/core';

@Component({
selector: 'app-test',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class TestComponent implements OnChanges {
@Input() message: string;
prevMessage: string;

ngOnChanges(changes: SimpleChanges) {
if ([Link]) {
[Link](
`message changed from ${[Link]} to
${[Link]}`
);
}
}

onSubmit() {
[Link] = [Link];
}
}

<app-test [message]="'Hello World'"></app-test>

Stackblitz Link

OnInit

It is called after Angular has initialized all data-bound properties of a

directive/component. It is called only once after the first ngOnChanges.

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
constructor() {}

ngOnInit() {
[Link]('logged from ngOnInit');
}
}

Stackblits Link

DoCheck

It is called during every change detection run, and it is used to detect and act upon
changes that Angular doesn’t catch on its own.

import { Component, DoCheck } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent implements DoCheck {
ngDoCheck() {
[Link]('ngDoCheck Called');
}
}

Stackblitz Link

AfterViewInit

It is called after Angular has fully initialized a component’s view. It is the perfect place to
put any initialization logic that depends on the view.

import { AfterViewInit, Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent implements AfterViewInit{

ngAfterViewInit(){
[Link]("after view init")
}
clickMe(){
[Link]("link clicked")
}
}

<a (click)="clickMe()">Click me</a>

Stackblitz Link

AfterViewChecked

It is called after Angular has checked the component’s view and child views. It is called
after ngAfterViewInit and every subsequent ngAfterContentChecked.

import { AfterViewChecked, Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent implements AfterViewChecked {
ngAfterViewChecked(){
[Link]("after view checked")
}
clickMe(){
[Link]("link clicked")
}
}
<a (click)="clickMe()">Click me</a>

Stackblitz Link

AfterContentInit

It is called after Angular has fully initialized the content of a directive. It is the perfect
place to put any initialization logic that depends on the content.

import { AfterContentInit, Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent implements AfterContentInit {
ngAfterContentInit() {
[Link]('after content init');
}
clickMe() {
[Link]('clicked');
}
}

<a (click)="clickMe()">Click me</a>

Stackblitz Link

AfterContentChecked

It is called after the default change detector has completed checking all content of a
directive. It is called after ngAfterContentInit and every subsequent
ngAfterContentChecked.

import { AfterContentInit, Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent implements AfterContentInit {
ngAfterContentChecked() {
[Link]('after content init');
}
clickMe() {
[Link]('clicked');
}
}

<a (click)="clickMe()">Click me</a>

Stackblitz Link

OnDestroy

It is called just before Angular destroys the directive/component. It is used to cleanup any
resources or subscriptions that the directive/component has created.

import { Component, OnDestroy, OnInit } from '@angular/core';

import { Subscription } from 'rxjs';
import { of } from 'rxjs';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent implements OnInit, OnDestroy {
private subscription: Subscription;

ngOnInit() {
const someObservable = of(1, 2, 3);
[Link] = [Link]((data) => {
[Link](data);
});
}

ngOnDestroy() {
[Link]();
}
}

Stackblitz Link

Template-driven forms
Reactive forms

Template-driven Forms

Template-driven forms are created using directives in the template. Angular automatically
tracks the value and validity of the form controls.

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">

<input type="text" name="name" ngModel required />
<button type="submit">Submit</button>
</form>

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent {
onSubmit(form: NgForm) {
[Link]([Link]);
}
}

Reactive Forms

Reactive forms are created programmatically using form controls and form groups. They
provide more control and flexibility compared to template-driven forms.

import { Component } from '@angular/core';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

form: FormGroup;

constructor(private fb: FormBuilder) {

[Link] = [Link]({
name: ['', [Link]],
email: ['', [Link]],
});
}

onSubmit() {
[Link]([Link]);
}
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">

<input type="text" formControlName="name" />
<input type="email" formControlName="email" />
<button type="submit">Submit</button>
</form>

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">

<input type="text" name="name" ngModel required />
<button type="submit">Submit</button>
</form>

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

onSubmit(form: NgForm) {
[Link]({ name: 'John' });
}
}

import { Component } from '@angular/core';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

form: FormGroup;

constructor(private fb: FormBuilder) {

[Link] = [Link]({
name: ['', [Link]],
email: ['', [Link]],
});
}

onSubmit() {
[Link]([Link]);
}
}

SetValue & PatchValue in Angular

import { Component } from '@angular/core';

import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

form: FormGroup;

constructor(private fb: FormBuilder) {

[Link] = [Link]({
name: '',
email: '',
});

[Link]({
name: 'John',
email: '[Link]@[Link]',
});

[Link]({
name: 'Jane',
});
}

onSubmit() {
[Link]([Link]);
}
}

StatusChanges in Angular Forms

import { Component } from '@angular/core';

import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

form: FormGroup;

constructor(private fb: FormBuilder) {

[Link] = [Link]({
name: '',
email: '',
});

[Link]((status) => {
[Link](status);
});
}

onSubmit() {
[Link]([Link]);
}
}

ValueChanges in Angular Forms

import { Component } from '@angular/core';

import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

form: FormGroup;

constructor(private fb: FormBuilder) {

[Link] = [Link]({
name: '',
email: '',
});

[Link]((value) => {
[Link](value);
});
}

onSubmit() {
[Link]([Link]);
}
}

FormControl

import { Component } from '@angular/core';

import { FormControl } from '@angular/forms';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

name = new FormControl('');
onSubmit() {
[Link]([Link]);
}
}

FormGroup

import { Component } from '@angular/core';

import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

form: FormGroup;

constructor(private fb: FormBuilder) {

[Link] = [Link]({
name: '',
email: '',
});
}

onSubmit() {
[Link]([Link]);
}
}

FormArray Example

import { Component } from '@angular/core';

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

form: FormGroup;

constructor(private fb: FormBuilder) {

[Link] = [Link]({
name: '',
emails: [Link]([]),
});
}
get emails() {
return [Link]('emails') as FormArray;
}

addEmail() {
[Link]([Link](''));
}

removeEmail(index: number) {
[Link](index);
}

onSubmit() {
[Link]([Link]);
}
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">

<input type="text" formControlName="name" />
<div formArrayName="emails">
<div *ngFor="let email of [Link]; let i = index">
<input type="email" [formControlName]="i" />
<button type="button" (click)="removeEmail(i)">Remove</button>
</div>
</div>
<button type="button" (click)="addEmail()">Add Email</button>
<button type="submit">Submit</button>
</form>

Build Dynamic or Nested Forms using FormArray

import { Component } from '@angular/core';

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

form: FormGroup;

constructor(private fb: FormBuilder) {

[Link] = [Link]({
name: '',
addresses: [Link]([]),
});
}

get addresses() {
return [Link]('addresses') as FormArray;
}

addAddress() {
[Link](
[Link]({
street: '',
city: '',
state: '',
zip: '',
})
);
}

removeAddress(index: number) {
[Link](index);
}

onSubmit() {
[Link]([Link]);
}
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">

<input type="text" formControlName="name" />
<div formArrayName="addresses">
<div *ngFor="let address of [Link]; let i = index">
<div [formGroupName]="i">
<input type="text" formControlName="street" />
<input type="text" formControlName="city" />
<input type="text" formControlName="state" />
<input type="text" formControlName="zip" />
<button type="button" (click)="removeAddress(i)">Remove</button>
</div>
</div>
</div>
<button type="button" (click)="addAddress()">Add Address</button>
<button type="submit">Submit</button>
</form>

SetValue & PatchValue in FormArray

import { Component } from '@angular/core';

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

form: FormGroup;

constructor(private fb: FormBuilder) {

[Link] = [Link]({
name: '',
addresses: [Link]([]),
});

[Link]({
name: 'John',
addresses: [
{ street: '123 Main St', city: 'Anytown', state: 'CA', zip: '12345'
},
{ street: '456 Elm St', city: 'Othertown', state: 'NY', zip: '67890'
},
],
});

[Link]({
name: 'Jane',
});
}

get addresses() {
return [Link]('addresses') as FormArray;
}

addAddress() {
[Link](
[Link]({
street: '',
city: '',
state: '',
zip: '',
})
);
}

removeAddress(index: number) {
[Link](index);
}

onSubmit() {
[Link]([Link]);
}
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">

Select Options Dropdown

import { Component } from '@angular/core';

import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

form: FormGroup;

constructor(private fb: FormBuilder) {

[Link] = [Link]({
name: '',
gender: '',
});
}

onSubmit() {
[Link]([Link]);
}
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">

<input type="text" formControlName="name" />
<select formControlName="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<button type="submit">Submit</button>
</form>

Typed Forms in Angular

import { Component } from '@angular/core';

import { FormBuilder, FormGroup } from '@angular/forms';
interface User {
name: string;
email: string;
}

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

form: FormGroup;

constructor(private fb: FormBuilder) {

[Link] = [Link]<User>({
name: '',
email: '',
});
}

onSubmit() {
[Link]([Link]);
}
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">

<input type="text" formControlName="name" />
<input type="email" formControlName="email" />
<button type="submit">Submit</button>
</form>

FormArray in Angular

import { Component } from '@angular/core';

import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

form: FormGroup;

constructor(private fb: FormBuilder) {

[Link] = [Link]({
name: '',
email: '',
});
}
onSubmit() {
[Link]([Link]);
}
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">

<input type="text" formControlName="name" />
<input type="email" formControlName="email" />
<button type="submit">Submit</button>
</form>

Services
Services are used to encapsulate reusable functionality that can be shared across
components. They are used to fetch data from a server, perform calculations, or interact
with external services.

import { Injectable } from '@angular/core';

@Injectable
export class DataService {
getData() {
return 'Data from the service';
}
}

import { Component } from '@angular/core';

import { DataService } from './[Link]';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

data: string;

constructor(private dataService: DataService) {

[Link] = [Link]();
}
}

The @Injectable decorator is used to define a service class that can be injected into other
components or services.
import { Injectable } from '@angular/core';

@Injectable
export class DataService {
getData() {
return 'Data from the service';
}
}

Dependency injection is a design pattern used to create objects and manage their
dependencies. It allows you to inject dependencies into a class rather than creating them
within the class.

import { Injectable } from '@angular/core';

@Injectable
export class DataService {
getData() {
return 'Data from the service';
}
}

import { Component } from '@angular/core';

import { DataService } from './[Link]';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

data: string;

constructor(private dataService: DataService) {

[Link] = [Link]();
}
}

Using @inject decorator is an alternative way to inject dependencies into a class.

import { Component } from '@angular/core';

import { DataService } from './[Link]';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})

export class AppComponent {

data: string;
private dataService = inject(DataService);

constructor() {
[Link] = [Link]();
}
}

Providers are used to define dependencies that are injected into components, directives,
pipes, and services. They are defined in the @NgModule decorator of the root module or
feature modules.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './[Link]';

import { DataService } from './[Link]';

@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [DataService],
})

export class AppModule {}

Back to top ⤴️
Routing
Routing is used to navigate between different components in an Angular application. It
allows users to move between different parts of the application by changing the URL in
the browser.

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

@NgModule({
imports: [[Link](routes)],
exports: [RouterModule],
})

export class AppRoutingModule {}

import { Routes } from '@angular/router';

export const routes: Routes = [];

import { ApplicationConfig, provideZoneChangeDetection } from

'@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './[Link]';

export const appConfig: ApplicationConfig = {

providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
],
};

The router-outlet directive is used to render the component associated with the current
route.

<router-outlet></router-outlet>

The routerLink directive is used to navigate to a different route when the element is
clicked.

The routerLinkActive directive is used to add a CSS class to an element when the
associated route is active.

<a routerLink="/home" routerLinkActive="active">Home</a>

The routerLinkActiveOptions directive is used to configure the behavior of the

routerLinkActive directive.

<a routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{

exact: true }">Home</a>

The RouterState class is used to access the current state of the router.

import { Router } from '@angular/router';

constructor(private router: Router) {

const state = [Link];
[Link](state);
}

Back to top⤴️
Router Events
The RouterEvents class is used to listen for router events such as navigation start,
navigation end, and navigation error.
import { Router, NavigationStart, NavigationEnd, NavigationError } from
'@angular/router';

constructor(private router: Router) {

[Link]((event) => {
if (event instanceof NavigationStart) {
[Link]('Navigation started');
}
if (event instanceof NavigationEnd) {
[Link]('Navigation ended');
}
if (event instanceof NavigationError) {
[Link]('Navigation error');
}
});
}

Router guards are used to control navigation and access to routes in an Angular
application. They can be used to prevent unauthorized access to certain routes, redirect
users to a login page, or perform other actions before navigating to a route.

import { Injectable } from '@angular/core';

import { CanActivate, Router } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}

canActivate() {
if ([Link]('token')) {
return true;
} else {
[Link](['/login']);
return false;
}
}
}

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './[Link]';

const routes: Routes = [];

@NgModule({
imports: [[Link](routes)],
exports: [RouterModule],
providers: [AuthGuard],
})

export class AppRoutingModule {}

Back to top⤴️
HTTP Client Module
The HttpClientModule is used to make HTTP requests to a server in an Angular
application. It provides services for making GET, POST, PUT, DELETE, and other types
of requests.

import { HttpClientModule } from '@angular/common/http';

@NgModule({
imports: [HttpClientModule],
})
export class AppModule {}

In the angular v17 and above, the HttpClientModule has been deprecated. Instead, you
can use the provideHttpClient function to provide the HttpClient service in your
application. Here is an example of how to use the provideHttpClient function to provide
the HttpClient service in your application:
import { ApplicationConfig, provideZoneChangeDetection } from
'@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './[Link]';

import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {

providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideHttpClient(),
],
};

HTTP Client
The HttpClient service is used to make HTTP requests to a server. It provides methods
for making GET, POST, PUT, DELETE, and other types of requests.

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getData() {
return [Link]('[Link]
}

Back to top⤴️
Destroy Ref
The DestroyRef provider is a utility that allows Angular components to register cleanup
callbacks that are executed when the component is destroyed. This is useful for cleaning
up resources, such as subscriptions, timers, or other resources that need to be released
when the component is no longer in use.

import { Component, OnInit, OnDestroy } from '@angular/core';

import { DestroyRef } from '@angular/core/testing';

@Component({
selector: 'my-component',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class MyComponent implements OnInit, OnDestroy {

constructor(private destroyRef: DestroyRef) {}

ngOnInit() {
}

ngOnDestroy() {
// Register a destroy callback with the DestroyRef provider.
[Link](() => {
// Do any cleanup tasks here.
});
}

HTTP
Import HttpClient Module in Root Module -

import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
declarations: [
AppComponent
],
imports: [
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Import Required Module in Component/Service -

import { HttpClient } from '@angular/common/http';

Inject HttpClient service -

constructor(public http: HttpClient) {

}

HTTP GET
getData(){
return [Link]('url');
}
HTTP POST
sendData(data: any){
return [Link]('url', data);
}

HTTP PUT
updateData(data: any){
return [Link]('url', data);
}

HTTP PATCH
updateData(data: any){
return [Link]('url', data);
}

HTTP DELETE
deleteData(id: string){
return [Link](`url/${id}`);
}

HTTP Interceptor
Http Interceptors are a powerful feature provided by the @angular/common/http module.
They allow you to intercept and modify HTTP requests and responses in your Angular
application. With interceptors, you can perform various tasks such as authentication,
logging, error handling, and more. Interceptors provide a way to add global behavior to
your HTTP requests and responses, making it easier to implement common
functionalities across your application.

import { Injectable } from '@angular/core';

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from
'@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
[Link]('Request started');
return [Link](req).pipe(
catchError((error) => {
[Link]('Request failed', error);
return throwError(error);
})
);
}
}

In angular v17, the HttpInterceptor interface has been deprecated in favor of the
HttpInterceptorFn type. The HttpInterceptorFn type is a function that takes a
HttpRequest and a HttpHandler and returns an Observable<HttpEvent>. Here is an
example of how to create an interceptor using the HttpInterceptorFn type:

import { HttpInterceptorFn } from '@angular/common/http';

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

export const ErrorInterceptor: HttpInterceptorFn = (req, next) => {

[Link]('Request started');
return [Link](req).pipe(
catchError((error) => {
[Link]('Request failed', error);
return throwError(error);
})
);
};

There are two ways to implement interceptors in Angular:

1. Functional Interceptors (Modern Approach) For Angular v17+, use the

HttpInterceptorFn type:

import { HttpInterceptorFn } from '@angular/common/http';

export const loggingInterceptor: HttpInterceptorFn = (req, next) => {

[Link]('Request URL:', [Link]);
return [Link](req);
};

Configure in your app config:

export const appConfig: ApplicationConfig = {

providers: [
provideHttpClient(
withInterceptors([loggingInterceptor])
)
]
};

2. DI-based Interceptors (Traditional Approach) Create an injectable class

implementing HttpInterceptor:

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, handler: HttpHandler):
Observable<HttpEvent<any>> {
[Link]('Request URL:', [Link]);
return [Link](req);
}
}

Configure in your app module:

bootstrapApplication(AppComponent, {
providers: [
provideHttpClient(
withInterceptorsFromDi(), // Enable DI-based interceptors
),
{
provide: HTTP_INTERCEPTORS,
useClass: LoggingInterceptor,
multi: true
}
]
});

Note: DI-based interceptors run in provider registration order, which can be

unpredictable in complex applications with hierarchical DI configurations.

Using Observable
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({
providedIn: 'root'
})

export class MyService {

constructor(private http: HttpClient) {}

getData(): Observable<any> {
return [Link]<any>('utl');
}

sendData(data: any): Observable<any> {

return [Link]<any>('utl', data);
}

updateData(data: any): Observable<any> {

return [Link]<any>('utl', data);
}

updateData(data: any): Observable<any> {

return [Link]<any>('utl', data);
}

deleteData(id: string): Observable<any> {

return [Link]<any>(`utl/${id}`);
}
}

Options—Headers/Params

import { HttpHeaders, HttpParams } from '@angular/common/http';

const headers = new HttpHeaders({

'Content-Type': 'application
'Authorization': 'Bearer my-token'
});

const params = new HttpParams()

.set('param1', 'value1')
.set('param2', 'value2');

[Link]('url', { headers, params });

[Link]('url', data, { headers, params });

[Link](`url/${id}`, { headers, params });

Options—Observe/Response Type

import { HttpResponse } from '@angular/common/http';

[Link]('url', { observe: 'response' });

Module
A module is a container for a group of related components, directives, pipes, and services.
It is used to organize an Angular application into cohesive blocks of functionality.

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './[Link]';

@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})

export class AppModule {}

Lazy loading is a technique used to load modules only when they are needed. This can
help reduce the initial load time of the application by loading only the necessary modules.

Example of lazy loading in non standalone components:

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './[Link]';

import { AppRoutingModule } from './[Link]';

@NgModule({
imports: [BrowserModule, FormsModule, AppRoutingModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

{
path: 'page-1',
loadChildren: () =>
import('./page-1/[Link]').then((m) => m.Page1Module),
},
{
path: 'page-2',
loadChildren: () =>
import('./page-2/[Link]').then((m) => m.Page2Module),
},
];

@NgModule({
imports: [[Link](routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';
import { Page1Component } from './[Link]';

const routes: Routes = [

{
path: '',
component: Page1Component,
},
];

@NgModule({
imports: [[Link](routes)],
exports: [RouterModule],
})
export class Page1RoutingModule {}

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';
import { Page1Component } from './[Link]';
import { Page1RoutingModule } from './[Link]';

@NgModule({
imports: [CommonModule, Page1RoutingModule],
declarations: [Page1Component],
})
export class Page1Module {}

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';
import { Page2Component } from './[Link]';

const routes: Routes = [

{
path: '',
component: Page2Component,
},
];

@NgModule({
imports: [[Link](routes)],
exports: [RouterModule],
})
export class Page2RoutingModule {}

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';
import { Page2Component } from './[Link]';
import { Page2RoutingModule } from './[Link]';

@NgModule({
imports: [CommonModule, Page2RoutingModule],
declarations: [Page2Component],
})
export class Page2Module {}

<h1>Lazy Loading Example</h1>

<a routerLink="page-1">Page-1</a>  
<a routerLink="page-2">Page-2</a>
<router-outlet></router-outlet>
Example of lazy loading in standalone components:

import { Routes } from '@angular/router';

export const routes: Routes = [

{
path: 'page-1',
loadComponent: () => import('./page-1/[Link]').then((m) =>
m.Page1Component),
},
{
path: 'page-2',
loadComponent: () => import('./page-2/[Link]').then((m) =>
m.Page2Component),
}
];

import { ApplicationConfig, provideZoneChangeDetection } from

'@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './[Link]';

export const appConfig: ApplicationConfig = {

providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes)
],
};

import { Component } from '@angular/core';

import { RouterOutlet } from '@angular/router';

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './[Link]',
styleUrl: './[Link]'
})
export class AppComponent {
// component logic here
}

<h1>Lazy Loading Example</h1>

⤴️
Back to top
Router

The Angular Router is a powerful tool that allows you to define navigation paths and
routes in your application. It enables you to navigate between different components and
views based on the URL path.

Example of routing in Angular non standalone components:

// [Link]
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [

// Define your routes here
];

@NgModule({
imports: [[Link](routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Required Route Params

To define a route with a required parameter, you can use a colon (:) followed by the
parameter name. For example, in [Link]:

// [Link]
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserDetailsComponent } from './user-details/[Link]';

const routes: Routes = [

{ path: 'user/:id', component: UserDetailsComponent },
// Other routes...
];

@NgModule({
imports: [[Link](routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Navigating in the App

To navigate to a route with a required parameter, you can use the Router service. For
example, in a component:

// [Link]
import { Router } from '@angular/router';
export class SomeComponent {

constructor(private router: Router) {}

navigateToUserDetails(userId: number): void {

[Link](['/user', userId]);
}
}

Optional Route Params

To define a route with an optional parameter, you can use a question mark (?) after the
parameter name. For example, in [Link]:

// [Link]
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserDetailsComponent } from './user-details/[Link]';

const routes: Routes = [

{ path: 'user/:id?', component: UserDetailsComponent },
// Other routes...
];

@NgModule({
imports: [[Link](routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Params

To access route parameters in a component, you can use the ActivatedRoute service. For
example, in a component:

// [Link]
import { ActivatedRoute } from '@angular/router';

export class UserDetailsComponent {

constructor(private route: ActivatedRoute) {

// Accessing route parameters
[Link](params => {
const userId = params['id'];
// Do something with the userId...
});
}
}
Route Parameters
Route parameters are used to pass data to a route in Angular. They allow you to create
dynamic routes that can be customized based on user input or other factors. Route
parameters are defined in the route configuration and can be accessed in the component
associated with the route.

There are three types of route parameters in Angular:

Path Parameters:

Path parameters are used to extract data from the URL path. They are denoted by placing
a colon (“:”) before the parameter name in the route configuration. Path parameters are
part of the route path and can be accessed in the component associated with the route. For
example:

{ path: 'users/:id', component: UserComponent }

In this example, the “:id” parameter is a path parameter. The UserComponent can retrieve
the value of the “:id” parameter from the URL and use it to fetch user data.

Query Parameters:

Query parameters are used to pass data as key-value pairs in the URL query string. They
are denoted by placing a question mark (“?”) after the route path, followed by the
parameter name and value. Query parameters are not part of the route path but can be
accessed in the component associated with the route. For example:

{ path: 'search', component: SearchComponent }

In this example, the SearchComponent can access query parameters like “/search?
query=angular” or “/search?query=react” and use them to perform a search operation.

Optional Parameters:

Optional parameters are used to define route parameters that are not required. They are
denoted by placing a question mark (“?”) after the parameter name in the route
configuration. Optional parameters can be present or absent in the URL, and the
component associated with the route can handle both cases. For example:

{ path: 'products/:id/:category?', component: ProductComponent }

In this example, the “:category” parameter is optional. The ProductComponent can

handle URLs like “/products/123” or “/products/123/electronics” based on the presence
of the “:category” parameter.

Route Guards
Route guards are used to control access to routes in an Angular application. They allow
you to implement logic that determines whether a user is allowed to navigate to a
particular route or not. Route guards can be used to protect routes based on user
authentication, authorization, or other criteria.
There are four types of route guards in Angular:

CanActivate:

The CanActivate guard is used to determine whether a route can be activated or not. It is
typically used to check if a user is authenticated before allowing access to a route. The
guard returns a boolean value or an Observable or Promise that resolves to a boolean
value. If the guard returns true, the route is activated; if it returns false, the route is
blocked.

import { Injectable } from '@angular/core';

import {
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
} from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class AuthGuard implements CanActivate {
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
// Check if the user is authenticated
return true; // Allow access
}
}

canActivateFn:

The CanActivateFn guard is a function used to decide if a route can be accessed. It works
like the CanActivate guard but is a function instead of a class. It takes two arguments:
ActivatedRouteSnapshot and RouterStateSnapshot. The guard returns a boolean value or
an Observable or Promise that resolves to a boolean value. If the guard returns true, the
route is activated; if it returns false, the route is blocked.

import {
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
} from '@angular/router';
import { Observable } from 'rxjs';

export const authGuard: CanActivateFn = (

route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) => {
// Check if the user is authenticated
return true; // Allow access
};

CanActivateChild:
The CanActivateChild guard is similar to CanActivate but is used to protect child routes
of a parent route. It is applied to the parent route configuration and is triggered when any
child route is activated. The guard returns a boolean value or an Observable or Promise
that resolves to a boolean value.

import { Injectable } from '@angular/core';

import {
CanActivateChild,
ActivatedRouteSnapshot,
RouterStateSnapshot,
} from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class AuthGuard implements CanActivateChild {
canActivateChild(
childRoute: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
// Check if the user is authenticated
return true; // Allow access
}
}

CanDeactivate:

The CanDeactivate guard is used to determine whether a route can be deactivated or not.
It is typically used to prompt the user for confirmation before leaving a route with
unsaved changes. The guard returns a boolean value or an Observable or Promise that
resolves to a boolean value. If the guard returns true, the route is deactivated; if it returns
false, the route is not deactivated.

import { Injectable } from '@angular/core';

import {
CanDeactivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
} from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class ConfirmDeactivateGuard implements CanDeactivate<any> {
canDeactivate(
component: any,
currentRoute: ActivatedRouteSnapshot,
currentState: RouterStateSnapshot,
nextState?: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
// Check if the user wants to leave the route
return confirm('Are you sure you want to leave?');
}
}
CanLoad:

The CanLoad guard is used to determine whether a lazy-loaded module can be loaded or
not. It is applied to the route configuration of a lazy-loaded module and is triggered when
the module is about to be loaded. The guard returns a boolean value or an Observable or
Promise that resolves to a boolean value. If the guard returns true, the module is loaded;
if it returns false, the module is not loaded.

import { Injectable } from '@angular/core';

import { CanLoad, Route } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class AuthGuard implements CanLoad {
canLoad(route: Route): Observable<boolean> | Promise<boolean> | boolean {
// Check if the user is authenticated
return true; // Allow loading
}
}

Back to top⤴️
Observables in Angular
An observable is a class that can be used to handle asynchronous data streams.
Observables are used to handle data that can arrive over time, such as data received from
a server, user input, or timed events.

Creating Observables
There are several ways to create observables in Angular:

Using the Observable Constructor: You can create an observable using the Observable
constructor and the new keyword. The constructor takes a function as an argument, which
is called when the observable is subscribed to.

import { Observable } from 'rxjs';

const observable = new Observable((observer) => {

[Link]('Hello');
[Link]('World');
[Link]();
});

Using the of Operator: You can create an observable from a list of values using the of
operator. The of operator emits each value in the list in sequence.

import { of } from 'rxjs';

const observable = of('Hello', 'World');

Using the from Operator: You can create an observable from an array, promise, or
iterable using the from operator. The from operator emits each item in the array, promise,
or iterable in sequence.

import { from } from 'rxjs';

const observable = from(['Hello', 'World']);

Subscribing to Observables

To receive data from an observable, you need to subscribe to it. The subscribe method is
used to subscribe to an observable and receive data emitted by the observable.

[Link]({
next: (value) => [Link](value),
error: (error) => [Link](error),
complete: () => [Link]('Complete')
});

Difference between observables and promises in Angular

Observables:

Observables are lazy, meaning they only execute when subscribed to.
Observables can emit multiple values over time.
Observables can be canceled using the unsubscribe method.
Observables can be transformed and combined using operators.
Observables are used for handling streams of data, such as user input, server
responses, and events.

Promises:

Promises are eager, meaning they execute immediately when created.

Promises can only emit a single value.
Promises cannot be canceled once created.
Promises do not have built-in transformation or combination methods.
Promises are used for handling asynchronous operations that produce a single
result, such as HTTP requests and file reads.

Back to top⤴️
Unsubscribe in Angular
In Angular, managing subscriptions is crucial to avoid memory leaks and improve the
performance of your application. Here are five ways to unsubscribe in Angular:

1. Using the takeUntil operator:

Create a subject to act as a notifier.

In your component, create a private property for the subject.
Subscribe to observables using the takeUntil operator with the subject as the
parameter.
Emit a value on the subject when you want to unsubscribe, typically in the
ngOnDestroy lifecycle hook.
In the ngOnDestroy hook, call complete() on the subject to stop emitting values.

import { Component, OnDestroy } from '@angular/core';

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
selector: 'app-example',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class ExampleComponent implements OnDestroy {
private unsubscribe$ = new Subject<void>();

ngOnInit() {
// Subscribe to an observable
[Link](takeUntil([Link]$)).subscribe((data) => {
// Handle data
});
}

ngOnDestroy() {
[Link]$.next();
[Link]$.complete();
}
}

2. Using the async pipe:

In your template, use the async pipe to subscribe to observables directly.

Angular automatically handles the subscription and unsubscription for you.
Ensure you don’t manually subscribe to the observable in your component.

<div>{{ someObservable$ | async }}</div>

3. Using the Subscription object:

Declare a Subscription property in your component.

Assign the subscription to the property when subscribing.
In the ngOnDestroy hook, unsubscribe from the subscription.

import { Component, OnDestroy } from '@angular/core';

import { Subscription } from 'rxjs';

@Component({
selector: 'app-example',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class ExampleComponent implements OnDestroy {
private subscription: Subscription;
ngOnInit() {
// Assign the subscription
[Link] = [Link]((data) => {
// Handle data
});
}

ngOnDestroy() {
// Unsubscribe from the subscription
[Link]();
}
}

4. Using the unsubscribe operator:

Store the subscription in a variable.

Call the unsubscribe method on the subscription in the ngOnDestroy hook.

import { Component, OnDestroy } from '@angular/core';

@Component({
selector: 'app-example',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class ExampleComponent implements OnDestroy {
private subscription;

ngOnInit() {
// Assign the subscription
[Link] = [Link]((data) => {
// Handle data
});
}

ngOnDestroy() {
// Unsubscribe from the subscription
[Link]();
}
}

5. Using the ngOnDestroy hook and manual unsubscription:

Declare an array to store all the subscriptions.

Push the subscription to the array when subscribing.
Loop through the array in the ngOnDestroy hook and unsubscribe from each
subscription.

import { Component, OnDestroy } from '@angular/core';

import { Subscription } from 'rxjs';

@Component({
selector: 'app-example',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class ExampleComponent implements OnDestroy {
private subscriptions: Subscription[] = [];

ngOnInit() {
// Push the subscription to the array
[Link]([Link]((data) => {
// Handle data
}));
}

ngOnDestroy() {
// Unsubscribe from all subscriptions
[Link](subscription =>
[Link]());
}
}

Back to top ⤴️
Renderer2
Renderer2 is a utility class that provides methods to manipulate and interact with the
DOM (Document Object Model). It is used to perform operations such as creating,
modifying, and removing elements, applying styles, and listening to events.

import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({
selector: 'app-example',
template: `
<button (click)="changeColor()">Change Color</button>
`
})
export class ExampleComponent {
constructor(private renderer: Renderer2, private el: ElementRef) { }

changeColor() {
const button = [Link]('button');
[Link](button, 'background-color', 'red');
}
}

JIT
Just-in-Time (JIT) is a type of compilation that compiles your app in the browser at
runtime. This is the default compilation mode for Angular applications.
Advantages of JIT

Faster development cycle as changes can be seen immediately.

No build step required during development.
More flexible for dynamic template generation.

AOT
Ahead-of-Time (AOT) is a type of compilation that compiles your app at build time.
This mode is used to pre-compile your Angular application before deployment.

Advantages of AOT

Faster startup times as the browser only needs to execute the compiled code.
Improved performance due to optimized and pre-compiled templates.
Better security as the templates are already compiled and validated before
deployment.
Smaller bundle sizes since the templates are not included.

JIT vs AOT

Differences between AOT and JIT

Feature AOT JIT

Compilation time Build time Runtime
Application size Smaller Larger
Application load time Faster Slower
Debugging More difficult Easier
Development More difficult Easier
Performance Better Worse

Deferrable Views
Deferrable views can be used in component template to defer the loading of select
dependencies within that template.

@defer {
<large-component />
}
Meta tags

Title Service
import { BrowserModule, Title } from '@angular/platform-browser';

import { BrowserModule, Title } from '@angular/platform-browser';

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './[Link]';
import { AppComponent } from './[Link]';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [Title],
bootstrap: [AppComponent]
})
export class AppModule { }

export class TitleComponent implements OnInit {

constructor(private title:Title) { }
}

ngOnInit() {
[Link]("Learn Angular")
}

import { Component, OnInit } from '@angular/core';

import { Title, MetaDefinition } from '@angular/platform-browser';

@Component({
template: `<h1>App Component</h1>`
})
export class AppComponent implements OnInit {
title = 'App Component';

constructor(private title:Title){
}

ngOnInit() {
[Link]("Learn Angular")
}

}
Title Service Example
// [Link]
import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './[Link]';

import { AppComponent } from './[Link]';
import { HomeComponent } from './[Link]';

@NgModule({
declarations: [
AppComponent, HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [Title],
bootstrap: [AppComponent]
})
export class AppModule { }

// [Link]
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './[Link]';

const routes: Routes = [

{path: 'home', component:HomeComponent},
];

@NgModule({
imports: [[Link](routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

// [Link]
import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AppComponent {
title = 'Title Service Example';

constructor(private titleService:Title) {
}

ngOnInit() {
[Link]([Link]);
}
}

<h1>Title Service Example</h1>

<router-outlet></router-outlet>

// [Link]
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
template: `<h1>Home Component</h1>`
})
export class HomeComponent implements OnInit {
title = 'Home Component Title';

constructor(private titleService:Title){
}

ngOnInit() {
[Link]([Link]);
}

Dynamic Title
// [Link]
import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './[Link]';

import { AppComponent } from './[Link]';
import { HomeComponent } from './[Link]';

@NgModule({
declarations: [
AppComponent, HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [Title],
bootstrap: [AppComponent]
})
export class AppModule { }

// [Link]
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './[Link]';
import { PParentComponent } from './[Link]';
import { ChildComponent } from './[Link]';

const routes: Routes = [

{path: '', component:HomeComponent, data : {title:'Title for Home
Component'}},
{path: 'parent', component:ParentComponent, data : {title:'Title for Parent
Component'},
children: [
{ path: 'child', component:ChildComponent, data : {title:'Title for
Child Component'}}
]
},
];

@NgModule({
imports: [[Link](routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

// [Link]
import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { filter, map } from 'rxjs/operators';

@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AppComponent {

constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private titleService: Title
) { }

ngOnInit() {
[Link](
filter(event => event instanceof NavigationEnd),
)
.subscribe(() => {

var rt = [Link]([Link])

[Link](data => {
[Link](data);
[Link]([Link])})
})

getChild(activatedRoute: ActivatedRoute) {
if ([Link]) {
return [Link]([Link]);
} else {
return activatedRoute;
}

}
}

<h1>Dynamic Title Example</h1>

<ul>
<li><a routerLink="">Home</a> </li>
<li><a [routerLink]="['/parent']">Parent</a> </li>
<li><a [routerLink]="['/child']">Child</a> </li>
</ul>

<router-outlet></router-outlet>

// [Link]
import { Component, OnInit } from '@angular/core';

@Component({
template: `<h1>Home Component</h1>`
})
export class HomeComponent implements OnInit {

constructor(){
}

ngOnInit() {
}

}
// [Link]
import { Component, OnInit } from '@angular/core';

@Component({
template: `<h1>Parent Component</h1>
<router-outlet></router-outlet>
`
})
export class ParentComponent implements OnInit {

constructor(){
}

ngOnInit() {
}

// [Link]
import { Component, OnInit } from '@angular/core';

@Component({
template: `<h1>Child Component</h1>`
})
export class ChildComponent implements OnInit {

constructor(){
}

ngOnInit() {
}

Meta Service
import { BrowserModule, Meta } from '@angular/platform-browser';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [Meta],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
import { Meta, MetaDefinition } from '@angular/platform-browser';

@Component({
template: `<h1>App Component</h1>`
})
export class AppComponent implements OnInit {
title = 'App Component';

constructor(private metaService:Meta){
}

ngOnInit() {
[Link]( { name:'description',content:"Article
Description"});
}

Adding Tags with addTag() & addTags()

[Link]( { name:'description',content:"Article
Description"});

[Link](
{ name: 'description', content: 'Article Description' },
{ name: 'robots', content: 'index,follow' },
{ property: 'og:title', content: 'Content Title for social media' }
);

Reading the Tags with getTag()

[Link]("name='description'")

Update the Tag with updateTag()

[Link]( { name:'robots', content:'index,
nofoloow'},"name='robots'");

Removing the Tag with removeTag()

[Link]("name='robots'");

Back to top⤴️
Angular Signals
Angular Signals is a powerful system that provides detailed monitoring of state usage
within an application, enabling the framework to efficiently optimize rendering updates.
Writing Signals

Writable signals provide an API for updating their values directly. You create writable
signals by calling the signal function with the signal’s initial value:

import { signal } from '@angular/core';

const count = signal(0); // Creates a writable signal with an initial value

of 0

[Link](5); // Updates the signal's value to 5

[Link](count()); // Reads the current value of the signal, which is 5

Computed Signals

Computed signals are read-only signals that derive their value from other signals. You
define computed signals using the computed function and specifying a derivation:

import { signal, computed } from '@angular/core';

const count = signal(0);

const doubleCount = computed(() => count() * 2); // Creates a computed signal
that doubles the count

[Link](doubleCount()); // Reads the current value of the computed

signal, which is 0

[Link](3); // Updates the count signal to 3

[Link](doubleCount()); // The computed signal automatically updates to 6

Effects
Signals are useful because they notify interested consumers when they change. An effect
is an operation that runs whenever one or more signal values change. You can create an
effect with the effect function:

import { signal, effect } from '@angular/core';

const count = signal(0);

effect(() => {
[Link]('Count changed to:', count()); // Logs the count value whenever
it changes
});

[Link](5); // Triggers the effect, logging "Count changed to: 5"

Here is an example of using Angular Signals in an Angular component:

import { Component, OnInit } from '@angular/core';

import { signal, computed } from '@angular/core'; // Import from
'@angular/core'
@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AppComponent implements OnInit {
count = signal(0);
doubleCount = computed(() => [Link]() * 2);

constructor() {}

ngOnInit() {
// Optional logging for debugging displayedCount changes
// [Link]('Displayed count changed to:', [Link]());
}

incrementCount() {
[Link]([Link]() + 1);
}

decrementCount() {
[Link]((value) => [Link](0, value - 1));
}
}

<h1>Angular Signals Example</h1>

<button (click)="incrementCount()" style="margin-right: 10px;">Increment

Count</button>
<button (click)="decrementCount()">Decrement Count</button>

<p>Count: {{ count() }}</p>

<p>Double Count: {{ doubleCount() }}</p>

Back to top ⤴️
Security
The security of an Angular application is a critical aspect that needs to be considered
during development. Here are some best practices to enhance the security of your
Angular application:

Preventing cross-site scripting (XSS)

Cross-site scripting (XSS) is a security vulnerability that allows attackers to inject
malicious scripts into web pages viewed by other users. To prevent XSS attacks in
Angular applications, you can use the following best practices:

Use Angular’s built-in sanitization mechanisms to sanitize user input and prevent
script injection.
Avoid using unsafe methods like innerHTML and instead use Angular’s data binding
syntax to render dynamic content.
Use Angular’s built-in security features like Content Security Policy (CSP) to restrict
the sources of scripts and other resources that can be loaded by your application.
Enable strict mode in Angular templates to prevent template expressions from
executing arbitrary code.
Use Angular’s HttpClient module to make HTTP requests and automatically sanitize
responses to prevent XSS attacks.

Angular’s cross-site scripting security model

Angular provides a built-in security model to prevent cross-site scripting (XSS) attacks in
applications. This security model includes the following features:

Automatic sanitization of user input: Angular automatically sanitizes user input to

prevent script injection and other security vulnerabilities.
Strict mode in templates: Angular templates run in strict mode by default, which
prevents template expressions from executing arbitrary code.
Content Security Policy (CSP): Angular applications can use CSP to restrict the
sources of scripts and other resources that can be loaded by the application.
Trusted Types: Angular supports Trusted Types, a new web platform feature that
helps prevent DOM-based XSS attacks by enforcing strict type checking on DOM
APIs.

Sanitization and security contexts

Angular provides a built-in sanitization mechanism to prevent cross-site scripting (XSS)
attacks in applications. Sanitization is the process of cleaning user input to remove
potentially dangerous content, such as script tags and event handlers. Angular uses
security contexts to determine how to sanitize user input based on its intended use.

Angular provides the following security contexts for sanitization:

HTML: Sanitizes user input for use in HTML contexts, such as rendering dynamic
content in templates.
Style: Sanitizes user input for use in CSS contexts, such as setting inline styles.
Script: Sanitizes user input for use in script contexts, such as event handlers and
script tags.
URL: Sanitizes user input for use in URL contexts, such as setting href attributes.
Resource URL: Sanitizes user input for use in resource URL contexts, such as
loading external resources.

Sanitization example
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
selector: 'app-root',
template: `<div [innerHTML]="safeHtml"></div>`
})
export class AppComponent {
safeHtml: SafeHtml;

constructor(private sanitizer: DomSanitizer) {

const untrustedHtml = '<img src=x onerror=alert(1)>';
[Link] = [Link](untrustedHtml);
}
}

Direct use of the DOM APIs and explicit sanitization

calls
Directly using the DOM APIs to manipulate the DOM can introduce security
vulnerabilities in Angular applications. To prevent XSS attacks, avoid using unsafe
methods like innerHTML and instead use Angular’s built-in sanitization mechanisms to
render dynamic content safely.

import { Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2, private sanitizer: DomSanitizer) { }

const div = [Link]('div');

const unsafeContent = '<script>alert("XSS")</script>';
const sanitizedContent = [Link]([Link],
unsafeContent);
[Link](div, 'innerHTML', sanitizedContent);
[Link](div);

Trusting safe values

Angular provides a mechanism to trust safe values and bypass the built-in sanitization
mechanisms when rendering trusted content. To trust a safe value, you can use the
bypassSecurityTrustHtml, bypassSecurityTrustStyle, bypassSecurityTrustScript,
bypassSecurityTrustUrl, and bypassSecurityTrustResourceUrl methods provided by the
DomSanitizer service.
const safeHtml = [Link]('<b>Safe
Content</b>');

Content security policy

Content Security Policy (CSP) is a security feature that helps prevent cross-site scripting
(XSS) attacks by restricting the sources of scripts and other resources that can be loaded
by a web application. Angular applications can use CSP to define a policy that specifies
which content is allowed to be loaded by the application.
To enable CSP in an Angular application, you can add a Content-Security-Policy header
to the HTTP response from the server. The CSP header should include directives that
restrict the sources of scripts, styles, images, fonts, and other resources that can be loaded
by the application.
Content-Security-Policy: default-src 'self'; script-src 'self'
[Link] style-src 'self' [Link] img-src
'self' [Link] font-src 'self' [Link]

Enforcing Trusted Types

Trusted Types is a new web platform feature that helps prevent DOM-based cross-site
scripting (XSS) attacks by enforcing strict type checking on DOM APIs. Angular
applications can use Trusted Types to ensure that only trusted values are passed to DOM
APIs, preventing script injection and other security vulnerabilities.

To enable Trusted Types in an Angular application, you can configure the Trusted Types
policy using the TrustedTypesConfig token provided by Angular. The policy can specify
which types of values are considered trusted and enforce strict type checking on DOM
APIs.

import { InjectionToken } from '@angular/core';

export const TRUSTED_TYPES_CONFIG = new

InjectionToken('TRUSTED_TYPES_CONFIG');

const trustedTypesConfig = {
createPolicy: (name, policy) => {
return policy;
}
};

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';
import { AppComponent } from './[Link]';
import { TRUSTED_TYPES_CONFIG } from './[Link]';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [
{ provide: TRUSTED_TYPES_CONFIG, useValue: trustedTypesConfig }
],
bootstrap: [AppComponent]
})
export class AppModule { }
Use the AOT template compiler
The Angular Ahead-of-Time (AOT) template compiler compiles Angular templates at
build time, which helps prevent cross-site scripting (XSS) attacks by statically analyzing
the templates and generating optimized code. AOT compilation eliminates the need for
the browser to compile templates at runtime, reducing the risk of template injection
vulnerabilities.

To enable AOT compilation in an Angular application, you can use the ngc command to
compile the application ahead of time. AOT compilation is recommended for production
builds to improve performance, security, and compatibility with Content Security Policy
(CSP) restrictions.

ng build --aot

Server-side XSS protection

Server-side XSS protection is a security feature that helps prevent cross-site scripting
(XSS) attacks by validating and sanitizing user input on the server before rendering it in
the browser. To protect against XSS attacks, you can implement server-side input
validation and sanitization to ensure that user input is safe and does not contain malicious
content.

HTTP-level vulnerabilities
Angular applications can be vulnerable to various HTTP-level attacks, such as cross-site
request forgery (CSRF), cross-site scripting (XSS), and cross-site script inclusion (XSSI).
To protect against these vulnerabilities, you can use Angular’s built-in security features,
such as HttpClient XSRF/CSRF protection, custom cookie/header names, and disabling
XSRF protection.

Cross-site request forgery

Cross-site request forgery (CSRF) is a security vulnerability that allows attackers to
execute unauthorized actions on behalf of authenticated users. To prevent CSRF attacks
in Angular applications, you can use Angular’s built-in XSRF/CSRF protection
mechanism to add a token to HTTP requests and validate it on the server.

import { HttpClientModule } from '@angular/common/http';

import { HttpClientXsrfModule } from '@angular/common/http';

@NgModule({
imports: [
HttpClientModule,
[Link]({
cookieName: 'XSRF-TOKEN',
headerName: 'X-XSRF-TOKEN'
})
]
})

export class AppModule { }

HttpClient XSRF/CSRF security

Angular’s HttpClient module provides built-in support for cross-site request forgery
(CSRF) protection using the XSRF/CSRF token mechanism. The
[Link] method allows you to configure custom cookie and
header names for the XSRF/CSRF token.

import { HttpClientModule } from '@angular/common/http';

import { HttpClientXsrfModule } from '@angular/common/http';

@NgModule({
imports: [
HttpClientModule,
[Link]({
cookieName: 'XSRF-TOKEN',
headerName: 'X-XSRF-TOKEN'
})
]
})

export class AppModule { }

Configure custom cookie/header names

Angular’s HttpClient module allows you to configure custom cookie and header names
for the XSRF/CSRF token using the [Link] method. By
specifying custom names for the XSRF/CSRF token, you can enhance the security of
your application and prevent CSRF attacks.

import { HttpClientModule } from '@angular/common/http';

import { HttpClientXsrfModule } from '@angular/common/http';

@NgModule({
imports: [
HttpClientModule,
[Link]({
cookieName: 'XSRF-TOKEN',
headerName: 'X-XSRF-TOKEN'
})
]
})

export class AppModule { }

Disabling XSRF protection
Angular’s HttpClient module provides built-in support for cross-site request forgery
(CSRF) protection using the XSRF/CSRF token mechanism. If you want to disable
XSRF protection for specific requests, you can use the { withCredentials: true } option in
the HttpClient request.

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

[Link]('/api/data', { withCredentials: true });

Cross-site script inclusion (XSSI)

Cross-site script inclusion (XSSI) is a security vulnerability that allows attackers to
include external scripts in an application and execute malicious code. To prevent XSSI
attacks in Angular applications, you can use Angular’s built-in security features, such as
HttpClient XSSI protection, to validate and sanitize external script responses.

Auditing Angular applications

Auditing Angular applications is an essential step to identify and fix security
vulnerabilities in the codebase. You can use various tools and techniques to audit Angular
applications, such as security scanners, code reviews, penetration testing, and security
best practices.

Back to top⤴️
Angular Animations
Angular’s animation system is built on CSS functionality in order to animate any
property that the browser considers animatable. These properties includes positions, sizes,
transforms, colors, borders etc. The Angular modules for animations are
@angular/animations and @angular/platform-browser.

Installing Angular Animations

npm install @angular/animations

Importing Angular Animations

To use Angular animations in an Angular application, you need to import the

BrowserAnimationsModule module in the [Link] file.
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

Animation Example
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
animations: [
trigger('fadeInOut', [
transition(':enter', [
style({ opacity: 0 }),
animate('1s', style({ opacity: 1 }))
]),
transition(':leave', [
animate('1s', style({ opacity: 0 }))
])
])
]
})

export class AppComponent {

show = false;

toggle() {
[Link] = ![Link];
}
}

<button (click)="toggle()">Toggle</button>
<div *ngIf="show" @fadeInOut>
<h1>Angular Animation Example</h1>
</div>

Back to top⤴️
Angular Universal
Angular Universal is a server-side rendering (SSR) solution for Angular applications that
allows you to render your application on the server and send the fully rendered HTML to
the client. This can improve performance, SEO, and user experience by reducing the time
to first contentful paint and enabling search engines to crawl and index your application.

Creating an Angular Universal application

To create an Angular Universal application, you can use the Angular CLI to generate a
new project with the Universal schematic.

ng new --ssr

To add Angular Universal to an existing Angular application, you can use the Angular
CLI to add the Universal schematic to the project.

ng add @angular/ssr

Back to top⤴️
Bootstrap
Bootstrap is a popular front-end framework for building responsive web applications. It
provides a set of CSS and JavaScript components that can be used to create modern and
mobile-friendly user interfaces.

Installing Bootstrap
npm install bootstrap

Importing Bootstrap

To use Bootstrap in an Angular application, you need to import the Bootstrap CSS file in
the styles array of the [Link] file.

"styles": [
"node_modules/bootstrap/dist/css/[Link]",
"src/[Link]"
]

Back to top⤴️
Angular Material
Angular Material is a UI component library for Angular applications that provides a set of
reusable and customizable components, such as buttons, cards, dialogs, and menus. It is
built on top of the Angular CDK (Component Dev Kit) and follows the Material Design
guidelines.
Installing Angular Material
ng add @angular/material

Importing Angular Material

To use Angular Material in an Angular application, you need to import the required
modules in the [Link] file.

import { MatSliderModule } from '@angular/material/slider';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatSliderModule
],
providers: [],
bootstrap: [AppComponent]
})

export class AppModule { }

Back to top⤴️
Tailwind CSS
Tailwind CSS is a utility-first CSS framework that provides a set of pre-built utility
classes for styling web applications. It allows you to build custom designs by composing
utility classes together, rather than writing custom CSS styles.

Installing Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Configure your template paths

// [Link]
/** @type {import('tailwindcss').Config} */
[Link] = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
};

Importing Tailwind CSS

/* [Link] */
@tailwind base;
@tailwind components;
@tailwind utilities;

Upgrading Tailwind CSS

To upgrade Tailwind CSS to the latest version, follow the steps outlined in the Tailwind
CSS Upgrade Guide. This guide provides detailed instructions on how to update your
Tailwind CSS configuration and resolve any breaking changes.

Back to top⤴️
PrimeNG
PrimeNG is a popular UI component library for Angular applications that provides a set
of rich and customizable components, such as data tables, calendars, dialogs, and charts.
It is built on top of the PrimeFaces library and follows the PrimeNG design guidelines.

Installing PrimeNG
npm install primeng

Importing PrimeNG

To use PrimeNG in an Angular application, you need to import the required styles and
modules in the [Link] file.

// [Link]
"styles": [
"node_modules/primeng/resources/themes/saga-blue/[Link]",
"node_modules/primeng/resources/[Link]",
"src/[Link]"
]

/* [Link] */
@import 'primeng/resources/themes/saga-blue/[Link]';
@import 'primeng/resources/[Link]';

Back to top⤴️
SPA
SPA (Single Page Application) is a web application that dynamically rewrites the current
page instead of loading entire new pages from the server, providing a fluid and
responsive user experience.

Advantages of SPA

Faster Load Times: Loads the initial page once; subsequent interactions update
dynamically.
Better User Experience: No full page reloads, allowing faster navigation and
smoother transitions.
Reduced Server Load: Less server load as only necessary data is fetched.
Improved SEO: Optimizable for search engines with server-side rendering and meta
tags.
Offline Support: Accessible offline using service workers and caching.
Mobile Support: Optimized for mobile with responsive design and touch gestures.
Scalability: Handles many users and interactions with performance optimizations
like lazy loading.

Back to top⤴️
PWA
Progressive Web Apps (PWAs) are web applications that provide a native app-like
experience to users, including offline support, push notifications, and home screen
installation. Angular provides built-in support for creating PWAs using the @angular/pwa
package.

Installing PWA
ng add @angular/pwa

Configuring PWA

To configure the PWA settings, you can modify the [Link] file in the src/
directory.

{
"index": "/[Link]",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/[Link]",
"/[Link]",
"/*.css",
"/*.js"
]
}
}
]
}

Building PWA

To build the PWA, you can run the ng build –prod command with the –
configuration=production flag.

ng build --prod --configuration=production

Service Worker

The service worker is a script that runs in the background of the browser and handles
tasks such as caching assets, intercepting network requests, and providing offline support.
Angular’s service worker is generated automatically when you create a PWA using the
@angular/pwa package.

Features of PWA

Offline Support - The service worker caches assets and intercepts network requests to
provide offline support for the application.

Push Notifications - The service worker can receive push notifications from the server
and display them to the user.

Background Sync - The service worker can perform background sync tasks, such as
sending data to the server when the network connection is available.

Home Screen Installation - The service worker can prompt the user to install the
application on the home screen for quick access.

npm install -g @angular/cli

Help

ng help

Check version

ng version
Create, build, and serve a new, basic Angular project cli command

ng new my-first-project
cd my-first-project
ng serve

Generating new application

ng new app-name

Create new app without installing cli

npm init @angular app-name

npx -p @angular/cli ng new app-name

Component

ng g c component-name
ng generate component component-name

Adding External libraries

ng add

Build

ng build

Running project

ng serve

Run project on particular port

ng serve --port=portname
// example
ng serve --port=3000

Run project and open the url in default browser

ng serve --open

Update

ng update

Directive

ng generate directive component-name

ng g directive component-name

Module
ng generate module module-name
ng g m module-name

Service

ng generate service component-name

ng g service component-name

Routing Module

ng g module module-name --routing

ng g m module-name --routing

Component with module, routing module

ng generate module component-name --route component-name --module [Link]

Pipe

ng g pipe pipe-name

Enum

ng g enum some-enum

Class

ng g cl my-class

Interface

ng g interface my-interface

Guard

ng g guard guard-name

Multiple Projects in one Angular App

ng generate application sub-app-name

ng new app-name --create-application=false

Generate environments

ng generate environments

Version compatibility
Angular [Link] TypeScript RxJS
19.1.x ^18.19.1 || ^20.11.1 || ^22.0.0 >=5.5.0 <5.8.0 ^6.5.3 || ^7.4.0
19.0.x ^18.19.1 || ^20.11.1 || ^22.0.0 >=5.5.0 <5.7.0 ^6.5.3 || ^7.4.0
Angular [Link] TypeScript RxJS
18.1.x || 18.2.x ^18.19.1 || ^20.11.1 || ^22.0.0 >=5.4.0 <5.6.0 ^6.5.3 || ^7.4.0
18.0.x ^18.19.1 || ^20.11.1 || ^22.0.0 >=5.4.0 <5.5.0 ^6.5.3 || ^7.4.0
17.3.x ^18.13.0 || ^20.9.0 >=5.2.0 <5.5.0 ^6.5.3 || ^7.4.0
17.1.x || 17.2.x ^18.13.0 || ^20.9.0 >=5.2.0 <5.4.0 ^6.5.3 || ^7.4.0
17.0.x ^18.13.0 || ^20.9.0 >=5.2.0 <5.3.0 ^6.5.3 || ^7.4.0

For more detailed information on each version, you can visit the Angular Versions page.

Back to top ⤴️
Deploying an Angular Application
DEPLOYMENT TO PACKAGE
Firebase hosting ng add @angular/fire
Vercel vercel init angular
Netlify ng add @netlify-builder/deploy
GitHub pages ng add angular-cli-ghpages
NPM ng add ngx-deploy-npm
Amazon Cloud S3 ng add @jefiozie/ngx-aws-deploy

import { Component } from '@angular/core'; // Component decorator

import { NgModule } from '@angular/core'; // NgModule decorator
import { RouterModule, Routes } from '@angular/router'; // Routing module
import { FormsModule } from '@angular/forms'; // Forms module
import { ReactiveFormsModule } from '@angular/forms'; // Reactive forms
module
import { HttpClientModule } from '@angular/common/http'; // HTTP client
module
import { BrowserModule } from '@angular/platform-browser'; // Browser module
import { BrowserAnimationsModule } from '@angular/platform-
browser/animations'; // Animations module
import { CommonModule } from '@angular/common'; // Common module
import { NgModel } from '@angular/forms'; // NgModel directive
import { NgForm } from '@angular/forms'; // NgForm directive
import { FormGroup, FormControl, Validators } from '@angular/forms'; // Form
group, form control, validators
import { HttpClient } from '@angular/common/http'; // HTTP client
import { ActivatedRoute } from '@angular/router'; // Route parameters
import { Router } from '@angular/router'; // Router service
import { Title } from '@angular/platform-browser'; // Title service
import { Meta } from '@angular/platform-browser'; // Meta service
import { Renderer2 } from '@angular/core'; // Renderer2 service
import { ElementRef } from '@angular/core'; // ElementRef service
import { ViewChild } from '@angular/core'; // ViewChild decorator
import { ViewContainerRef } from '@angular/core'; // ViewContainerRef service
import { ComponentFactoryResolver } from '@angular/core'; //
ComponentFactoryResolver service
import { ChangeDetectorRef } from '@angular/core'; // ChangeDetectorRef
service
import { Pipe, PipeTransform } from '@angular/core'; // Pipe decorator,
PipeTransform interface
import { Injectable } from '@angular/core'; // Injectable decorator
import { EventEmitter } from '@angular/core'; // EventEmitter class
import { Output } from '@angular/core'; // Output decorator
import { Input } from '@angular/core'; // Input decorator
import { HostListener } from '@angular/core'; // HostListener decorator
import { HostBinding } from '@angular/core'; // HostBinding decorator
import { ContentChild } from '@angular/core'; // ContentChild decorator
import { ContentChildren } from '@angular/core'; // ContentChildren
decorator
import { QueryList } from '@angular/core'; // QueryList class
import { AfterContentInit } from '@angular/core'; // AfterContentInit
interface
import { AfterContentChecked } from '@angular/core'; // AfterContentChecked
interface
import { AfterViewInit } from '@angular/core'; // AfterViewInit interface
import { AfterViewChecked } from '@angular/core'; // AfterViewChecked
interface
import { OnInit } from '@angular/core'; // OnInit interface
import { OnDestroy } from '@angular/core'; // OnDestroy interface
import { OnChanges } from '@angular/core'; // OnChanges interface
import { SimpleChanges } from '@angular/core'; // SimpleChanges class
import { DoCheck } from '@angular/core'; // DoCheck interface
import { KeyValueDiffers } from '@angular/core'; // KeyValueDiffers service
import { KeyValueDiffer } from '@angular/core'; // KeyValueDiffer interface
import { KeyValueChanges } from '@angular/core'; // KeyValueChanges
interface
import { KeyValueChangeRecord } from '@angular/core'; // KeyValueChangeRecord
interface
import { IterableDiffers } from '@angular/core'; // IterableDiffers service
import { IterableDiffer } from '@angular/core'; // IterableDiffer interface
import { IterableChanges } from '@angular/core'; // IterableChanges
interface
import { IterableChangeRecord } from '@angular/core'; // IterableChangeRecord
interface
import { ChangeDetectionStrategy } from '@angular/core'; //
ChangeDetectionStrategy enum
import { ChangeDetectorRef } from '@angular/core'; // ChangeDetectorRef
service
import { NgZone } from '@angular/core'; // NgZone service
import { ApplicationRef } from '@angular/core'; // ApplicationRef service
import { ComponentRef } from '@angular/core'; // ComponentRef class
import { ComponentFactory } from '@angular/core'; // ComponentFactory class
import { ComponentFactoryResolver } from '@angular/core'; //
ComponentFactoryResolver service
import { ViewContainerRef } from '@angular/core'; // ViewContainerRef service
import { TemplateRef } from '@angular/core'; // TemplateRef class
import { EmbeddedViewRef } from '@angular/core'; // EmbeddedViewRef class

Angular Material

import { MatDialog } from '@angular/material/dialog';

import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatMenuModule } from '@angular/material/menu';
import { MatSelectModule } from '@angular/material/select';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatCardModule } from '@angular/material/card';
import { MatProgressSpinnerModule } from '@angular/material/progress-
spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatDialogModule } from '@angular/material/dialog';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatRadioModule } from '@angular/material/radio';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTabsModule } from '@angular/material/tabs';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatChipsModule } from '@angular/material/chips';
import { MatListModule } from '@angular/material/list';
import { MatStepperModule } from '@angular/material/stepper';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatDividerModule } from '@angular/material/divider';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatRippleModule } from '@angular/material/core';
import { MatSliderModule } from '@angular/material/slider';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTreeModule } from '@angular/material/tree';

RxJS
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { ReplaySubject } from 'rxjs/ReplaySubject';
import { AsyncSubject } from 'rxjs/AsyncSubject';
import { Subscription } from 'rxjs/Subscription';
import { from } from 'rxjs';
import { fromEvent } from 'rxjs';
import { interval } from 'rxjs';
import { timer } from 'rxjs';
import { merge } from 'rxjs';
import { zip } from 'rxjs';
import { combineLatest } from 'rxjs';
import { concat } from 'rxjs';
import { forkJoin } from 'rxjs';
import { race } from 'rxjs';
import { map } from 'rxjs/operators';
import { filter } from 'rxjs/operators';
import { reduce } from 'rxjs/operators';
import { tap } from 'rxjs/operators';
import { catchError } from 'rxjs/operators';
import { retry } from 'rxjs/operators';
import { switchMap } from 'rxjs/operators';
import { take } from 'rxjs/operators';
import { debounceTime } from 'rxjs/operators';
import { distinctUntilChanged } from 'rxjs/operators';
import { scan } from 'rxjs/operators';
import { mergeMap } from 'rxjs/operators';
import { exhaustMap } from 'rxjs/operators';
import { concatMap } from 'rxjs/operators';
import { takeUntil } from 'rxjs/operators';
import { finalize } from 'rxjs/operators';
import { share } from 'rxjs/operators';
import { shareReplay } from 'rxjs/operators';
import { buffer } from 'rxjs/operators';
import { bufferCount } from 'rxjs/operators';
import { bufferTime } from 'rxjs/operators';
import { bufferToggle } from 'rxjs/operators';
import { bufferWhen } from 'rxjs/operators';
import { combineAll } from 'rxjs/operators';
import { concatAll } from 'rxjs/operators';
import { count } from 'rxjs/operators';
import { endWith } from 'rxjs/operators';
import { every } from 'rxjs/operators';
import { exhaust } from 'rxjs/operators';
import { first } from 'rxjs/operators';
import { groupBy } from 'rxjs/operators';
import { ignoreElements } from 'rxjs/operators';
import { isEmpty } from 'rxjs/operators';
import { last } from 'rxjs/operators';
import { max } from 'rxjs/operators';
import { mergeAll } from 'rxjs/operators';
import { min } from 'rxjs/operators';
import { pairwise } from 'rxjs/operators';
import { partition } from 'rxjs/operators';
import { pluck } from 'rxjs/operators';

Firebase

import { AngularFireModule } from "@angular/fire/compat";

import { AngularFireAuthModule } from "@angular/fire/compat/auth";
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { AngularFireStorage } from '@angular/fire/storage';

import { AngularFireModule } from '@angular/fire';

import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireFunctionsModule } from '@angular/fire/functions';
import { AngularFireMessagingModule } from '@angular/fire/messaging';
import { AngularFirePerformanceModule } from '@angular/fire/performance';
import { AngularFireRemoteConfigModule } from '@angular/fire/remote-config';
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
import { AngularFireAuthGuardModule } from '@angular/fire/auth-guard';

MVVM
MVVM stands for Model-View-ViewModel. It is a design pattern that separates the user
interface (View) from the business logic (Model) using a ViewModel. The ViewModel
acts as an intermediary between the View and the Model, providing data binding and
event handling.

MVC
MVC stands for Model-View-Controller. It is a design pattern that separates the user
interface (View) from the business logic (Model) using a Controller. The Controller acts
as an intermediary between the View and the Model, handling user input and updating the
Model.

TypeScript
TypeScript is JavaScript with syntax for types. TypeScript is a superset of JavaScript that
compiles to plain JavaScript. It is developed and maintained by Microsoft.
Rxjs
Reactive Extensions Library for JavaScript - RxJS is a library for reactive
programming using Observables, to make it easier to compose asynchronous or callback-
based code.

NgRx
NgRx is a Reactive libraries for Angular. It provides state management, side effects, and
route handling. It is inspired by Redux. It is a set of Angular libraries to help manage
state at scale in Angular applications.

NgXS
NgXS is a state management pattern + library for Angular. It acts as a single source of
truth for your application’s state, providing simple rules for predictable state mutations.

Back to top⤴️
Learn more from GitHub Repositories
Awesomw Angular
Angular JumpStart
Angular Interview Questions by Sudheerj
Angular Learning Resources
CodAffection
Bezkoder
Angular Interview Questions by Yonet
Angular Basics ( v14.x )

Learn more from Websites

Official Documentation
Tektutorialshub
W3School
GeeksForGeeks
DevDocs
Freecodecamp
Javatpoint
Tutorialspoint
Udemy
YouTube
Stackoverflow
NX Blog
Indepthdev
Angular University
Bezkoder
Learn more from Books
Angular From Theory To Practice
Angular in Action
Ng-Book: The Complete Guide to Angular
Pro Angular 6
Beginning Angular with Typescript
Angular 6 for Enterprise-Ready Web Applications
[Link] Core 2 and Angular 5
Angular Up & Running
Codecraft
[Link]
Angular 2 Succinctly
Angular2Book
Learning Angular: A no-nonsense guide to building web applications with Angular
15, 4th Edition

List of Twitter Users to Follow

Mosh
Minko Gechev
Todd Motto
Deborah Kurata
John Papa
Dan Wahlin
Maximilian Schwarzmüller
Wes Bos
Tracy Lee | ladyleet
Shai Reznik
Victor Savkin
Stephen Fluin
Juri Strumpflohner

List of LinkedIn Users to Follow

Kevin Kreuzer
Aristeidis Bampakos
Dmytro Mezhenskyi
Santosh Yadav
Tomas Trajan
Marko Stanimirović
Teja Gandhamu
Santosh Yadav
Juri Strumpflohner
Minko Gechev
Todd Motto
Deborah Kurata

List of Discord Servers to Join

Angular

Contributing
Please read [Link] for details on our code of conduct, and the process for
submitting pull requests.
License
This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments
Angular
Stackblitz

Connect with me
Twitter
LinkedIn
Facebook
Instagram
YouTube
GitHub

Support
If you like this learning repository and find it useful, consider buying me a coffee or
sponsoring me through the GitHub Sponsor. Your support will help me to continue and
bring more exciting projects. Thank you!

Buy Me A Coffee

Sponsor Me

Show your support by 🌟 the repository.

Learn Angular: Comprehensive Resources
No ratings yet
Learn Angular: Comprehensive Resources
99 pages
Angular Framework Overview and Setup Guide
No ratings yet
Angular Framework Overview and Setup Guide
41 pages
Angular Components: Building Blocks Explained
No ratings yet
Angular Components: Building Blocks Explained
9 pages
Angular CLI Setup and Features Guide
50% (2)
Angular CLI Setup and Features Guide
39 pages
Section 1
No ratings yet
Section 1
6 pages
Angular Development Guide: Basics to Routing
No ratings yet
Angular Development Guide: Basics to Routing
56 pages
Angular Development Course Syllabus
No ratings yet
Angular Development Course Syllabus
20 pages
Angular Framework Overview and Setup Guide
No ratings yet
Angular Framework Overview and Setup Guide
67 pages
Key Features of Angular Framework
No ratings yet
Key Features of Angular Framework
86 pages
Angular Development Platform Overview
No ratings yet
Angular Development Platform Overview
54 pages
Angular 2 Application Architecture Overview
No ratings yet
Angular 2 Application Architecture Overview
106 pages
Angular Components: Building Blocks
No ratings yet
Angular Components: Building Blocks
29 pages
Ebook de Angular
No ratings yet
Ebook de Angular
39 pages
Introduction to Angular Framework
No ratings yet
Introduction to Angular Framework
20 pages
Angular Development Platform Overview
No ratings yet
Angular Development Platform Overview
34 pages
Angular Framework Overview and Features
No ratings yet
Angular Framework Overview and Features
93 pages
Angular PDF Generation and Splitting Guide
No ratings yet
Angular PDF Generation and Splitting Guide
11 pages
ReactJS DOM Node Tracking Changes
No ratings yet
ReactJS DOM Node Tracking Changes
37 pages
Angular Framework Overview and Concepts
No ratings yet
Angular Framework Overview and Concepts
19 pages
Angular Beginners Guide New
No ratings yet
Angular Beginners Guide New
34 pages
Angular 8 Tutorial and Concepts Guide
No ratings yet
Angular 8 Tutorial and Concepts Guide
63 pages
Angular 12 Setup and Development Guide
No ratings yet
Angular 12 Setup and Development Guide
39 pages
Angular JS in Software Architecture
No ratings yet
Angular JS in Software Architecture
25 pages
Angular and TypeScript Overview Guide
No ratings yet
Angular and TypeScript Overview Guide
38 pages
Angular Framework Case Study Overview
No ratings yet
Angular Framework Case Study Overview
18 pages
Angular JS Development Guide
No ratings yet
Angular JS Development Guide
138 pages
Effective Angular Framework Overview
No ratings yet
Effective Angular Framework Overview
19 pages
VND - Openxmlformats Officedocument - Wordprocessingml
No ratings yet
VND - Openxmlformats Officedocument - Wordprocessingml
14 pages
Angular 8 Tutorial Overview
No ratings yet
Angular 8 Tutorial Overview
36 pages
Getting Started with Angular Setup
No ratings yet
Getting Started with Angular Setup
10 pages
Angular Framework Overview and Setup
No ratings yet
Angular Framework Overview and Setup
253 pages
Introduction to Angular Framework
No ratings yet
Introduction to Angular Framework
10 pages
Completing an AngularJS Application
No ratings yet
Completing an AngularJS Application
28 pages
Integrating Bootstrap in Angular Projects
No ratings yet
Integrating Bootstrap in Angular Projects
5 pages
Angular Project Setup and Essentials
No ratings yet
Angular Project Setup and Essentials
12 pages
Creating Angular Projects with CLI
No ratings yet
Creating Angular Projects with CLI
51 pages
Angular Biginner To Advance
No ratings yet
Angular Biginner To Advance
119 pages
Angular 10+ Basics and Installation Guide
No ratings yet
Angular 10+ Basics and Installation Guide
25 pages
Unit 4
No ratings yet
Unit 4
83 pages
Angular Merged
No ratings yet
Angular Merged
98 pages
Updated Angular Notes
No ratings yet
Updated Angular Notes
20 pages
Angular Framework Overview and Setup
No ratings yet
Angular Framework Overview and Setup
34 pages
Angular Basics: Components & Services Guide
No ratings yet
Angular Basics: Components & Services Guide
20 pages
MEAN Stack Technology Overview
No ratings yet
MEAN Stack Technology Overview
65 pages
Angular 9 Overview and Setup Guide
No ratings yet
Angular 9 Overview and Setup Guide
5 pages
Angular Framework Overview and Insights
No ratings yet
Angular Framework Overview and Insights
16 pages
Angular Notes
No ratings yet
Angular Notes
115 pages
Install Angular on Windows: Step-by-Step Guide
No ratings yet
Install Angular on Windows: Step-by-Step Guide
7 pages
Angular Cheat Sheet: Key Concepts & CLI
100% (1)
Angular Cheat Sheet: Key Concepts & CLI
6 pages
Angular Interview Questions Guide
No ratings yet
Angular Interview Questions Guide
20 pages
Getting Started with Angular Development
No ratings yet
Getting Started with Angular Development
18 pages
Getting Started: Prerequisites
No ratings yet
Getting Started: Prerequisites
5 pages
Comprehensive Angular Development Guide
No ratings yet
Comprehensive Angular Development Guide
69 pages
Introduction to Angular Framework and Setup
No ratings yet
Introduction to Angular Framework and Setup
8 pages
Angular 8 Framework Overview and Setup
No ratings yet
Angular 8 Framework Overview and Setup
167 pages
NgSwitchCase in Angular: Multi-Condition Use
No ratings yet
NgSwitchCase in Angular: Multi-Condition Use
67 pages
Angular Fundamentals Overview Guide
No ratings yet
Angular Fundamentals Overview Guide
45 pages
MEAN Stack Technologies Lab Manual
100% (1)
MEAN Stack Technologies Lab Manual
137 pages
Angular Overview and Components Guide
No ratings yet
Angular Overview and Components Guide
42 pages
Digital Notes on Machine Learning Concepts
No ratings yet
Digital Notes on Machine Learning Concepts
135 pages
Angular 14 Release and Versioning Guide
No ratings yet
Angular 14 Release and Versioning Guide
7 pages
Work Completion Problems and Solutions
No ratings yet
Work Completion Problems and Solutions
1 page
Angular 15: Essential Guide and Examples
No ratings yet
Angular 15: Essential Guide and Examples
47 pages
Introduction to Angular Framework
No ratings yet
Introduction to Angular Framework
4 pages
Core Java Simplified Textbook PDF
No ratings yet
Core Java Simplified Textbook PDF
119 pages
Complete CSS Course Notes PDF
100% (1)
Complete CSS Course Notes PDF
160 pages
RXJS OPERATORS NOTES Compressed
No ratings yet
RXJS OPERATORS NOTES Compressed
7 pages
OWASP SAMM: Software Security Guide
No ratings yet
OWASP SAMM: Software Security Guide
72 pages
Data Structures and Abstraction Concepts
No ratings yet
Data Structures and Abstraction Concepts
37 pages
Mount EFS on SageMaker Instance Guide
No ratings yet
Mount EFS on SageMaker Instance Guide
3 pages
Internship Report: Full Stack Development
No ratings yet
Internship Report: Full Stack Development
29 pages
QA Engineer Resume - Automation & Testing
No ratings yet
QA Engineer Resume - Automation & Testing
1 page
Self-Documenting Code Explained
100% (1)
Self-Documenting Code Explained
36 pages
SAP ABAP Assessment Set 2 100 MCQs
No ratings yet
SAP ABAP Assessment Set 2 100 MCQs
5 pages
Software Engineering MCQs and Models
No ratings yet
Software Engineering MCQs and Models
21 pages
Understanding Semaphores in Programming
No ratings yet
Understanding Semaphores in Programming
5 pages
Movie Ticket Booking System Project
No ratings yet
Movie Ticket Booking System Project
31 pages
BDD in Requirement Engineering Guide
No ratings yet
BDD in Requirement Engineering Guide
8 pages
Grade 12 Java Programming Test
No ratings yet
Grade 12 Java Programming Test
4 pages
CA-502 Object Oriented Software Engineering Exam Guide
No ratings yet
CA-502 Object Oriented Software Engineering Exam Guide
77 pages
Manual Software Testing Interview Guide
No ratings yet
Manual Software Testing Interview Guide
53 pages
Software Developer Cover Letter Guide
No ratings yet
Software Developer Cover Letter Guide
4 pages
SYSLOG Message Format Overview
No ratings yet
SYSLOG Message Format Overview
3 pages
Dorking Guide and Tools Overview
100% (1)
Dorking Guide and Tools Overview
18 pages
OOSE Question Bank for CSE 2024-2025
No ratings yet
OOSE Question Bank for CSE 2024-2025
3 pages
Comprehensive Tech Stack Roadmap
No ratings yet
Comprehensive Tech Stack Roadmap
1 page
Low vs High-Level Programming Languages
No ratings yet
Low vs High-Level Programming Languages
2 pages
Understanding Nested If-Else Statements
No ratings yet
Understanding Nested If-Else Statements
12 pages
Client-Side vs Server-Side Web Development
No ratings yet
Client-Side vs Server-Side Web Development
4 pages
.NET Programming Concepts and Techniques
No ratings yet
.NET Programming Concepts and Techniques
4 pages
Understanding PDL Commands in ICL
No ratings yet
Understanding PDL Commands in ICL
3 pages
MySQL Connector/C++ Overview
No ratings yet
MySQL Connector/C++ Overview
26 pages
Selenium Java Test Script Example
No ratings yet
Selenium Java Test Script Example
2 pages
Digital School Diary Project Overview
No ratings yet
Digital School Diary Project Overview
59 pages
Managing Domain Processes in Software Projects
No ratings yet
Managing Domain Processes in Software Projects
45 pages
Python Programming Lab Manual
No ratings yet
Python Programming Lab Manual
76 pages
File Handling in C: Read, Write, Copy
No ratings yet
File Handling in C: Read, Write, Copy
3 pages