Asp.Net MVC

Component-Based Architecture:

Two-Way Data Binding:

Dependency Injection:

Directives:

Routing:

Built-in Services:

Ahead-of-Time (AOT) Compilation:

Reactive Programming:

Cross-Platform Development:

High speed and performance

MVC architecture

Creating modern-looking UIs using the Angular Material library

Angular Material and the Component Dev Kit (CDK).

Can create a web app that consists of a set of components that can communicate with each otherin a loosely coupled manner.

Type Safety

Decorator Support

Object-Oriented Programming Features

Compatibility with ES6+ Features

Enhanced Tooling Support:

Generics

In Single Page Applications, entire browser’s page is not being refreshed and only a certain portion of the page (view) may be replacing another as the user navigates through your app.This approach provides a more seamless and faster user experience, similar to a desktop or mobile app.

Benefits of SPA

Dynamic updates

Client Side Rendering

Improved User Experience by reducing page loading time.

Some popular SPA are Angular,Vue.js,React etc.

React and Vue.js are libraries that don’t offer a full solution for developing and deploying a complete web application, whereas Angular does offer that full solution.If you pick React or Vue.js for your project, you’ll also need to select other products that support routing, dependency injection, forms, bundling and deploying the app, and more.

In the end, your app will consist of multiple libraries and tools picked by a senior developer or an architect. If this developer decides to leave the project, finding a replacement won’t be easy because the new hire may not be familiar with all the libraries and tools used in the project.

The Angular framework is a platform that includes all you need for developing and deploying a web app, batteries included. Replacing one Angular developer with another is easy, as long as the new person knows Angular.

Angular is an open source JavaScript framework maintained by Google.

A component is a fundamental building block of the framework.

A component is basically markup, meta-data, and a class (containing data and code) that combined together create a UI widget.

Components are the main tools we use to build an interactive UI with. All Angular applications have a root component, often called the application component .

 It controls a section of the user interface (UI) and is composed of three key elements:

Template (HTML): Defines the structure and layout of the component's UI.

Class (TypeScript): Contains the logic and data for the component, including properties and methods that the template can use.

Styles (CSS/SCSS): Provides the styling for the component, either inline or in external stylesheets.

To create a component, use the Angular CLI:

ng generate component --spec false -ve none tasks/task-list

ng generate component component-name --spec false -ve none

This command:

Creates a folder named component-name.

Generates the following files inside the folder:

component-name.component.ts (TypeScript class)

component-name.component.html (Template)

component-name.component.css (Styles)

component-name.component.spec.ts (Unit test file)

Updates the AppModule to declare the new component.

 --spec false option means we can skip create test specifications and -ve none parameter, we can tell Angular to create the component using ViewEncapsulation.None as a default encapsulation setting.

Every component must have:

A TypeScript class with behaviors such as handling user input and fetching data from a server (selector)

An HTML template that controls what renders into the DOM (templateUrl)

A CSS selector that defines how the component is used in HTML (styleUrls)

For example

@Component({

  selector: 'app-newcomponent',

  templateUrl: './newcomponent.component.html',

  styleUrls: ['./newcomponent.component.css']

})

export class NewcomponentComponent {

}

Dependency Injection (DI) is a core design pattern in Angular that helps manage the relationships between different parts of an application.

 It promotes modularity, testability, and flexibility by allowing components, services, and other classes to request the dependencies they need, rather than creating them directly.

In order to implement DI, we have to make it first Injectable.  For example create a service called MyService.

@Injectable({

  providedIn: 'root', // Makes the service available throughout the application

})

export class MyService {

  // Service logic here

}

A provider is registered in an injector, often in a module's providers array.

Using providedIn: 'root' registers the service with the root injector.

In order to use this MyService in a component, we have to inject it in the constructor of the component. Consider following component,

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

import { MyService } from './my-service';

@Component({

  selector: 'app-my-component',

  templateUrl: './my-component.component.html',

})

export class MyComponent {

  constructor(private myService: MyService) {

    // You can now use myService in this component

  }

}

In order to  use this service throghout the application,

you can specify this service as providers in the @NgModule decorator. When declared here, the services are available globally within the module.

In app.module.ts

import { MyService } from './my.service';

@NgModule({

  declarations: [AppComponent],

  imports: [BrowserModule],

  providers: [MyService], // Registering MyService

  bootstrap: [AppComponent],

})

or  another method to use service globally, while you create it, you can specify as

@Injectable({

  providedIn: 'root', // Available globally

})

If you want the service to be available only within a specific module, you can set providedIn to the module name:

@Injectable({

  providedIn: 'module1','module2' // A new instance for each module where it's injected

})

Code Reusability: Services can be reused across components.

Modularity: Dependencies can be swapped easily without changing the components.

Testability: Allows you to inject mock dependencies during testing.

Scalability: Simplifies scaling an application by managing dependencies efficiently.

Providers like useClass, useFactory, and useValue are different ways to configure how a dependency is injected into a component or service.

useClass

This is used to provide a class that Angular will instantiate when the dependency is required.

useFactory

This is used to specify a factory function that returns the dependency. It is useful for creating services with specific configuration or for returning an instance based on logic.

useValue

This is used to provide a specific value, often for configuration or constants.

It is a way to create a custom token that can be used with Angular's dependency injection system.

It is typically used when you want to provide a value or service that isn't a class type, such as a configuration object, a string, or a non-Angular library.

To Implement an injection token,

import { InjectionToken } from '@angular/core';  // import token

export const API_URL = new InjectionToken<string>('API_URL'); // The string indicates the type of value associated with the token.

Use the token in the providers array of an Angular module:

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

@NgModule({

  providers: [

    { provide: API_URL, useValue: 'https://api.example.com' }

  ]

})

export class AppModule { }

Inject the token into a component, service, or directive using Angular's dependency injection:

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

import { API_URL } from './path-to-your-token';

@Component({

  selector: 'app-root',

  template: '<h1>Welcome</h1>'

})

export class AppComponent {

  constructor(@Inject(API_URL) private apiUrl: string) {

    console.log('API URL:', this.apiUrl);

  }

}

InjectionTokes prevent conflicts between tokens when multiple values or services of the same type exist.

It helps maintain type safety in your Angular applications.

A component's lifecycle is the sequence of steps that happen between the component's creation and its destruction.

constructor -. Runs when Angular instantiates the component.

ngOnInit      

This callback is invoked once Angular is done creating the component and has initialized it.

It’s called directly after the constructor and after the ngOnChange is triggered for the first time

ngOnChanges

This callback is invoked when the value of a bound property changes. It executes every time the value of an input property changes. It will receive a changes map, containing the current and previous values of the binding, wrapped in a SimpleChange.        .

ngDoCheck  

This callback is invoked every time the input properties of a component or a directive are checked. We can use this lifecycle hook to extend the check with our own custom check logic.

ngAfterContentInit :-        

This callback is invoked after ngOnInit : when the component or directive’s content has been initialized and the bindings have been checked for the first time.

ngAfterContentChecked

This callback is performed after every check of the component or directive’s content,effectively when all the bindings of the components have been checked; even if they haven’t changed. 

ngAfterViewInit

This callback is invoked after a component’s view and its children’s views are created and have been initialized. It’s useful for performing component initializations

ngAfterViewChecked

This callback is invoked after every check of the component’s view. It applies to components only, when all the bindings of the children directives have been checked, even if they haven’t changed.  

afterNextRender      Runs once the next time that all components have been rendered to the DOM.

afterRender   Runs every time all components have been rendered to the DOM.

ngOnDestroy

This callback is invoked when a component , directive, pipe, or service is destroyed

Modules provide a way to encapsulate your code and create privacy.

Components are grouped into Angular modules. A module is a class decorated with @NgModule(). The @NgModule() decorator lists all components and other artifacts (services, directives, and so on) that should be included in this module.

A module is a mechanism to organize an application into cohesive blocks of functionality. It helps Angular manage the app structure, dependency injection, and routing.

A module in Angular is defined by the @NgModule decorator, which is a metadata object that provides Angular with information about how to compile and launch the application

Sample Code of a module with one component

@NgModule({

declarations: [

AppComponent 1

],

imports: [

BrowserModule

],

bootstrap: [AppComponent] 2

})

export class AppModule { }

Declares that AppComponent belongs to this module.

Declares that AppComponent is a root component.

Here,  BrowserModule, is a must for apps that run in a browser.

Template elements allow you to define regions within your HTML, which will not be rendered by the browser. You can then instantiate these document fragments with JavaScript and then place the resulting DOM within your document.

Templates can be thought of as a representation of a component that is visualized according to the UI/UX needs of an application. A component will have a template associated with it. The template is responsible for displaying and updating data according to user events:

For example

<h1>Welcome, {{ user.name }}!</h1>

<p>Your age is {{ user.age }}</p>

Here, the user.name and user.age values wrapped in curly braces will be supplied by the associated component instance.

An Inline template refers to defining the HTML template directly within the component's TypeScript file, rather than using an external HTML file.

Sample code

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

@Component({

  selector: 'app-inline-example',

  template: `

    <div>

      <h1>Welcome to Inline Template!</h1>

      <p>This is an example of an inline template in Angular.</p>

      <button (click)="sayHello()">Click Me</button>

    </div>

  `,

  styles: [`

    h1 {

      color: blue;

    }

    p {

      font-size: 14px;

    }

  `]

})

export class InlineExampleComponent {

  sayHello() {

    alert('Hello from the Inline Template!');

  }

}

It is a directive provided by the Angular Router module. It acts as a placeholder that marks where the routed components should be displayed in the view. When the user navigates to a specific route, Angular dynamically loads the associated component and inserts it into the <router-outlet> element.

To use <router-outlet>, you need to configure routes in the RouterModule of your Angular application. (app.routing.module.ts)

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

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

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';

const routes: Routes = [

  { path: '', component: HomeComponent }, // Default route

  { path: 'about', component: AboutComponent },

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule {}

Then Place the <router-outlet> directive in the HTML template of the parent component where you want to display the routed components.

<nav>

  <a routerLink="/">Home</a>

  <a routerLink="/about">About</a>

</nav>

<!-- Routed components will be displayed here -->

<router-outlet></router-outlet>

@NgModule is a decorator in Angular that is used to define a module. A module in Angular is a mechanism to group components, directives, pipes, and services that are related to a particular feature or functionality.

The Main aim of  NgModule is to  mainly solve the following issues:

Explicit template parsing

Simpler dependency resolution

Lazy loading with the Angular router:

If our application consists of 30 components, we need to add them all to the declarations of the NgModule. Every time you create a new component, you will also need to add it to the declarations array within your application module.

@NgModule is defined in app.module.ts file

The main properties of @NgModule are

declarations:

Specifies the components, directives, and pipes that belong to this module.

imports:

Specifies the external Angular modules or custom modules that are required for this module to function.

Common modules include BrowserModule, FormsModule, ReactiveFormsModule, etc

exports:

Makes declarations from this module available to other modules that import this module.

providers:

Specifies services that are available to all components in the module via Angular's Dependency Injection system.

bootstrap:

Lists the root component(s) that Angular should use to bootstrap the application.

Means, which of your components should be rendered first.

You should specify your main application component here, which is representing the root component of your application.

Root Module: Typically the AppModule, which bootstraps the application.

Feature Modules: Organize specific features or areas of the application for better modularity and maintainability.

The app.module.ts file is the root module configuration file in an Angular application. It is where you define the main module of the application, import other Angular modules, and configure services, components, and dependencies.

It contains a decorator called @NgModule that is used to define a module.

The contents of app.module.ts

@NgModule annotation :

. It’s a function that accepts an object and uses the object to provide metadata to Angular about the module: how to compile it and how to run it.

declarations:

This should be an array of the Angular components, directives, and pipes used by your module.

When you add a component using the CLI command ng generate component, it imports the component and adds it to this list of declarations.

imports:

This should be an array of Angular modules required by the application. These modules must be defined using @NgModule.

providers:

This should be an array of Angular provider objects required by the application. These provider objects are services classes and values that are injected into your classes for you using dependency injection.

bootstrap:

To run the application, your application needs to know how to start and with what component it should start (the root). This is where you specify the root component, which will be created and mounted into the HTML when the application starts. This root component is often called AppComponent.

Root Module

Your Angular application can contain multiple modules. But it always has a starting point, a module that it uses to bootstrap itself. This is the root module, often called the AppModule.

It defines the routes for navigating between different components in your app.

It contains :-

1.       Routes Array:

Defines an array of route objects, where each object maps a URL path to a specific component.

2.       @NgModule

It serves as the entry point for bootstrapping the application. It initializes the Angular environment and bootstraps the root module (AppModule).

It is a configuration file in Angular projects that defines settings for the Angular CLI, such as build and test options, file paths, and project-specific configurations. It defines that how the Angular CLI builds and serves your project.

The main sections of a angular json file are :-

projects :-

Contains configurations for one or more projects (applications or libraries) in the workspace.

architect :-

Defines tasks such as building, serving, testing, and linting the project.

build:

Contains settings related to the build process, such as entry points, output paths, and build configurations.

serve:

Configures the development server.

configurations:

Allows different settings for different environments (e.g., production, development).

It defines the dependencies, scripts, and metadata for your project. It is generated when you create a new Angular project using the Angular CLI.

Main sections are :-

name and version of the project

private:

Set to true to ensure the project isn't accidentally published as a public npm package.

scripts:

Defines shortcut commands for building, serving, and testing the application.

dependencies:

Lists runtime dependencies required by the Angular application

devDependencies:

lists tools and libraries required for development and build processes

The tsconfig.json file in an Angular project is used to configure TypeScript compilation options.

Main sections are :-

compilerOptions:

angularCompilerOptions:

These are specific options for Angular's AOT (Ahead-of-Time) compiler.

compileOnSave:

When set to true, recompiles the project automatically when files are saved.

Index.html file serves as the entry point to the app. It includes the necessary HTML structure and links to external resources such as stylesheets, scripts, and the Angular application bundle.

Node_modules is the directory where all the installed dependencies for the project are stored. These dependencies are managed using npm (Node Package Manager) or yarn.

When you create a new Angular project using the Angular CLI or add dependencies to the project using npm install, the required packages are placed in the node_modules folder.

The @Injectable decorator is used to mark a class as available for dependency injection. This means Angular can manage the instance of the class and inject it into other components, services, or directives where it’s needed.

Sample code

Create a service class file called MyService

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

@Injectable({

  providedIn: 'root', // makes the service available application-wide.

})

export class MyService {

  constructor() { }

  getData() {

    return 'some data';

  }

}

Now you can use this service in any component using dependency injection.

import { MyService } from './my-service.service';

 constructor(private myService: MyService) {

    this.data = this.myService.getData();

  }

The Angular CLI (Command Line Interface) is a powerful tool used for developing Angular applications.

It simplifies the process of creating, building, testing, and deploying Angular projects by providing a set of commands that handle common development tasks.

For using angular cli, first you have to intall Node.js. then install angular cli

npm install -g @angular/cli

Creating a new Angular application :-

ng new <project-name>

Serve the application :-

ng serve

To generate components, services, pipes, etc. :-

ng generate component <component-name>

To generate a service:

ng generate service <service-name>

To generate a pipe:

ng generate pipe <pipe-name>

To generate a directive:

ng generate directive <directive-name>

To  build the application :-

ng build

To run unit tests :-

ng test

To run end-to-end tests :-

ng e2e

To add a package or library :-

ng add <package-name>

To update Angular :-

ng update

To deploy the application

ng deploy --target=firebase

The environment.ts file is a configuration file used to define environment-specific variables for your app.

This file allows you to manage settings like API URLs, feature flags, or any other environment-dependent configurations.

Sample code

export const environment = {

  production: true,

  apiUrl: 'https://api.myapp.com',

};

In order to use this in any component/service file,

import { environment } from '../environments/environment';

@Injectable({

  providedIn: 'root',

})

export class ApiService {

constructor(private httpClient: HttpClient) {}

  private apiUrl = environment.apiUrl;

  getData() {

    return this.httpClient.get(`${this.apiUrl}/data`);

  }

  }

Using @Output() and EventEmitter.

In the Child Component:

Create an EventEmitter property with the @Output() decorator.

Emit the data you want to pass to the parent component.

In the Parent Component:

Bind to the child's @Output() property using event binding to receive the emitted data.

Sample Code

Child Component (child.component.ts):

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

@Component({

  selector: 'app-child',

  template: `<button (click)="sendDataToParent()">Send Data</button>`

})

export class ChildComponent {

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

  sendDataToParent() {

    this.dataEmitter.emit('Hello from Child!');

  }

}

Parent Component (parent.component.ts):

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

@Component({

  selector: 'app-parent',

  template: `

    <app-child (dataEmitter)="receiveData($event)"></app-child>

    <p>Data from Child: {{ childData }}</p>

  `

})

export class ParentComponent {

  childData: string;

  receiveData(data: string) {

    this.childData = data;

  }

}

Define an input property in the child component: In the child component, use the @Input() decorator to define a property that will receive the data from the parent.

Bind the data in the parent template: In the parent component's template, use property binding ([]) to pass the value to the child component.

Sample code

parent.component.ts

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

@Component({

  selector: 'app-parent',

  templateUrl: './parent.component.html',

})

export class ParentComponent {

  parentData = 'Hello from Parent!';

}

parent.component.html

<!-- Pass the parentData to the child component using property binding -->

<app-child [childData]="parentData"></app-child>

child.component.ts

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

@Component({

  selector: 'app-child',

  templateUrl: './child.component.html',

})

export class ChildComponent {

  @Input() childData: string;  // This will receive data from parent

}

child.component.html

<!-- Display the data passed from the parent component -->

<p>{{ childData }}</p>

AJAX stands for Asynchronous JavaScript and XML . AJAX is a technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and JavaScript.

When a client-side web application needs to communicate with the server, it uses AJAX to send something out and waits for the result to come back.

The client-side code doesn’t stop running while it’s waiting, because it still has to display the user interface and respond to the user. This is the asynchronous part of AJAX.

Client-side web applications use JavaScript to invoke the AJAX request and respond to it. This is the JavaScript part of AJAX.

AJAX requests used to use XML (Extensible Markup Language ) as the data format for the request and result data going back and forth between the client and the server.

Nowadays, AJAX tends to use JSON (JavaScript Object Notation ) as the data format instead of XML. That’s because JSON is much more compact and maps more directly onto the data structures used in modern programming languages. But both XML and JSON are commonly used formats for transferring data in text form.

When you make an AJAX call, you have to tell it what to do when the server response is received. This code that the AJAX system code should fire when the response is received is known as the callback .

There are two types of callbacks:

Success: The success (or done) callback is invoked if the server responds successfully and the client receives the answer without error.

Failure: The fail or error callback is optional and is invoked if the server responds back with an error.

When you invoke AJAX code , it returns what’s known as a promise or a deferred. A promise is an object that is a “promise of response” from an AJAX operation. When you receive a promise, you can register your success or failure callbacks with the promise, enabling the promise to invoke the callback once a success or failure occurs.

Promise :-

A Promise is a feature of JavaScript that represents a single value that will be resolved (fulfilled or rejected) at some point in the future.

Handles one-time events.

Once a Promise is resolved or rejected, the result is final, and you can't emit new values.

Eagerly starts executing as soon as it is created.

You cannot "pause" or defer a Promise's execution.

Cannot be canceled once initiated.

Errors are handled via .catch().

Subscription :-

It  come from the RxJS library, which is commonly used in Angular for reactive programming. They represent a stream of multiple values over time.

Can emit multiple values over time

Can continue to emit values until it is completed or unsubscribed.

Lazy by default; does not start emitting values until you subscribe to it.

Offers powerful operators (e.g., map, filter, merge, combineLatest) for composing and transforming data streams.

Suited for complex asynchronous workflows, like combining multiple streams.

Can be canceled by unsubscribing.

Angular's AsyncPipe and takeUntil can help manage subscriptions efficiently.

.then is often used when dealing with Promises, such as with asynchronous operations like HTTP requests using the HttpClient service or other Promise-based APIs. .then is a method of a JavaScript Promise that allows you to handle the resolved value or execute further logic once the Promise is fulfilled.

Node is a powerful, open-source, cross-platform JavaScript runtime you install on your computer. It’s a platform for development tools and servers (or anything else).

Feauture are

Asynchronous and Event-Driven:

Built on V8 JavaScript Engine:

Package Management: using npm

Cross-Platform:

It is used in Build RESTful APIs or full-fledged web servers.

It is used in real-time apps like chat applications, online games, or collaborative tools using WebSocket libraries like socket.io.

Node.js is ideal for creating scalable microservices architecture.

You can use Node.js for lightweight IoT solutions or control hardware with libraries like johnny-five.

npm (Node Package Manager) is the default package manager for Node.js. It is a powerful tool used for managing JavaScript packages and dependencies. npm allows developers to install, share, and manage code libraries and tools for Node.js projects.

It is a web application or website that interacts with the user by dynamically updating the content within a single web page, rather than loading entirely new pages from the server.

When the user performs an action in the client, it sends a request to the server, which does something and returns information about the result—not an entirely new HTML page.

The client-side code listens for an answer from the server and itself decides what to do as a response without generating a new pageThis allows for a smoother and faster user experience, as only the necessary content is loaded and updated without refreshing the entire page.

Benefits are :-

Client-Side Rendering

Asynchronous Data Loading

Routing:

Performance

State Management

A directive is a class annotated with the @Directive() decorator.

A directive can’t have its own UI, but can be attached to a component or a regular HTML element to change their visual representation.

Directives are special markers in the DOM that extend HTML functionality. They allow you to attach behavior to DOM elements or manipulate their appearance and structure.

There are two types of directives in Angular:

Structural— The directive changes the structure of the component’s template.

Attribute— The directive changes the behavior or visual representation of an individual component or HTML element.

Structural Directives

These directives change the structure of the DOM by adding or removing elements.

Examples

NgIf

NgFor

ngSwitch, ngSwitchCase, ngSwitchDefault: Used for conditional rendering of multiple elements.

<div *ngIf="isVisible">This will be displayed if isVisible is true</div>

Sample Code for ngFor

app.component.ts

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

import { Observable} from 'rxjs';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent  {

  tasks = [

    {id: 1, title: 'Task 1', done: false},

    {id: 2, title: 'Task 2', done: true},

    {id: 3, title: 'Task 3', done: false},

    {id: 4, title: 'Task 4', done: true}

    ];

    }

app.component.html

<div *ngFor="let task of tasks">

  <input type="checkbox" [checked]="task.done">

  <div>{{task.title}}</div>

  </div>

  Attribute Directives

These directives modify the behavior or appearance of an existing DOM element.

ngClass: Adds or removes CSS classes based on a condition.

ngStyle: Dynamically applies inline styles.

NgControlName

NgModel Creates two-way data binding with input elements.

Example

<div [ngClass]="{ 'active': isActive }">This div will have the 'active' class if isActive is true</div>

ng generate directive highlight

highlight.directive.ts

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

@Directive({

  selector: '[appHighlight]'

})

export class HighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {

    this.changeBackgroundColor('yellow');

  }

  @HostListener('mouseleave') onMouseLeave() {

    this.changeBackgroundColor('blue');

  }

  private changeBackgroundColor(color: string) {

    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);

  }

}

app.component.html

<p appHighlight>Hover over this text to see the highlight effect.</p>

A service is a class that implements some business logic. Angular injects services into your components or other services using the dependency injection (DI) mechanism.

Services are classes that are responsible for handling data and logic that are not directly related to the view (UI). They are typically used for sharing data, logic, and functionality across different components in an Angular application.

Main featues of services :-

Separation of Concerns

Singleton Pattern

Reusability:

Dependency Injection

For creating services,

ng generate service testservice

Sample service code:-

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

@Injectable({

  providedIn: 'root' // This makes the service available throughout the app

})

export class TestService {

  constructor() { }

  getData() {

    return 'Hello from MyService!';

  }

}

To user a service in a component, we have to inject the service into a Component.

Sample Code

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

import { TestService } from './testservice.service';

@Component({

  selector: 'app-my-component',

  templateUrl: './my-component.component.html',

  styleUrls: ['./my-component.component.css']

})

export class MyComponent implements OnInit {

  data: string;

  constructor(private myService: TestService) { }

  ngOnInit(): void {

    this.data = this.myService.getData();

  }

}

Data binding in Angular is a mechanism for coordinating parts of a template with the component class in an Angular application. It allows you to display dynamic data in the UI and enables interaction with the data.

Generally, ther are 4 types.

1. Interpolation (String Interpolation)

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

title is a component property

2. Property Binding

Property binding allows you to set the property of an HTML element or component to a value in your component class.

<img [src]="imageUrl" alt="Image">

the src property of the img tag is bound to the imageUrl property of the component.

3. Event Binding

Event binding enables you to bind an event (such as a click) to a method in your component.

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

Here, when the button is clicked, the onClick() method in the component is executed.

4. Two-Way Binding

Two-way binding combines property binding and event binding in a single syntax. It is usually used in form elements like inputs, where the component property is updated when the user interacts with the element.

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

Decorators are special types of functions that allow you to add metadata to classes, properties, methods, and parameters. They are used to provide Angular with information about how to process and instantiate various components, directives, services, etc.

Examples

@Component - Used to define a component.

@NgModule -  Used to define an Angular module.

@Injectable - Marks a class as available for dependency injection.

@Input - Used to pass data from a parent component to a child component.

@Output - Used to emit events from a child component to a parent component.

@HostListener - Used to listen for events on the host element or any DOM element.

@HostBinding - Allows you to bind properties of the host element in a directive or component.

@ViewChild -  Allows you to get a reference to a child component, directive, or DOM element within a parent component.

@ContentChild - Used to get a reference to a projected content element in a component.

What are pipes in Angular ? how many types ?

Pipes are used to transform data in templates, such as formatting dates, numbers, or strings, or applying custom transformations.

Built-in pipes :

DatePipe: Formats a date value according to locale rules.

UpperCasePipe: Transforms text to all upper case.

LowerCasePipe: Transforms text to all lower case.

CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules.

DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.

PercentPipe: Transforms a number to a percentage string, formatted according to locale rules.

AsyncPipe: Subscribe and unsubscribe to an asynchronous source such as an observable.

JsonPipe: Display a component object property to the screen as JSON for debugging.

Pipes are classified into pure and impure based on how they handle changes in data.

Pure Pipes :

A pure pipe processes data only when the input data changes immutably. It does not respond to changes within objects or arrays unless a new reference is assigned.All Angular pipes are pure by default.

They are efficient since they only run when Angular detects changes in their input value

Use for transformations where data changes immutably, such as strings, numbers, or replacing an entire array or object.

Impure Pipes

An impure pipe processes data even if there are changes within the data (e.g., changes to properties of objects or array contents) without changing their reference.

It runs on every change detection cycle, regardless of whether the input value's reference changes.

Impure pipes are created by setting pure: false in the pipe decorator.

Pipes are used to transform the input data before displaying it in the view. You can create your own pipes for transforming data in your templates.

Sample code

First create a pipe - filter.pipe.ts

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

@Pipe({

  name: 'filter'

})

export class FilterPipe implements PipeTransform {

  transform(items: any[], searchTerm: any, searchBy: string) {

    // when our serach is undefined or null

    if (!searchTerm) {

      return items;

    }

    // when there is partial or full match of the search term

    return items.filter(item => {

      const currentItem = item[searchBy];

      return currentItem.toString().toLowerCase().includes(searchTerm.trim().toLowerCase());

    });

  }

}

app.component.ts

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

export interface Person {

  name: string;

  age: number;

  country: string;

}

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  people: Person[] = [];

  searchTerm: string;

  names = ['Kerala', 'TamilNadu', 'Kartanaka', 'Maharashtra', 'Madhyapradesh', 'Goa'];

  constructor() {

    this.names.forEach((e, i) => this.people.push({

      name: e,

      age: i + 20,

      country: 'India'

    }));

  }

}

app.component.html

<div>

  <input [(ngModel)]="searchTerm" placeholder="Filter">

  <ul>

    <li *ngFor="let person of people | filter: searchTerm: 'name'">

      {{person.name}} | {{person.age}} | {{person.country}}

    </li>

  </ul>

</div>

(Add forms module to app.module.ts)

Steps:

Declare an @Input() property in the child component.

Bind the property in the parent template.

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

child component

@Component({

  selector: 'app-child',

  template: `<p>Received from parent: {{ data }}</p>`,

})

export class ChildComponent {

  @Input() data!: string;

}

Parent component

<app-child [data]="'Hello from parent!'"></app-child>

Steps:

Declare an @Output() property in the child component.

Use an EventEmitter to emit events.

Bind the event in the parent template.

Child Component (child.component.ts):

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

@Component({

  selector: 'app-child',

  template: `<button (click)="sendData()">Send to Parent</button>`,

})

export class ChildComponent {

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

  sendData() {

    this.dataEmitter.emit('Hello Parent!');

  }

}

Parent Component (parent.component.html):

<app-child (dataEmitter)="handleData($event)"></app-child>

Parent Component (parent.component.ts):

handleData(data: string) {

  console.log('Received from child:', data);

}

Service (shared.service.ts):

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

import { BehaviorSubject } from 'rxjs';

@Injectable({

  providedIn: 'root',

})

export class SharedService {

  private messageSource = new BehaviorSubject<string>('Default Message');

  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {

    this.messageSource.next(message);

  }

}

Comp 1 (comp1.component.ts):

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

import { SharedService } from './shared.service';

@Component({

  selector: 'app-comp1',

  template: `<button (click)="sendMessage()">Send to Comp2 2</button>`,

})

export class Comp1Component {

  constructor(private sharedService: SharedService) {}

  sendMessage() {

    this.sharedService.changeMessage('Hello from comp  1!');

  }

}

Comp 2 (comp2.component.ts):

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

import { SharedService } from './shared.service';

@Component({

  selector: 'app-comp2',

  template: `<p>{{ message }}</p>`,

})

export class Comp2Component implements OnInit {

  message!: string;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {

    this.sharedService.currentMessage.subscribe((message) => {

      this.message = message;

    });

  }

}

For the communication between 2 unrelated components, you can also use shared service.

It is a powerful feature used to reference elements, components, or directives within a template. They are defined using the # symbol  and provide access to the associated DOM element, directive instance, or component.

Example for Referencing a DOM Element

<input #myInput type="text" placeholder="Type something" />

<button (click)="logValue(myInput.value)">Log Value</button>

Example for Referencing a Component

<input #myInput type="text" placeholder="Type something" />

<button (click)="logValue(myInput.value)">Log Value</button>

You can use  template variables for :-

Native DOM elements.

Angular components.

Angular directives.

Outputs of structural directives (e.g., *ngFor, *ngIf).

Change detection in Angular is a mechanism that keeps the view (HTML) and the component (TypeScript) in sync. It ensures that any changes in the component's state are reflected in the view, and vice versa.

Angular uses Zone.js to detect when asynchronous tasks (like HTTP calls, setTimeout, or user events) are completed and trigger change detection.

The NgZone service allows Angular to know when to run change detection.

Angular provides two strategies for change detection:

Default:

Angular checks the entire component tree to detect changes.

OnPush:

Angular checks the component and its children only when an input property of the component changes or an event is triggered within the component.

HTTP interceptors in Angular are a powerful mechanism for inspecting and transforming HTTP requests and responses. They are commonly used for tasks like adding authentication headers, logging, handling errors, and modifying requests globally.

The common uses of Interceptors are :-

Adding authentication headers to outgoing requests to a particular API.

Retrying failed requests with exponential backoff.

Caching responses for a period of time, or until invalidated by mutations.

Customizing the parsing of responses.

Measuring server response times and log them.

Collecting and batch requests made within a certain timeframe.

Automatically failing requests after a configurable deadline or timeout.

Regularly polling the server and refreshing results.

Interceptors are Services: An HTTP interceptor is a service that implements the HttpInterceptor interface.

Chained Execution: Multiple interceptors can be configured, and they execute in the order they are provided.

Request/Response Manipulation: You can modify outgoing requests and incoming responses.

Example 1 - How to Add values to HttpHeaders using interceptor

To create a interceptor,

ng generate interceptor MyInterceptor

Implement the HttpInterceptor interface:

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

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

import { Observable } from 'rxjs';

@Injectable()

export class MyInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // Clone the request to modify it

    const modifiedReq = req.clone({

      headers: req.headers.set('Authorization', 'Bearer YOUR_TOKEN_HERE')

    });

    console.log('HTTP Request intercepted:', modifiedReq);

    // Pass the modified request to the next handler

    return next.handle(modifiedReq);

  }

}

Register the Interceptor in AppModule

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

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

import { MyInterceptor } from './path-to-interceptor/my.interceptor';

@NgModule({

  providers: [

    {

      provide: HTTP_INTERCEPTORS,

      useClass: MyInterceptor,

      multi: true, // Allows multiple interceptors

    },

  ],

})

export class AppModule {}

Example 2 -

How to handle errors in the intercept method using catchError from RxJS.

You can handle errors in the intercept method using catchError from RxJS:

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

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

import { Observable, throwError } from 'rxjs';

import { catchError } from 'rxjs/operators';

@Injectable()

export class ErrorInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return next.handle(req).pipe(

      catchError((error: HttpErrorResponse) => {

        console.error('HTTP Error:', error);

        return throwError(() => new Error('An error occurred: ' + error.message));

      })

    );

  }

}

Example 3 - How to set HttpHeaders & calculate processing time of a Http Response using HttpInterceptor

We have to create 2 interceptors -

headers.interceptor.ts

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

import {

  HttpRequest,

  HttpHandler,

  HttpEvent,

  HttpInterceptor

} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()

export class HeadersInterceptor implements HttpInterceptor {

 intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {

    const API_KEY= 'test123';

     const req = request.clone({

        setHeaders :{

           API_KEY,

        }

     })

    return next.handle(req);

  }

}

http.interceptor.ts

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

import {

  HttpInterceptor,

  HttpRequest,

  HttpResponse,

  HttpErrorResponse,

  HttpHandler,

  HttpEvent,

} from '@angular/common/http';

import { Observable, throwError } from 'rxjs';

import { tap, catchError, finalize } from 'rxjs/operators';

@Injectable()

export class MyHttpInterceptor  implements HttpInterceptor {

  interval: any;

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const t0 = performance.now();

        console.log('processing request', request);

    this.interval = setInterval(() => {

      //console.log('how much time it took');

      const t1 = performance.now();

      const responseTime = (t1 - t0) / 1000;

      console.log(`Request took ${responseTime} ms since start`);

    }, 10);

    return next.handle(request).pipe(

      tap((ev: HttpEvent<any>) => {

        if (ev instanceof HttpResponse) {

          console.log('processing response', ev);

        }

      }),

      catchError((response) => {

        if (response instanceof HttpErrorResponse) {

          console.log('processing http error', response);

        }

        return throwError(() => new Error(`Invalid time`));

        //return Observable.throw(response);

      }),

      finalize(() => {

        const t1 = performance.now();

        const totalResponseTime = (t1 - t0) / 1000;

        console.log(`Request finished: took ${totalResponseTime} ms`);

        clearInterval(this.interval);

      }),

    );

  }

}

Create a service to call a http request.

users.service.ts

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

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

@Injectable({

  providedIn: 'root'

})

export class UsersService {

  constructor(private http:HttpClient) { }

  getAllUsers(){

    return this.http.get('https://jsonplaceholder.typicode.com/users');

}

}

Update both interceptors and service in app.module.ts

app.module.ts

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

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

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

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

import { AppComponent } from './app.component';

import { MyHttpInterceptor } from './http.interceptor';

import { HeadersInterceptor } from './headers.interceptor';

import {UsersService} from 'src/app/users.service';

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

@NgModule({

  imports:      [ BrowserModule, FormsModule, HttpClientModule ],

  providers: [UsersService,

    {provide: HTTP_INTERCEPTORS, useClass:HeadersInterceptor, multi: true},

    {provide: HTTP_INTERCEPTORS, useClass:MyHttpInterceptor, multi: true},

  ],

  declarations: [ AppComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

Then call the service in component file.

app.component.ts

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

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

import { UsersService } from 'src/app/users.service';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  users:any=[];

  constructor(private userService: UsersService) { }

  ngOnInit() {

    this.userService.getAllUsers().subscribe(d => {

       this.users = d;

    })

  }

}

Run the application & check header value and processing time from the browser.

Angular Material is a UI component library for Angular applications, designed to help developers create high-quality, consistent, and accessible user interfaces based on Google’s Material Design guidelines.

It provides a set of reusable, well-tested, and customizable UI components, enabling developers to focus on building applications without reinventing common UI elements.

The command for installing Angular Material is

ng add @angular/material

AutoComplete

The <mat-autocomplete>, an Angular Directive, is used as a special input control with an inbuilt dropdown to show all possible matches to a custom query.

Badge

Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.

Bottom Sheet

The MatBottomSheet service can be used to open Material Design panels to the bottom of the screen.

Button

Button Toggle

<mat-button-toggle> are on/off toggles with the appearance of a button.

Card

The <mat-card>, an Angular Directive, is used to create a card with material design styling and animation capabilities

Check Box

<mat-checkbox> provides the same functionality as a native <input type="checkbox"> enhanced with Material Design styling and animations.

Chips

Chips allow users to view information, make selections, filter content, and enter data.

DatePicker

The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar

Dialog

The MatDialog service can be used to open modal dialogs with Material Design styling and animations.

Divider

<mat-divider> is a component that allows for Material styling of a line separator with various orientation options

Expansion Panel

<mat-expansion-panel> provides an expandable details-summary view.

Form Field

<mat-form-field> is a component used to wrap several Angular Material components and apply common Text field styles

Grid List

mat-grid-list is a two-dimensional list view that arranges cells into grid-based layout

Icon

mat-icon makes it easier to use vector-based icons in your app.

Input

matInput is a directive that allows native <input> and <textarea> elements to work with <mat-form-field>

List

<mat-list> is a container component that wraps and formats a series of <mat-list-item>

Menu

<mat-menu> is a floating panel containing list of options.

Paginator

<mat-paginator> provides navigation for paged information, typically used with a table.

Progress bar

<mat-progress-bar> is a horizontal progress-bar for indicating progress and activity.

Progress Spinner

<mat-progress-spinner> and <mat-spinner> are a circular indicators of progress and activity.

Radio Button

<mat-radio-button> provides the same functionality as a native <input type="radio"> enhanced with Material Design styling and animations.

Select

<mat-select> is a form control for selecting a value from a set of options, similar to the native <select> element.

Sidenav

The sidenav components are designed to add side content to a fullscreen app.

Slider

<mat-slider> allows for the selection of a value from a range via mouse, touch, or keyboard, similar to <input type="range">.

SnackBar

MatSnackBar is a service for displaying snack-bar notifications.

Stepper

Angular Material's stepper provides a wizard-like workflow by dividing content into logical steps.

Table

The mat-table provides a Material Design styled data-table that can be used to display rows of data.

Tabs

Angular Material tabs organize content into separate views where only one view can be visible at a time.

TimePicker

A timepicker is composed of a text input and a dropdown menu, connected through the matTimepicker binding on the input.

Toolbar

<mat-toolbar> is a container for headers, titles, or actions.

Routing is a feature that enables navigation between different views or pages of an application. Angular's RouterModule provides a robust way to manage routes. It is defined in app-routing.module.ts

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

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

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';

const routes: Routes = [

  { path: '', redirectTo: '/home', pathMatch: 'full' }, // Default route

  { path: 'home', component: HomeComponent },

  { path: 'about', component: AboutComponent },

  { path: '**', redirectTo: '/home' }, // Wildcard route for a 404 page

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule],

})

export class AppRoutingModule {}

After creating Routes, you have to import it in app.module.ts

import { AppRoutingModule } from './app-routing.module';

imports: [

    BrowserModule,

    AppRoutingModule,

  ],

Add a <router-outlet> directive in the root app.component.html or wherever you want to display routed components:

<nav>

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

  <a routerLink="/about" routerLinkActive="active">About</a>

</nav>

<router-outlet></router-outlet>

Use routerLink to navigate between routes in your application:

You can also navigate programmatically using Angular's Router service:

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

export class NavigationComponent {

  constructor(private router: Router) {}

  goToAbout() {

    this.router.navigate(['/about']);

  }

If you want to create a route that matches any path (wildcard route) for navigation purposes, you typically define a route with path: '**'. This is useful for handling 404 pages or redirecting users when no other routes match.

Sample code

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

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

import { NotFoundComponent } from './not-found/not-found.component'; // Import your 404 component

const routes: Routes = [

  // Define your regular routes

  { path: '', component: HomeComponent }, // Default route

  { path: 'about', component: AboutComponent }, // Example route

  // Wildcard route for a 404 page

  { path: '**', component: NotFoundComponent }, // Catch-all route

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule],

})

export class AppRoutingModule {}

Routes are evaluated in order, so place the wildcard route (path: '**') last. If placed earlier, it will catch all paths and prevent other routes from being matched.

The NotFoundComponent is displayed when no other routes match.

It is allowing developers to listen for and respond to changes in navigation. These events are fired during the navigation lifecycle and can be used to track, debug, or perform actions at different stages of routing.

Main Router Events :-

 NavigationStart

It is occuring when navigation starts. It is useful for showing a loading spinner and logging the start of navigation.

RouteConfigLoadStart

It is triggered before lazy-loaded route configuration begins loading.

It is used for tracking the loading of lazy-loaded modules.

RouteConfigLoadEnd

It is t triggered after lazy-loaded route configuration has been loaded.

It is used fork knowing when lazy-loaded routes are ready.

NavigationEnd

It is triggered when navigation ends successfully.

It is used for tracking page views.

NavigationCancel

It is triggered when navigation is canceled.

It is used for handling canceled navigations due to guards or user actions and logging and debugging.

 NavigationError

It is triggered  when navigation fails due to an error.

It is used for logging or displaying error messages and redirecting to an error page.

GuardsCheckStart

It is triggered before route guards are checked.

It is used for debugging guards and logging gurad checks.

GuardsCheckEnd

It is triggerd after route guards are checked and passed or failed.

It is used for determining whether navigation is allowed or blocked.

ResolveStart

It is triggered before route resolvers are activated.

It is used for logging when resolvers start fetching data.

ResolveEnd

It is triggered  after route resolvers complete their tasks.

ChildActivationStart

It is triggered before a child route is activated.

It is used for debugging child route activations.

ChildActivationEnd

It is triggered after a child route is activated.

It is used for logging child route activations.

ActivationStart

It is triggered before a route is activated.

It is used for debugging route activations.

ActivationEnd

It is triggered after a route is activated.

It is used for logging route activations.

For debugging purposes, you can log router events in the browser’s console by using the enableTracing option (it works only in the root module):

RouterModule.forRoot(

routes,

{enableTracing: true}

)

Sample Demo for Router Events

app.component.ts file

import { Router, Event, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';

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

@Component({

  selector: 'app-root',

  template: `<router-outlet></router-outlet>`,

})

export class AppComponent implements OnInit {

  constructor(private router: Router) {}

  ngOnInit() {

    this.router.events.subscribe((event: Event) => {

      if (event instanceof NavigationStart) {

        console.log('Navigation started:', event.url);

      } else if (event instanceof NavigationEnd) {

        console.log('Navigation ended:', event.url);

      } else if (event instanceof NavigationError) {

        console.error('Navigation error:', event.error);

      }

    });

  }

}

The Router State is a tree of activated routes (i.e., ActivatedRoute) that represent the state of the router at a given time. It provides access to the current route and its associated data, parameters, and child routes.

RouterStateSnapshot:

A snapshot of the router state at a specific point in time.

Sample code

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

constructor(private route: ActivatedRoute) {

  // Access route parameters

  this.route.params.subscribe(params => {

    console.log(params['id']);

  });

  // Access query parameters

  this.route.queryParams.subscribe(queryParams => {

    console.log(queryParams['search']);

  });

RouterState:

Represents the current state of the router as a tree of ActivatedRoute instances.

Sample Code

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

constructor(private route: ActivatedRoute) {

  // Access route parameters

  this.route.params.subscribe(params => {

    console.log(params['id']);

  });

  // Access query parameters

  this.route.queryParams.subscribe(queryParams => {

    console.log(queryParams['search']);

  });

  // Access resolved data

  this.route.data.subscribe(data => {

    console.log(data['someKey']);

  });

}

@ViewChild is a decorator used to access and interact with a child component, directive, or DOM element in the component's template.

By using @viewchild we can achieve the following things,

Accessing template of same component

Accessing the template of child component

Example for accessing template of same component.

App.Component.html

<div> 

   <input #txtname type="text"> 

   <button (click)="TestFunc(txtname.value)" >Click Me</button> 

</div>

App.Component.ts

import { 

    Component, 

    ViewChild, 

    ElementRef 

} from '@angular/core'; 

@Component({ 

    selector: 'app-root', 

    templateUrl: './app.component.html', 

    styleUrls: ['./app.component.css'] 

}) 

export class AppComponent { 

    title = 'Temprefapp'; 

    @ViewChild('txtname', { 

        static: true 

    }) mytxt: ElementRef 

    TestFunc(val) { 

        debugger; 

        console.log(this.mytxt.nativeElement.value); 

    } 

Example for accessing template of child component.

Create 2 components salary & employee

salary.component.ts

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

@Component({

  selector: 'app-salary',

  templateUrl: './salary.component.html',

  styleUrls: ['./salary.component.css']

})

export class SalaryComponent {

  empsalary:number=0;

  message:string='';

  constructor() { }

  ngOnInit(): void {

  }

salaryIncrement(){

 this.empsalary=this.empsalary+500;

 this.message="Employee Incremented Salary: ";

}

salaryDecrement(){

  this.empsalary=this.empsalary-500;

  this.message="Employee Decremented Salary: "

}

}

salary.component.html

<h4>{{message}} {{empsalary}}</h4>

employee.component.ts

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

import { SalaryComponent } from '../salary/salary.component';

@Component({

  selector: 'app-employee',

  templateUrl: './employee.component.html',

  styleUrls: ['./employee.component.css']

})

export class EmployeeComponent {

  @ViewChild(SalaryComponent) salaryComponent:SalaryComponent;

  increment(){

    this.salaryComponent.salaryIncrement();

      }

    decrement(){

      this.salaryComponent.salaryDecrement();

    }

}

employee.component.html

<h4>Employee Parent Component</h4>

<button (click)="increment()">Increment Salary</button>

<p>&nbsp;</p>

<button (click)="decrement()">Decrement Salary</button>

<p>&nbsp;</p>

<app-salary></app-salary>

ViewChildren is a decorator that allows you to query and access multiple child components or elements from the template of a parent component.

It is often used when you need to interact with a collection of child components, directives, or DOM elements.

Sample code

hello.component.ts

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

@Component({

  selector: 'app-hello',

  template: `<h1>Hello {{name}}!</h1>`,

  styles: [`h1 { font-family: Lato; }`]

})

export class HelloComponent {

  @Input() name: string;

}

app.component.ts

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

import { HelloComponent } from './hello/hello.component';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements AfterViewInit {

  name = 'Angular';

  @ViewChildren(HelloComponent) hellos: QueryList<any>;

  ngAfterViewInit() {

     this.hellos.forEach(hello => console.log(hello));

  }

}

app.component.html

<app-hello name="Angular 6" ></app-hello>

<app-hello name="Angular 7" ></app-hello>

<app-hello name="Angular 8" ></app-hello>

ContentChild is a decorator used to access a single child element, component, or directive that is projected into the component using Angular's Content Projection. It allows the parent component to query and interact with content that is inserted into its view via <ng-content>.

The @ContentChildren decorator is used to query and interact with child components, directives, or elements that are projected into a component using <ng-content>. This is useful when creating reusable components that need to work with content provided by the parent.

Sample Code

app.component.ts

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

import { HelloComponent } from './hello/hello.component';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'ContentChildAndConetntChildrenDemo';

  student1 = [

    {'Id' : 1, 'Name': 'John Smith', 'Address': 'Texas', 'Age': 23}

  ]

  student2 = [

    {'Id' : 2, 'Name': 'Mel Gibson', 'Address': 'New york', 'Age': 38}

  ]

  student3 = [

    {'Id' : 3, 'Name': 'May rose', 'Address': 'London', 'Age': 22}

  ]

  }

app.component.html

<nav class="navbar navbar-light bg-light" style="padding: 30px;margin: 40px; justify-content:center">

  <span class="navbar-brand mb-0 h1">Angular Demo</span>

</nav>

<app-studentsdetail [students]="student1">

<h5 project #color>Student Id No: DEW</h5>

<h5 contact #color>Student Contact No: 78888</h5>

</app-studentsdetail>

<app-studentsdetail [students]="student2">

  <h5 project #color>Student Id No: HHG</h5>

  <h5 contact #color>Student Contact No: 45454</h5>

</app-studentsdetail>

<app-studentsdetail [students]="student3">

  <h5 project #color>Student Id No: PIU</h5>

  <h5 contact #color>Student Contact No: 454545</h5>

</app-studentsdetail>

studentsdetail.component.cs

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

import { AppComponent } from '../app.component';

@Component({

  selector: 'app-studentsdetail',

  templateUrl: './studentsdetail.component.html',

  styleUrls: ['./studentsdetail.component.css']

})

export class StudentsdetailComponent {

  @Input() students! : any

  @ContentChildren("color") contentColor!  : QueryList<any>

  ngAfterContentInit(): void {

      console.log(this.contentColor);

     this.contentColor.first.nativeElement.setAttribute('style','color: blue')

     this.contentColor.last.nativeElement.setAttribute('style','color: red')

  }

}

studentsdetail.component.html

<div *ngFor="let student of students"  class ="alert alert-secondary" role="alert" style="padding: 30px;margin: 40px;">

    <h3>Student Detail</h3>

    <h5>Student ID: {{student.Id}}</h5>

    <h5>Student Name: {{student.Name}}</h5>

    <ng-content select="[contact]"></ng-content>

    <h5>Student Address: {{student.Address}}</h5>

    <h5>Student Age: {{student.Age}}</h5>

    <ng-content select="[project]"></ng-content>

</div>

The EventEmitter is a class used for creating and handling custom events within a component or directive. It is part of Angular's @angular/core package and is commonly used in conjunction with @Output to allow parent components to listen to child component events.

It enables a child component to emit an event that the parent component can listen to.

The most frequent use of EventEmitter is in parent-child component communication, where the child emits an event, and the parent listens and reacts to it.

Sample code

Child Component (child.component.ts):

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

@Component({

  selector: 'app-child',

  template: `

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

  `,

})

export class ChildComponent {

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

  sendMessage() {

    this.messageEvent.emit('Hello from the child component!');

  }

}

Parent Component (parent.component.ts):

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

@Component({

  selector: 'app-parent',

  template: `

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

    <p>Message: {{ message }}</p>

  `,

})

export class ParentComponent {

  message: string = '';

  receiveMessage(event: string) {

    this.message = event;

  }

}

The routerLink directive is used for navigation between different routes in your application.

You can bind the routerLink value dynamically using Angular expressions.

You can specify routes as relative or absolute.

Sample Code

// app.component.ts

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

@Component({

  selector: 'app-root',

  template: `

    <nav>

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

      <a routerLink="/about" routerLinkActive="active">About</a>

      <a routerLink="/contact" routerLinkActive="active">Contact</a>

    </nav>

    <router-outlet></router-outlet>

  `,

  styles: [

    `

      .active {

        font-weight: bold;

        color: blue;

      }

    `,

  ],

})

export class AppComponent {}

<router-outlet> is a directive provided by the Angular Router module that serves as a placeholder or container for dynamically rendering routed components based on the current route configuration. It acts as a "view" where the Angular Router dynamically loads components based on the URL path.

Sample Code

Create 2 components

HomeComponent

<h1>Welcome to the Home Page!</h1>

AboutComponent

<h1>About Us</h1>

Add these two in app.component.html

app.component.html

<nav>

  <a routerLink="/">Home</a>

  <a routerLink="/about">About</a>

</nav>

<router-outlet></router-outlet>

Then add in Routing Configuration file (app-routing.module.ts)

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

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

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';

const routes: Routes = [

  { path: '', component: HomeComponent }, // Default route

  { path: 'about', component: AboutComponent },

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule],

})

export class AppRoutingModule {}

The LocationStrategy determines how the application manages its URLs and navigates between views. Angular provides two primary strategies for handling URLs:

1. PathLocationStrategy (default)

This strategy uses the HTML5 History API (pushState and popState) to manipulate the browser's URL without reloading the page. This results in clean URLs without a hash (#).

2. HashLocationStrategy

This strategy uses a hash (#) in the URL to separate the application route from the base URL. Everything after the # is managed by Angular, and the server does not see this part of the URL.

To implement it, you have to modify app-routing.module.ts

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

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

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

import { AppComponent } from './app.component';

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({

  declarations: [AppComponent],

  imports: [BrowserModule, RouterModule.forRoot(routes)],

  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],

  bootstrap: [AppComponent],

})

export class AppModule {}

When to use both :-

Use PathLocationStrategy if you want clean URLs and have control over the server configuration.

Use HashLocationStrategy if server configuration is not possible or for legacy browser support.

The routerLinkActive directive is used to add or remove CSS classes to an element based on whether the associated route is active.

Sample Code

<nav>

  <a[routerLink]="['/home']"outerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>

  <a [routerLink]="['/about']" routerLinkActive="active">About</a>

  <a [routerLink]="['/contact']" routerLinkActive="active">Contact</a>

</nav>

The active class will be applied to the <a> element corresponding to the current active route.

The Home link uses the exact option, so it will only be active if the URL is /home and not a child route like /home/details.

css

.active {

  font-weight: bold;

  color: blue;

}

This allows you to provide visual feedback to users on which route they are currently viewing.

Route Guards let you control various stages of a route navigation. While navigating from one

component to another, we need to make sure that the data that will be displayed is authorized for

the user, and if not, cancel the navigation.

A Router Guard can return an Observable<boolean> or a Promise<boolean>, and the router will wait for

Observable to resolve to either true or false:

If the Route Guard returns true, it will proceed with the navigation and display the view

If the Route Guard returns false, it will abort/cancel the navigation

Angular provides five types of route guards:

1. CanActivate

Determines if a user can navigate to a route.

Useful for restricting access to a route based on conditions (e.g., authentication or roles).

Implemented by creating a service that implements the CanActivate interface.

Example

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

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

@Injectable({

  providedIn: 'root'

})

export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(): boolean {

    const isLoggedIn = Boolean(localStorage.getItem('token'));

    if (!isLoggedIn) {

      this.router.navigate(['/login']);

      return false;

    }

    return true;

  }

}

2. CanActivateChild

Determines if a user can access child routes of a route.

Often used in combination with CanActivate.

Example

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

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

@Injectable({

  providedIn: 'root'

})

export class AdminGuard implements CanActivateChild {

  canActivateChild(): boolean {

    const isAdmin = Boolean(localStorage.getItem('isAdmin'));

    return isAdmin;

  }

}

3. CanDeactivate

Determines if a user can leave a route.

Useful for scenarios where you want to prevent users from losing unsaved changes.

Example

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

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

import { Observable } from 'rxjs';

export interface CanComponentDeactivate {

  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;

}

@Injectable({

  providedIn: 'root'

})

export class ConfirmGuard implements CanDeactivate<CanComponentDeactivate> {

  canDeactivate(component: CanComponentDeactivate): boolean {

    return component.canDeactivate ? component.canDeactivate() : true;

  }

}

4. Resolve

Pre-fetches data before a route is activated.

Ensures that required data is available when a component loads.

Example

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

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

import { Observable } from 'rxjs';

import { UserService } from './user.service';

@Injectable({

  providedIn: 'root'

})

export class UserResolver implements Resolve<any> {

  constructor(private userService: UserService) {}

  resolve(): Observable<any> {

    return this.userService.getUserData();

  }

}

5. CanLoad

Determines if a module can be loaded.

Useful for lazy-loaded modules.

Example

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

import { CanLoad, Route, UrlSegment, Router } from '@angular/router';

@Injectable({

  providedIn: 'root'

})

export class AdminModuleGuard implements CanLoad {

  constructor(private router: Router) {}

  canLoad(route: Route, segments: UrlSegment[]): boolean {

    const isAdmin = Boolean(localStorage.getItem('isAdmin'));

    if (!isAdmin) {

      this.router.navigate(['/not-authorized']);

      return false;

    }

    return true;

  }

}

Guards have to be  registered in the route configuration file.

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

import { AuthGuard } from './auth.guard';

import { AdminGuard } from './admin.guard';

import { UserResolver } from './user.resolver';

const routes: Routes = [

  {

    path: 'dashboard',

    component: DashboardComponent,

    canActivate: [AuthGuard],

    resolve: { userData: UserResolver },

    children: [

      {

        path: 'admin',

        component: AdminComponent,

        canActivateChild: [AdminGuard]

      }

    ]

  },

  {

    path: 'settings',

    loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule),

    canLoad: [AuthGuard]

  }

];

A "multiple router outlets" setup allows you to display different components in different areas of the application based on the routing configuration. Each router outlet can render different views based on navigation paths.

app.componet.html

<router-outlet></router-outlet> <!-- Default outlet -->

<router-outlet name="sidebar"></router-outlet> <!-- Named outlet for sidebar -->

<router-outlet name="footer"></router-outlet> <!-- Named outlet for footer -->

In your app-routing.module.ts, you define routes that specify which component should be rendered in which outlet. You can configure routes to use a named outlet by setting the outlet property.

// app-routing.module.ts

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

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

import { HomeComponent } from './home/home.component';

import { SidebarComponent } from './sidebar/sidebar.component';

import { FooterComponent } from './footer/footer.component';

const routes: Routes = [

  { path: '', component: HomeComponent },  // Default outlet

  { path: 'sidebar', component: SidebarComponent, outlet: 'sidebar' }, // Named outlet

  { path: 'footer', component: FooterComponent, outlet: 'footer' }, // Named outlet

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule],

})

export class AppRoutingModule {}

To navigate to a specific named outlet, you use the routerLink directive with the outlets property.

app.component.html

<!-- Link to display sidebar -->

<a [routerLink]="[{ outlets: { sidebar: ['sidebar'] } }]">Show Sidebar</a>

<!-- Link to display footer -->

<a [routerLink]="[{ outlets: { footer: ['footer'] } }]">Show Footer</a>

You can also navigate programmatically using Router:

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

// In your component

constructor(private router: Router) {}

navigateToSidebar() {

  this.router.navigate([{ outlets: { sidebar: ['sidebar'] } }]);

}

navigateToFooter() {

  this.router.navigate([{ outlets: { footer: ['footer'] } }]);

}

Lazy loading in Angular is a design pattern that helps improve the performance of applications by loading parts of the app only when they are needed. This reduces the initial load time and only loads the necessary resources for a particular route.

Sample code

Create a feature module

ng generate module feature --route feature --module app

In app-routing.module.ts file,configure lazy loading.

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

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

const routes: Routes = [

  {

    path: 'feature',

    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)

  },

  { path: '', redirectTo: '/home', pathMatch: 'full' },

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

By using loadChildren, Angular will only load the FeatureModule when the user navigates to the /feature route. This is where the lazy loading happens.

Configure lazy loading in feature-routing.module.ts also

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

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

import { FeatureComponent } from './feature.component';

const routes: Routes = [

  { path: '', component: FeatureComponent }

];

@NgModule({

  imports: [RouterModule.forChild(routes)],

  exports: [RouterModule]

})

export class FeatureRoutingModule { }

Preloading in Angular means loading the Lazy loaded Modules in the background asynchronously, while user is interacting with the app. This will help boost up the loading time of the app.

By Lazy loading the modules, we can reduce the initial download size of the app, and thus making app load quickly.

In order to enable pre-loading, mark the module with loadchildern in app-routing.module.ts and apply preloading.

const routes: Routes = [

  {path: "admin", loadChildren:'./admin/admin.module#AdminModule'},

];

 RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})

There are 2 types of strategies for this. PreloadAllModules & NoPreloading.

In NoPreLoading, it will disable all the preloading and it is the default.

RouterModule.forRoot(routes,

   {

      preloadingStrategy: NoPreloading

   }

 In PreloadAllModules strategy,

It  will preload all the lazy loaded modules.

RouterModule.forRoot(routes,

   {

      preloadingStrategy: PreloadAllModules

   })

SessionStorage is a built-in web storage mechanism provided by the browser that allows you to store data temporarily for the duration of the page session.

This data is cleared when the page session ends, such as when the browser tab is closed.

In order to set a value in SessionStorage,

sessionStorage.setItem('key', 'value');

In order to get a value in SessionStorage,

const value = sessionStorage.getItem('key');

In order to remove an item from SessionStorage,

sessionStorage.removeItem('key');

To clear all items from SessionStorage,

sessionStorage.clear();

In order to store complex objecs,

you need to serialize and deserialize complex objects using JSON.stringify and JSON.parse.

// Set an object

const user = { name: 'Smith', age: 50 };

sessionStorage.setItem('user', JSON.stringify(user));

// Get an object

const userData = sessionStorage.getItem('user');

const parsedUser = userData ? JSON.parse(userData) : null;

Reactive Forms provide a way to manage complex forms with greater control and flexibility. Reactive forms are defined in code, allowing you to build dynamic and highly customizable forms.

Main components of the reactive form

FormGroup: Represents the entire form. It groups form controls.

FormControl: Represents a single input element.

FormArray: Manages an array of form controls, allowing dynamic additions or deletions.

Validators: Used to enforce rules like required fields, minimum length, etc.

Template-driven forms in Angular provide a way to create forms using HTML templates and directives. They are easier to implement than reactive forms and are ideal for simple use cases where you don’t need advanced form validation or control.

The FormBuilder is part of the Reactive Forms Module and is used to simplify the creation of form controls, groups, and arrays. It provides a more concise way to build forms compared to manually instantiating FormGroup and FormControl.

RxJS (Reactive Extensions for JavaScript) is a powerful library used in Angular for handling reactive programming and working with asynchronous data streams.

RxJS libraries compose asynchronous and event-based Reactive programs using observable collections in JavaScript.

Its main uses :-

In HTTP Requests, RxJS Observables are used by Angular's HttpClient module to handle HTTP requests.

RxJS can handle user input events in a reactive way, such as form inputs or button clicks.

RxJS helps manage complex asynchronous workflows, combining data streams and handling concurrency.

Perfect for WebSocket communication, where data is pushed from the server.

Built-in operators like catchError allow elegant error handling in asynchronous operations.

Components of RxJs

Observable:

Represents a stream of data that can emit multiple values over time.

Used to handle asynchronous operations like HTTP requests, user inputs, or events.

RxJS Observables are used by Angular's HttpClient module to handle HTTP requests.

Observables are flexible and can be used with push or pull patterns:

Push: When using the push pattern, we subscribe to the source stream and react to new data as soon as it’s made available (emitted). You can listen to a stream and react accordingly.

Pull: When using the pull pattern, we’re using the same operations but synchronously.This happens when using arrays, generators, or iterables.

Because observables are data streams, you can query them using operators

implemented by the observable type

Observer:

Observers are classes that can respond to events, or things happening.

To respond, they must implement the following methods:

onNext: An observable calls this method when the observable emits an item. onNext takes the item emitted by the observable as a parameter.

onError : An observable calls this method when it fails to create the expected data or hits some other error, stopping the observable. The observable won’t make any more calls to onNext or onCompleted. The onError method takes an indication of what caused the error as its parameter.

onCompleted: An observable calls this method after it calls onNext for the last time, if there haven’t been any errors.

Subscription:

Represents the execution of an Observable. You subscribe to an Observable to start receiving its emitted values.A subscription is like a connection between an Observable and an Observer.

Operators:

Operators perform a variety of tasks. Their purpose is to make it more convenient to observe an observable. Operators do the following:

Create observables

Combine observables

Filter observables

Handle errors

Perform utilities

Most operators operate on an observable and return an observable. This allows you to apply operators one after the other, in a chain. Each operator in the chain modifies the observable that results from the operation of the previous operator.

1. HTTP Requests

Angular's HttpClient service returns Observables for making HTTP requests.

Sample Code

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

import { Observable } from 'rxjs';

constructor(private http: HttpClient) {}

getData(): Observable<any> {

  return this.http.get('https://api.example.com/data');

}

// Subscribing to the Observable

this.getData().subscribe(data => {

  console.log(data);

});

2. Event Handling

You can convert DOM events into Observables using Angular's fromEvent or reactive forms.

Sample code

import { fromEvent } from 'rxjs';

const button = document.getElementById('myButton');

const click$ = fromEvent(button, 'click');

click$.subscribe(event => {

  console.log('Button clicked', event);

});

3. Reactive Forms

Form controls in Angular use Observables to track value changes

Sample Code

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

const nameControl = new FormControl('');

nameControl.valueChanges.subscribe(value => {

  console.log('Value changed:', value);

});

4. Routing Events

Angular's Router provides Observables for tracking route changes.

Sample Code

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

constructor(private router: Router) {}

ngOnInit() {

  this.router.events.subscribe(event => {

    console.log(event);

  });

}

ElementRef is a wrapper around a native DOM element, providing a way to directly interact with and manipulate the DOM.

 The ElementRef class provides a property called nativeElement, which gives access to the underlying DOM element.

You can inject ElementRef into a component, directive, or service to gain access to the DOM element that the host element of the directive/component corresponds to.

ElementRef is used to manipulating DOM elements directly and Reading properties of DOM elements.

Sample Code

app.component.ts

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent   {

   title = 'Temprefapp'; 

  @ViewChild('txtname', { 

      static: true 

  }) mytxt: ElementRef 

  TestFunc(val) { 

      debugger; 

      console.log(this.mytxt.nativeElement.value); 

  } 

}

app.component.html

<div> 

    <input #txtname type="text"> 

    <button (click)="TestFunc(txtname.value)" >Click Me</button> 

 </div>

This is used with when working with Observables.These operators enable you to manipulate, filter, and transform streams of data in a declarative way.

Common RxJS Operators in Angular are :-

of: Creates an Observable from a static value or set of values.

from: Converts an array, Promise, or iterable into an Observable.

interval: Creates an Observable that emits sequential numbers at specified intervals.

timer: Emits after a delay and optionally emits periodically.

map: Applies a function to each emitted value.

mergeMap / flatMap: Projects each source value to an Observable and flattens them.

switchMap: Switches to a new inner Observable and cancels the previous one.

filter: Filters emitted values based on a condition.

take: Takes the first N values and completes.

takeUntil: Takes values until another Observable emits.

distinctUntilChanged: Emits only if the current value is different from the last.

merge: Combines multiple Observables, emitting values as they occur.

combineLatest: Combines latest values from multiple Observables.

forkJoin: Waits for all Observables to complete and emits the last value.

zip: Combines Observables, emitting arrays of corresponding values.

tap: Performs a side effect without modifying the stream.

delay: Delays the emissions of values.

retry: Retries the stream if an error occurs.

catchError: Catches and handles errors.

throwError: Creates an Observable that emits an error.

HTTP headers are used to pass metadata along with HTTP requests and responses. These headers can include authentication tokens, content type specifications, caching instructions, and more.

You typically use the HttpClient service to make HTTP requests and the HttpHeaders class to set headers.

Sample Code

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

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

@Injectable({

  providedIn: 'root',

})

export class ApiService {

  private apiUrl = 'https://example.com/api';

  constructor(private http: HttpClient) {}

  getData() {

    const headers = new HttpHeaders({

      'Content-Type': 'application/json',

      Authorization: 'Bearer YOUR_TOKEN_HERE',

    });

    return this.http.get(`${this.apiUrl}/data`, { headers });

  }

}

To access response headers, use the observe option with the value response.

this.http

  .get(`${this.apiUrl}/data`, { observe: 'response' })

  .subscribe((response) => {

    console.log(response.headers.get('Content-Type'));

  });

If you need to add or modify headers for all requests, use an HTTP_INTERCEPTORS provider to define a global interceptor.

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

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

@Injectable()

export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {

    const authReq = req.clone({

      setHeaders: {

        Authorization: 'Bearer YOUR_TOKEN_HERE',

      },

    });

    return next.handle(authReq);

  }

}

You have to Register the interceptor in your module:

app.module.ts

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

@NgModule({

  providers: [

    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },

  ],

})

export class AppModule {}

A BehaviorSubject is a type of Subject provided by the RxJS library. It is used to manage and broadcast state or values that can be subscribed to by multiple components or services.

You can use a behaviour subject whenever you want to create your own source of an observable stream. You can control what should be emitted and when.

A behaviour subject is both an observer as well as an observable. Therefore, it would be possible to directly call the subscribe method on the subject

It always holds the latest emitted value, and subscribers immediately receive this value upon subscription.

You must provide an initial value when creating a BehaviorSubject.

It is used to share state across components or services.

It  enable communication between unrelated components.

It track and react to form control states.

It ensure subscribers always have a value to work with.

Every Angular-powered form has an underlying model object that stores the form’s data. There are two approaches to working with forms in Angular: template-driven and reactive. These two approaches are exposed as two different APIs.

The main directives from FormsModule: NgModel,NgModelGroup, and NgForm,ngSubmit.

NgForm is the directive that represents the entire form. It’s automatically attached to every <form> element. NgForm implicitly creates an instance of the FormGroup class that represents the model and stores the form’s data.

In the context of the Forms API, NgModel represents a single field on the form. If an HTML element includes ngModel, Angular implicitly creates an instance of the FormControl class that represents the model and stores the fields’ data.

NgModelGroup represents a part of the form and allows you to group form fields together.

Like NgForm, it implicitly creates an instance of the FormGroup class. NgModelGroup creates a nested object inside the object stored in NgForm.value. All the child fields of NgModelGroup become properties of the nested object.

To enable reactive forms, add ReactiveFormsModule from @angular/forms to

the imports list of NgModule.

For template-driven forms, import FormsModule to the imports list of NgModule.

Directives for the reactive forms :-

FormGroup  - A class that represents the entire form or a subform; create its

instance in the TypeScript code of the component. Its API

formGroup Used in templates to bind the template element (for example,

<form>) to the explicitly created FormGroup; typically it’s assigned

to a variable declared in the component.

formGroupName Used in templates to bind a group of the template elements (for

example, <div>) to the explicitly created FormGroup.

FormControl Represents the value, validators, and validity status of an individual form control; create its instance in the TypeScript code of the component.

formControlName Used in templates in form elements to link an individual

FormControl instance to an HTML element.

FormArray Allows you to create a group of form controls dynamically and use the array indexes as control names.

Directives for the template driven forms :-

NgForm: - Implicitly created directive that represents the entire form; it creates an instance of FormGroup.

ngForm Used in templates to bind the template element (for example,

<form>) to NgForm; typically, it’s assigned to a local template variable.

NgModel Implicitly created directive that marks the HTML element to be

included in the form model.

ngModel Used in templates in form elements (for example, <input>) to be

included in the form model.

NgModelGroup Implicitly created directive that represents a part of the form, such as password and confirm password fields.

ngModelGroup Used in templates to name a part of the form for future reference.

Both template-driven and reactive forms

ngSubmit Intercepts the HTML form’s submit event

min :  A value can’t be less than the specified number; it can be used only with reactive forms.

max:  A value can’t be greater than the specified number; it can be used only with reactive forms.

required:  The form control must have a non-empty value.

requiredTrue:  The form control must have the value true.

email:  The form control value must be a valid email.

minLength:  The form control must have a value of a minimum length.

maxLength : The form control can’t have more than the specified number of characters.

pattern:  The form control’s value must match the specified regular expression.

The updateOn property allows you to control when the form control's value and validity are updated. It can be set to:

change (default): Updates on every value change.

blur: Updates when the control loses focus.

submit: Updates when the form is submitted.

Sample code for blur option in Reactive Forms :

app.component.ts

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

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent  {

  formGroup: FormGroup;

  constructor(private fb: FormBuilder) {

    this.formGroup = this.fb.group({

      email: [

        '',

        {

          validators: [Validators.required, Validators.email],

          updateOn: 'blur', // Validation will only run when the field loses focus

        },

      ],

    });

  }

  get emailControl() {

    return this.formGroup.get('email');

  }

  onSubmit() {

    if (this.formGroup.valid) {

      console.log('Form submitted successfully:', this.formGroup.value);

    } else {

      console.log('Form is invalid');

    }

  }

}

app.component.html

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

  <label for="email">Email:</label>

  <input id="email" formControlName="email" />

  <div *ngIf="emailControl?.invalid && emailControl?.touched">

    <small *ngIf="emailControl?.errors">Email is required.</small>

    <small *ngIf="emailControl?.errors">Invalid email format.</small>

  </div>

  <button type="submit">Submit</button>

</form>

1.       Touched.

This indicates whether the user has focused on the form control (input, checkbox, etc.) and then left it (blurred). If the user has interacted with the field, it is considered "touched".

touched is true when the field has been visited (focused and then blurred).

touched is false when the user has not interacted with the field.

2.       Untouched:

It means that the user has not interacted with the form control.

untouched is true when the user has never focused on the field.

untouched is false if the field has been focused and blurred.

3.       Pristine

This indicates whether the value of the form control has been modified. If a user changes the value of the control, it becomes "dirty". Otherwise, it's "pristine".

pristine is true when the user has not changed the value from its initial state.

pristine is false when the value has been modified.

Sample code

app.component.ts

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

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent  {

  name = 'Angular ' + VERSION.major;

  form=new FormGroup({

    control:new FormControl(null,Validators.required)

  })

  submit(form)

  {

    if (form.valid)

    {

      form.markAsPristine();

      console.log("submited")

    }

    else

      form.markAllAsTouched();

  }

}

app.component.html

<form [formGroup]="form">

  <input formControlName="control">

  <button (click)="submit(form)" [disabled]="!form.valid ||form.pristine">submit</button>

</form>

<pre>

Valid: {{form.valid}}

Untouched {{form.untouched}}

Pristine: {{form.pristine}}

Dirty: {{form.dirty}}

Touched : {{form.touched}}

</pre>

pristine means the user never interacted with the form control. dirty indicates that the initial value of the form control was modified, regardless of where the focus is. These properties can be used to display or hide.

With the template-driven API, you can use only directives in a component’s templates.

In template driven forms,directives like ngModel are used for two-way binding. Also Automatically syncs between the template and the component, which makes it less verbose but harder to debug in complex scenarios.

Validation relies on Angular’s built-in directives for validation (e.g., required, minlength).Custom validators are more challenging to implement.

Testing is more challenging because the logic is intertwined with the template.

Highly scalable and more suitable for large, dynamic forms.

Adding or removing controls dynamically is not straightforward.

In Reactive forms,It is Built programmatically in the component class.

Uses FormGroup, FormControl, and FormBuilder to define the form structure.

It uses an explicit data flow model, meaning form controls are updated explicitly via the FormControl or FormGroup objects.

It offers better control over form data and validation.

Validation logic is defined in the component using validators (Validators.required, Validators.minLength, etc.).

Custom validators are easier to create and reuse, and dynamic validations are straightforward to implement.

It is easier to test since the form logic is encapsulated in the component class.

It is highly scalable and more suitable for large, dynamic forms.

It is built for dynamic form handling; adding, removing, or modifying form controls is straightforward.

When to use Template-Driven Forms:-

Use for small, simple forms with basic validation needs.

Best for quick prototyping or forms that don’t require high customization.

When to use Reacive Forms

Use for complex forms, dynamic validations, or forms that need advanced features like conditional fields, multi-step forms, or reusable form logic.

Ideal for enterprise-level applications where maintainability and scalability are key.

@HostBinding and @HostListener are decorators used for interacting with the host element of a component or directive. These decorators are primarily used to bind properties and listen to events on the host element from within the component or directive.

@HostBinding allows you to bind a property of the host element to a property of the component or directive. This is useful when you want to manipulate the host element’s properties, such as adding or removing classes, setting attributes, or binding style properties.

@HostListener allows you to listen for events on the host element. You can define methods in your component or directive that will be triggered when a particular event occurs on the host element.

Sample Code

Create a directive - change-attribute.directive.ts

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

@Directive({

  selector: '[appChangeAttribute]'

})

export class ChangeAttributeDirective {

  constructor() { }

  randomColors: string[] = ['tomato', 'orange', 'dodgerBlue', 'mediumSeaGreen', 'gray', 'slateBlue', 'violet', 'lightGray', 'red', 'green'];

  flag = true;

  @HostBinding('style.background-color') bcColor;

  @HostBinding('style.color') color;

  @HostBinding('class.active') activeClass;

  // @HostBinding('disabled') isDisabled;

  @HostListener('click') onClick() {

    let randomIndex = Math.floor(Math.random() * 10);

    this.bcColor = this.randomColors[randomIndex];

    randomIndex = Math.floor(Math.random() * 10);

    this.color = this.randomColors[randomIndex];

    this.activeClass = this.flag;

    // this.isDisabled = this.flag;

    this.flag = !this.flag;

  }

}

app.component.ts

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

@Component({

  selector: 'app-root',

   templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  name = 'Angular';

  blueColor = '#0000FF';

  orangColor = '#FFA500';

}

app.component.html

<button appChangeAttribute>

  Hello the parent of this div has change attribute directive. Click me to change color

</button>

:host is a selector that is used in the context of component styling. It allows you to target the host element of a component, which is the element where the component is instantiated in the template. This can be useful when you want to apply styles or do specific actions to the component's wrapper element, the one that hosts the component.

Sample code.

create a component - second.component.html

<h2>

    Host Style Demo

    </h2>

second.component.css

:host{

    display: block;

    height: 100px;

    background: rgb(128, 0, 30);

  }

      :host(.active){

    background: rgb(255, 247, 0);

  }

  :host-context(.theme-light) {

    background-color: rgb(76, 42, 172);

  }

app.component.html

<div class="theme-light">

          <app-second class="active"></app-second>

</div>

The NgClass directive is used to dynamically add or remove CSS classes to/from an HTML element based on an expression. This allows for more flexible styling depending on the application's state or logic. 

Sample Code

app.component.css

h2 {

    color: darkgreen;

}

  .Success {

    color: black;

    font-size: medium;

    width: 350px;

    padding: 20px;

    background: lightgreen;

}

  .Error {

    color: black;

    font-size: medium;

    width: 350px;

    padding: 20px;

    background: red;

}

  .Warning {

    color: black;

    font-size: medium;

    width: 350px;

    padding: 20px;

    background: yellow;

}

app.component.ts

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

@Component({

  selector: 'app-root',

   templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  isSuccess: boolean = false;

    isError: boolean = false;

    isWarning: boolean = false;

    message: string = '';

      Success() {

        this.isSuccess = true;

        this.isError = false;

        this.isWarning = false;

        this.message = 'Success Clicked!';

    }

      Error() {

        this.isError = true;

        this.isSuccess = false;

        this.isWarning = false;

        this.message = 'Danger Clicked!!';

    }

      Warning() {

        this.isWarning = true;

        this.isError = false;

        this.isSuccess = false;

        this.message = 'Warning Clicked!!';

    }

}

app.component.html

<div class="container">

  <div class="row">

      <div class="col-xs-12">

          <h2>Welcome to GFG!!!</h2><br>

          <button class="btn btn-success"

                  (click)="Success()">

                Toggle Success

            </button>  

          <button class="btn btn-danger"

                  (click)="Error()">

                Toggle Error

            </button> 

          <button class="btn btn-warning"

                  (click)="Warning()">

                Toggle Warning

            </button> 

          <h3 class="display"

              [ngClass]="{ 'Success': isSuccess, 

                           'Error': isError ,  

                           'Warning':isWarning}">

              {{message}}

          </h3>

      </div>

  </div>

</div>

app.component.ts

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

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

@Component({

  selector: 'app-root',

   templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  matrix3D: number[][][] = [

    [

      [1, 2, 3],

      [4, 5, 6],

      [7, 8, 9]

    ],

    [

      [10, 11, 12],

      [13, 14, 15],

      [16, 17, 18]

    ]

  ];

}

app.component.html

<div *ngFor="let matrix2D of matrix3D">

  <table>

    <tr *ngFor="let row of matrix2D">

      <td *ngFor="let cell of row">

        {{ cell }}

      </td>

    </tr>

  </table>

</div>

e2e - Folder for testing files

node_modules - Folder for project node dependencies

src - folder for project source codes

.editorconfig - Editor Configuration file

angular.json - CLI configuration file

package.json - Node dependencies configuration file

README.md Readme informational file, contains information on CLI commands

Bootstrapping in Angular refers to the process of initializing and launching an Angular application. It involves setting up the Angular framework, loading the root module, and rendering the application in the browser.

The steps involved when he starter project bootstraps :-

When we go to localhost:4200, the following happens.

The web browser opens the file index.html by default.

The browser loads the script files on the end. This includes main.bundle.js, which is a transpiled version of the typescript file main.tsThis is our main app entry point.

Main.bundle.js loads some modules then calls the following Angular system code:

platformBrowserSpecific().bootstrapModule(AppModule)

AppModule is loaded—it’s the root Angular module used to bootstrap the application.

The AppModule bootstraps with the AppComponent , injecting the component into the space between the start and end tags app-root:

<app-root>Loading...</app-root>

--flat - Generates a cli project with a flat file structure, not generating each component in its own directory.

--inline-template :- Generates components with inline templates  Component template markup will be generated within the component rather than in a separate file.

--inline-style :- Generates components with inline styles. Component styles will be generated within the component rather than in a separate file.

----skip-tests:- Generates component without the unit testing ‘spec’ files that are normally generated for you by default.

--minimal :-Generates a minimal cli project with inline templates, styles and without tests.

--routing :- is used to create a new Angular project with routing functionality enabled.Routing Module: The AppRoutingModule file (app-routing.module.ts) is added to manage routes in the project.

The code is minified to reduce file size.

Whitespace, comments, and unnecessary code are removed.

This improves load time and performance.

Angular templates are precompiled into JavaScript during the build process.

This eliminates the need for Angular to compile templates in the browser, improving startup time.

Unused parts of your code or libraries are removed from the final bundle.

This ensures that only necessary code is included, reducing the bundle size.

Generates separate bundles for modern and older browsers.

Angular sets production mode, which disables assertions and checks meant for development.

Enables optimizations like dead code elimination.

The output is placed in the dist/ directory by default.

Ahead-of-Time (AOT) Compilation in Angular is a mechanism that compiles Angular HTML templates and TypeScript code into efficient JavaScript code before the browser downloads and runs the application.

This compilation happens during the build process, as opposed to Just-in-Time (JIT) compilation, which happens in the browser at runtime.

Benefits of AOT Compilation :-

Improved Performance:

Smaller Bundles:

Template Error Detection:

Faster Rendering:

Better Security:

You can run your app with aot compilation on with the following command:

ng serve -aot

This can be very useful in finding errors in advance in your templates.

One-way data binding:

Data flows in one direction, typically from the component (model) to the view (template) or vice versa. In Angular, this is denoted by square brackets [] for property binding (from component to template) and parentheses () for event binding (from template to component).

Examples

<img [src]="imageUrl">

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

<p>

Length: {{title.length}}

</p>

Two-way databinding :

Data flows both ways, meaning changes in the model update the view and changes in the view update the model. In Angular, this is achieved using the ngModel directive, which combines property binding and event binding in a single notation using [()].

Sample Code

Add Forms Module to app.module.ts

app.component.ts

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  fullName: string = "Hello TwoWay Binding";   

}

app.component.html

<h2>Two-way Binding Example</h2>   

   <input [(ngModel)]="fullName" /> <br/><br/>   

<p> {{fullName}} </p>

Shared modules are a common pattern used to organize and reuse functionality across different parts of an application.

They are particularly useful for grouping reusable components, directives, pipes, and services that are needed in multiple feature modules or components.

Services provided in a shared module should generally not have stateful logic, as they can create multiple instances when the shared module is imported in multiple places. Instead, services with shared state should be provided in the root module.

Sample Code

Create a share module called Shared.module.ts using CLI command. You can use this shared module in another feature module by referering it inside that module. For example,

import { SharedModule } from '../shared/shared.module';

Use shared modules to encapsulate and organize reusable functionality for better code maintenance and readability.

Constructor is used for initializing the class and injecting dependencies.

It's a standard TypeScript/JavaScript feature

It is executed when the class is instantiated

It is often used to set up services or other dependencies needed by the component or service.

OnInit is a  lifecycle hook in Angular that allows you to write initialization logic that depends on component inputs or other bindings.

OnInit is called after Angular initializes the component's inputs and runs change detection. This ensures all bindings and properties are ready.

OnInit is sude to perform additional setup tasks that require the component to be fully initialized (e.g., fetching data, accessing bound properties).

In the case of OnInit, the component needs to implement the OnInit interface and define the ngOnInit method.

NgOnChanges is a lifecycle hook in Angular that is called when any data-bound property of a directive or component changes. It is primarily used to respond to changes in the component's input properties.

It is invoked before the ngOnInit lifecycle hook and whenever an input property changes during the component's lifecycle.

Tracks changes to properties bound with the @Input decorator.

Receives a SimpleChanges Object: Provides metadata about the current and previous values of the changed input properties.

NgDoCheck is a lifecycle hook in Angular that allows developers to perform custom change-detection logic.

 It is part of Angular's core lifecycle hooks and is called during every change-detection cycle, whether the change is triggered by data-binding, user interaction, or other events.

NgDoCheck is called on every change-detection cycle, while OnChanges is only triggered when Angular detects changes to input-bound properties of a component.

NgDoCheck provides a broader, more general approach to detect changes, whereas OnChanges is specific to input-bound properties.

Fragments are often used in the context of routing to navigate to a specific section of a page using anchor tags or fragment identifiers. Fragments are denoted by a hash (#) followed by the identifier.

You can use the [routerLink] directive with a fragment attribute to navigate to a specific section of a page.

<a [routerLink]="'/about'" fragment="section1">Go to Section 1</a>

<a [routerLink]="'/about'" fragment="section2">Go to Section 2</a>

Deep linking in Angular refers to enabling users to navigate to specific parts of your application directly via a URL. It leverages Angular's routing capabilities, allowing you to create URLs that map to specific components, views, or states in your application.

Sample Code

Create 3 components - Home,About,Product

add following codes in app-routing.module.ts

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

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

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';

import { ProductComponent } from './product/product.component';

const routes: Routes = [

  { path: '', component: HomeComponent },

  { path: 'about', component: AboutComponent },

  { path: 'product/:id', component: ProductComponent }, // Deep linking example

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

Add in main parent componnet, ie app.component.html

<nav>

    <a routerLink="/">Home</a>

    <a routerLink="/about">About</a>

    <a [routerLink]="['/product', 42]">Product 42</a>

  </nav>

  <router-outlet></router-outlet>

Product.component.html

<p>Product ID: {{ productId }}</p>

Product.component.ts

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

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

@Component({

  selector: 'app-product',

  templateUrl: './product.component.html',

  styleUrls: ['./product.component.css']

})

export class ProductComponent implements OnInit {

  productId!: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {

    this.route.paramMap.subscribe(params => {

      this.productId = params.get('id')!;

    });

  }

}

Run the application.

Create a component user.component.ts,user.component.html

app-routing.module.ts

const routes: Routes = [

  { path: 'user', component: UserComponent },

];

user.component.ts

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

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

@Component({

  selector: 'app-user',

  templateUrl: './user.component.html',

  styleUrls: ['./user.component.css']

})

export class UserComponent {

  userId!: string;

  orderby!:string;

  category!:string;

  constructor(private route: ActivatedRoute) {}

  //

  ngOnInit() {

    console.log('exe3cute');

    this.route.queryParams

      .subscribe(params => {

        //console.log(params); // { orderby: "price" }

        this.orderby = params.orderby;

        this.category = params.category;

        console.log(this.orderby); // price

        console.log(this.category); // price

      }

    );

  }

}

app.component.html

<app-user></app-user>

Run application with url

http://localhost:4200/user?orderby=price&category=fiction

In Angular, the HttpClient is a powerful and flexible service used for making HTTP requests.

The Angular Http client is a service that you can inject into your classes to perform HTTP communication with a server. This service is available through the new Angular  Http Client module @angular/common/http.

Features of Http Client :-

It supports GET, POST, PUT, DELETE, PATCH requests.

GET :- In order to get resources from the server.

POST - It typically sends the data in the

request body.

PUT -  it’s typically used to update a resource rather than create it.

DELETE - is used to remove a resource from the server.

PATCH - 1.    To update only a portion of data.It’s not idempotent.

2.       It doesn’t have length restrictions.

3.       It’s not cacheable.

4.       The request uses HTTP body.

5.       The response is returned as HTTP header

Http client uses Interceptors for request/response modification.

Http client uses Observables from RxJS for asynchronous operations.

Http client supports Error handling and retry logic.

Import the HttpClientModule in app.module.ts

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

imports: [

    BrowserModule,

    HttpClientModule, // Add this

  ],

Inject HttpClient into a Service or Component:

To use in a Component by the help of a service,

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

import { DataService } from './data.service';

@Component({

  selector: 'app-data',

  template: `

    <div *ngIf="data">

      <pre>{{ data | json }}</pre>

    </div>

  `

})

export class DataComponent implements OnInit {

  data: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {

    this.dataService.getData().subscribe({

      next: (response) => this.data = response,

      error: (err) => console.error(err),

    });

  }

}

You can customize headers or other request options.

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

getDataWithHeaders(): Observable<any> {

  const headers = new HttpHeaders({

    'Authorization': 'Bearer my-token',

    'Custom-Header': 'value'

  });

  return this.http.get(this.apiUrl, { headers });

}

The async pipe subscribes to an observable or promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes.

 When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

Sample Code

Add Httpclient moduel to app.module.ts

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

 imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule,

    HttpClientModule

  ],

app.component.ts

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

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

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

import { map } from 'rxjs/operators';

import { Observable } from 'rxjs';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent  {

  _result: any;

constructor(private _http: HttpClient) {}

ngOnInit() {

this._result =

this._http.get<Array<any>>

("http://jsonplaceholder.typicode.com/posts")

.pipe(

map(

response => {

let titles = '';

for (const responseItem of response){

titles += responseItem['title'];

}

return titles;

console.log(titles);

console.log('executed');

}

)

)

}

}

app.component.html

<h1>Post Title Names</h1>

<p>{{_result|async}}</p>

NgForm

Stores state information for the form,

Stores Values for all the controls inside the form

Stores Fields in the form

FormGroup

Stores the value and validity state of a group of FormControl instances

FormControl

Stores the value and validity state of an individual control

FormArray

This is used to track the value and state of multiple FormControls, FormGroups, or

FormArrays. It’s useful for dealing with multiple form objects and tracking overall validity and state.

ng-touched :-  Style applied if control has lost focus

ng-untouched:-  Style applied if control hasn’t lost focus yet

ng-valid:  Style applied if control passes validation

ng-invalid:  Style applied if control doesn’t pass validation

ng-dirty : Style applied if user has already interacted with the control

ng-pristine : Style applied if user hasn’t interacted with the control yet

Validators.required

Ensures the field is not empty.

Validators.minLength(length)

Ensures the field has at least length characters.

Validators.maxLength(length)         

Ensures the field has at most length characters.

Validators.pattern(regex)           

Validates the input against a regular expression.

Validators.min(value)   

Ensures the number is not less than the specified value.

Validators.max(value)  

Ensures the number is not more than the specified value.

Validators.email  

Ensures the input is a valid email format.

Sample Code

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

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

@Component({

  selector: 'app-example-form',

  template: `

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

      <label for="username">Username:</label>

      <input id="username" formControlName="username" />

      <div *ngIf="form.controls['username'].errors?.['required']">

        Username is required.

      </div>

      <label for="email">Email:</label>

      <input id="email" formControlName="email" />

      <div *ngIf="form.controls['email'].errors?.['email']">

        Invalid email format.

      </div>

      <button type="submit" [disabled]="form.invalid">Submit</button>

    </form>

  `,

})

export class ExampleFormComponent {

  form: FormGroup;

  constructor(private fb: FormBuilder) {

    this.form = this.fb.group({

      username: ['', Validators.required],

      email: ['', [Validators.required, Validators.email]],

    });

  }

  onSubmit() {

    console.log(this.form.value);

  }

}

Pipes are used to transform data in templates. They are very helpful for formatting and displaying data in a user-friendly way.

Some common built-in-pipes are :-

 DatePipe - Formats a date value according to locale rules.

UpperCasePipe - Transforms text to uppercase.

 LowerCasePipe -Transforms text to lowercase.

TitleCasePipe - Capitalizes the first letter of each word in a string.

DecimalPipe - Formats numbers with decimal points and grouping separators.

CurrencyPipe - Formats numbers as currency.

PercentPipe - Converts a number to a percentage string.

 SlicePipe - Extracts a subset of an array or a string.

JsonPipe -Converts an object into a JSON string.

AsyncPipe - Resolves and displays the value of a Promise or Observable.

KeyValuePipe - Converts an object or map into an array of key-value pairs.

Sample Code

app.component.ts

dt = new Date();

app.component.html

<p>

    Lowercase: {{ "Lower Case Example" | lowercase }}

    </p>

    <p>

    Uppercase: {{ "Upper Case Example" | uppercase }}

    </p>

    <p>

    Currency: {{ 2012.55 | currency }}

    </p>

    <p>

    UK Pound Currency: {{ 2012.55 | currency: 'gbp':true }}

    </p>

    <p>

    Percentage: {{ 0.5 | percent }}

    </p>

    <p>

    Date: {{ dt | date }}

    </p>

    <p>

    Special Date Format: {{ dt | date:'yMMMMEEEEd' }}

    </p>

View Encapsulation in Angular is a mechanism that determines how styles defined in a component affect the component itself and other parts of the application. It is used to control the scope of the styles applied in an Angular application to avoid conflicts and ensure that styles are applied only where intended.

Angular provides three strategies for view encapsulation, defined by the ViewEncapsulation enum.

1.Emulated (Default)

Angular emulates Shadow DOM behavior by adding unique attribute selectors to the component's host and its child elements. This ensures that styles defined in a component only affect that component.

2. None

Styles are applied globally, without any encapsulation. The styles defined in the component can affect other parts of the application.

3. ShadowDom

 Angular uses the native Shadow DOM available in modern browsers. Styles are scoped to the component using the Shadow DOM's inherent encapsulation.

What is valueChanges  used with FormControl ?

The Angular Forms API  offers ready-to-use observables that push notifications about important events that are happening with the entire form or with form control. They are valueChanges & statusChanges

valueChanges is an observable provided by Angular's FormControl, FormGroup, and FormArray classes. It emits events whenever the value of the associated control changes. This is commonly used for real-time tracking of form input values or for reacting to form changes dynamically.

Sample code for ValueChanges

app.component.html

<input [formControl]="nameControl" placeholder="Enter your name">

    <p>Your name: {{ name }}</p>

app.component.ts

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

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent   {

   nameControl = new FormControl('');

  name: string | null;

  constructor() {

    // Subscribe to valueChanges

    this.nameControl.valueChanges.subscribe(value => {

      this.name = value;

    });

  }

}

Add Formsmodule & ReactiveFormsModule in app.module.ts

StatusChanges

You can monitor the status of a form control using the statusChanges observable provided by Angular's FormControl. This observable emits whenever the validation status of the form control changes.

Sample Code

app.component.ts

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

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  myForm!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {