Angular — all questions in one page

Angular is a TypeScript-based open-source web application framework developed by Google. It is used for building single-page applications (SPAs) with a component-based architecture.

A component is a fundamental building block of Angular applications. It consists of an HTML template, a CSS stylesheet, and a TypeScript class that defines the behavior and data of the component.

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

@Component({
    selector: 'app-example',
    template: '<h1>Hello, Angular!</h1>',
    styles: ['h1 { color: blue; }']
})
export class ExampleComponent {}
            

A service in Angular is a class that provides a specific functionality that can be shared across components. Services are used to handle data operations and business logic.

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

@Injectable({
    providedIn: 'root'
})
export class ExampleService {
    getData() {
        return 'Service Data';
    }
}
            

Angular CLI (Command Line Interface) is a tool used to automate the workflow of Angular applications. It helps with creating new projects, generating components, and running development servers.

To create a new Angular component using Angular CLI, you can run the command:

ng generate component component-name

or

ng g c component-name

Data binding is the mechanism to synchronize data between the model and the view. Angular supports several types of data binding: interpolation, property binding, event binding, and two-way data binding.

<input [(ngModel)]="name" />
<p>Hello, {{ name }}!</p>
            

Directives are classes that add behavior to elements in your Angular applications. They are used to manipulate the DOM or add new behavior to elements.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef, renderer: Renderer2) {
        renderer.setStyle(el.nativeElement, 'backgroundColor', 'yellow');
    }
}
            

Angular Router is used for navigating between different views or pages in a single-page application. It allows for routing configurations and route parameters.

Routes are defined in the `RouterModule` configuration. Each route maps a path to a component.

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 },
    { path: 'about', component: AboutComponent }
];

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

Angular modules are classes that group related components, services, directives, and pipes. They help to organize and manage the application structure.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

Dependency injection is a design pattern used to implement IoC (Inversion of Control). In Angular, it allows you to inject services and other dependencies into components and services.

`ngModel` is used for two-way data binding. It binds a form input element to a property in the component.

<input [(ngModel)]="name" />
<p>Welcome, {{ name }}!</p>
            

An Angular pipe is a way to transform data in the template. Pipes are used to format or transform data before displaying it to the user.

<p>{{ birthday | date:'longDate' }}</p>
            

Angular supports template-driven and reactive forms. Template-driven forms use directives in the template, while reactive forms use FormControl and FormGroup classes.

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

@Component({
    selector: 'app-form',
    template: `
    <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
        <input formControlName="name" />
        <button type="submit">Submit</button>
    </form>
    `
})
export class FormComponent {
    formGroup: FormGroup;

    constructor(private fb: FormBuilder) {
        this.formGroup = this.fb.group({
            name: ['']
        });
    }

    onSubmit() {
        console.log(this.formGroup.value);
    }
}
            

`ngIf` is a structural directive used to conditionally include or exclude elements from the DOM based on a boolean expression.

<div *ngIf="isVisible">Content to show when isVisible is true</div>
            

You can pass data from a parent component to a child component using @Input properties.

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

@Component({
    selector: 'app-child',
    template: '<p>{{ data }}</p>'
})
export class ChildComponent {
    @Input() data: string;
}

@Component({
    selector: 'app-parent',
    template: '<app-child [data]="parentData"></app-child>'
})
export class ParentComponent {
    parentData = 'Hello from parent!';
}
            

`ngFor` is a structural directive used to iterate over a list or array and render a template for each item.

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

`AppModule` is the root module of an Angular application. It is responsible for bootstrapping the application and declaring the components, directives, and services that belong to the module.

Routes are defined using the `RouterModule` with an array of route configurations that map URL paths to components.

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 },
    { path: 'about', component: AboutComponent }
];

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

Lifecycle hooks are methods that allow you to tap into key moments in the lifecycle of a component or directive, such as initialization and destruction.

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

@Component({
    selector: 'app-example',
    template: '<p>Example component</p>'
})
export class ExampleComponent implements OnInit, OnDestroy {
    ngOnInit() {
        console.log('Component initialized');
    }

    ngOnDestroy() {
        console.log('Component destroyed');
    }
}
            

`ngClass` is used to dynamically add or remove CSS classes to elements based on the evaluation of expressions.

<div [ngClass]="{'active': isActive, 'inactive': !isActive}">Content</div>
            

`ngSwitch` is used to conditionally display one of many elements based on the value of an expression.

<div [ngSwitch]="currentColor">
    <div *ngSwitchCase="'red'">Red</div>
    <div *ngSwitchCase="'blue'">Blue</div>
    <div *ngSwitchDefault>Default</div>
</div>
            

`ngForTrackBy` helps Angular track which items have changed, are added, or are removed by providing a unique identifier for each item in the list.

<div *ngFor="let item of items; trackBy: trackById">
    {{ item.name }}
</div>

trackById(index: number, item: any): number {
    return item.id;
}
            

`ngIf` can be used with `else` to provide an alternative template when the condition is false.

<div *ngIf="isVisible; else notVisible">
    Content to show when isVisible is true
</div>
<ng-template #notVisible>
    Content to show when isVisible is false
</ng-template>
            

`FormBuilder` is a service used to create and manage reactive forms in Angular. It simplifies the creation of `FormGroup` and `FormControl` instances.

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

constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
        name: [''],
        email: ['']
    });
}
            

The `@Injectable` decorator is used to mark a class as available for dependency injection. It tells Angular that the class can be injected into other classes as a dependency.

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

@Injectable({
    providedIn: 'root'
})
export class ExampleService {}
            

`@Input` is used to pass data from a parent component to a child component, while `@Output` is used to emit events from the child component to the parent.

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

@Component({
    selector: 'app-child',
    template: '<button (click)="sendEvent()">Click me</button>'
})
export class ChildComponent {
    @Input() data: string;
    @Output() event = new EventEmitter<string>();

    sendEvent() {
        this.event.emit('Event data');
    }
}
            

`AppComponent` is typically the root component of an Angular application. It serves as the main entry point for the application and bootstraps other components.

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

@Component({
    selector: 'app-root',
    template: '<h1>Welcome to Angular!</h1>',
    styles: ['h1 { color: red; }']
})
export class AppComponent {}
            

You can handle user input using template-driven forms or reactive forms. Template-driven forms use directives in the template, while reactive forms use form controls and groups in the component class.

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

@Component({
    selector: 'app-form',
    template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <input formControlName="name" />
        <button type="submit">Submit</button>
    </form>
    `
})
export class FormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['']
        });
    }

    onSubmit() {
        console.log(this.form.value);
    }
}
            

The `@NgModule` decorator defines an Angular module, including the components, directives, and pipes it contains, as well as other modules it depends on.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

`HttpClient` is used to make HTTP requests to a server. It provides methods such as `get`, `post`, `put`, and `delete` for handling HTTP operations.

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

@Injectable({
    providedIn: 'root'
})
export class DataService {
    constructor(private http: HttpClient) {}

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

`RouterModule` is an Angular module that provides routing and navigation functionality for Angular applications. It helps to define routes and configure navigation.

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 },
    { path: 'about', component: AboutComponent }
];

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

Decorators are functions that add metadata to classes, methods, or properties. Angular uses decorators to define components, directives, modules, and services.

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

@Component({
    selector: 'app-example',
    template: '<p>Example component</p>'
})
export class ExampleComponent {}
            

The `@ViewChild` decorator is used to access a child component, directive, or DOM element from the parent component's class.

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

@Component({
    selector: 'app-example',
    template: '<input #inputElement />'
})
export class ExampleComponent {
    @ViewChild('inputElement') input: ElementRef;

    ngAfterViewInit() {
        this.input.nativeElement.focus();
    }
}
            

A custom directive is created using the `@Directive` decorator. It can be used to add behavior to elements or components.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef, private renderer: Renderer2) {}

    @HostListener('mouseenter') onMouseEnter() {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'white');
    }
}
            

`ChangeDetectionStrategy` determines how Angular checks for changes in the component. The two strategies are `Default` and `OnPush`.

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

@Component({
    selector: 'app-example',
    template: '<p>Example component</p>',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {}
            

`ngModel` is used for two-way data binding between the model and the view. It binds a form control to a property in the component class.

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

@Component({
    selector: 'app-example',
    template: '<input [(ngModel)]="name" /> <p>Hello {{ name }}</p>'
})
export class ExampleComponent {
    name: string = '';
}
            

The `@HostBinding` decorator binds a property or attribute of the host element of a directive or component to a property of the directive or component.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    @HostBinding('class.highlight') isHighlighted = true;
}
            

`ng-content` is used to project content into a component from its parent component. It allows you to create reusable components with customizable content.

@Component({
    selector: 'app-card',
    template: '<ng-content></ng-content>'
})
export class CardComponent {}
            

You can use the `Router` service to navigate to different routes programmatically by calling its `navigate` method.

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

constructor(private router: Router) {}

navigateToHome() {
    this.router.navigate(['/home']);
}
            

The `ngOnInit` lifecycle hook is called after the component's data-bound properties have been initialized. It is commonly used for initialization logic.

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

@Component({
    selector: 'app-example',
    template: '<p>Example component</p>'
})
export class ExampleComponent implements OnInit {
    ngOnInit() {
        console.log('Component initialized');
    }
}
            

An Angular service is defined using the `@Injectable` decorator. It is a class that can be injected into other components or services.

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

@Injectable({
    providedIn: 'root'
})
export class DataService {
    getData() {
        return ['data1', 'data2'];
    }
}
            

The `@Directive` decorator is used to create custom directives in Angular. Directives can change the appearance or behavior of elements in the DOM.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef, private renderer: Renderer2) {}

    @HostListener('mouseenter') onMouseEnter() {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'transparent');
    }
}
            

An Angular module is created using the `@NgModule` decorator. It defines a module that groups components, directives, pipes, and services.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

`ngIf` is a structural directive that conditionally includes or removes an element from the DOM based on the truthiness of an expression.

<div *ngIf="isVisible">This is visible</div>
            

`ngFor` is a structural directive used to repeat a block of HTML for each item in a list.

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

The `@Component` decorator is used to define a component in Angular. It specifies the selector, template, and styles for the component.

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

@Component({
    selector: 'app-example',
    template: '<p>Example component</p>',
    styles: ['p { color: blue; }']
})
export class ExampleComponent {}
            

Dependency injection in Angular is implemented by providing services in the component's or module's `providers` array and injecting them into the constructor of the class.

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
    selector: 'app-example',
    template: '<p>Example component</p>'
})
export class ExampleComponent {
    constructor(private dataService: DataService) {}
}
            

The `@Pipe` decorator is used to define custom pipes in Angular, which transform data in templates.

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

@Pipe({
    name: 'customPipe'
})
export class CustomPipe implements PipeTransform {
    transform(value: string): string {
        return value.toUpperCase();
    }
}
            

The `ngOnChanges` lifecycle hook is called when an input property of the component changes. It is used to perform actions based on the input property changes.

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

@Component({
    selector: 'app-example',
    template: '<p>Example component</p>'
})
export class ExampleComponent implements OnChanges {
    @Input() data: string;

    ngOnChanges(changes: SimpleChanges) {
        console.log('Changes detected:', changes);
    }
}
            

`ngModel` is a directive used for two-way data binding between the form controls and component properties.

<input [(ngModel)]="name" />
<p>Hello {{ name }}</p>
            

Reactive forms are created using `FormGroup` and `FormControl` classes from `@angular/forms`.

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

@Component({
    selector: 'app-form',
    template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <input formControlName="name" />
        <button type="submit">Submit</button>
    </form>
    `
})
export class FormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['']
        });
    }

    onSubmit() {
        console.log(this.form.value);
    }
}
            

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

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

@Directive({
    selector: '[appEvent]'
})
export class EventDirective {
    @HostListener('click', ['$event']) onClick(event: Event) {
        console.log('Element clicked:', event);
    }
}
            

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

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

@Component({
    selector: 'app-child',
    template: '<p>{{ data }}</p>'
})
export class ChildComponent {
    @Input() data: string;
}
            

The `@Output` decorator is used to emit events from a child component to a parent component.

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

@Component({
    selector: 'app-child',
    template: '<button (click)="sendData()">Send Data</button>'
})
export class ChildComponent {
    @Output() dataSent = new EventEmitter<string>();

    sendData() {
        this.dataSent.emit('Some data');
    }
}
            

HTTP requests in Angular are handled using the `HttpClient` service from `@angular/common/http`.

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

@Component({
    selector: 'app-http',
    template: '<p>HTTP request component</p>'
})
export class HttpComponent {
    constructor(private http: HttpClient) {}

    getData() {
        this.http.get('https://api.example.com/data').subscribe(response => {
            console.log(response);
        });
    }
}
            

The `RouterModule` is used to configure routes in an Angular application, allowing navigation between different views or components.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full' }
];

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

The `@Injectable` decorator is used to define a service that can be injected into other components or services.

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

@Injectable({
    providedIn: 'root'
})
export class UserService {
    getUser() {
        return { name: 'John Doe' };
    }
}
            

The `imports` property in `@NgModule` is used to import other Angular modules into the current module, making their components, directives, and pipes available for use.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [CommonModule, FormsModule],
    declarations: [MyComponent]
})
export class MyModule {}
            

The `@HostBinding` decorator is used to bind a property or attribute of the host element to a property of the directive or component.

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

@Directive({
    selector: '[appColor]'
})
export class ColorDirective {
    @HostBinding('style.color') color: string = 'blue';
}
            

The `@ViewChild` decorator is used to access a child component, directive, or DOM element within the component's template.

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

@Component({
    selector: 'app-example',
    template: '<input #myInput />'
})
export class ExampleComponent implements AfterViewInit {
    @ViewChild('myInput') input: ElementRef;

    ngAfterViewInit() {
        this.input.nativeElement.focus();
    }
}
            

Angular routes with parameters are defined using a colon `:` followed by the parameter name in the route path.

const routes: Routes = [
    { path: 'user/:id', component: UserComponent }
];
            

The `ngSwitch` directive is used to conditionally include or exclude elements from the DOM based on a switch expression.

<div [ngSwitch]="value">
    <p *ngSwitchCase="'case1'">Case 1</p>
    <p *ngSwitchCase="'case2'">Case 2</p>
    <p *ngSwitchDefault>Default case</p>
</div>
            

The `ngStyle` directive is used to apply inline styles to elements based on the values of an expression.

<div [ngStyle]="{'color': color, 'font-size.px': fontSize}">
    Styled text
</div>
            

The `ngContainer` is a structural directive that allows you to group elements without adding extra elements to the DOM.

<ng-container *ngIf="isVisible">
    </ng-container><ng-container *ngIf="isVisible"><p>Content is visible</p>
</ng-container>
            

Route guards are used to control access to routes. They implement the `CanActivate`, `CanDeactivate`, `CanLoad`, or `Resolve` interfaces.

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 {
        // Implement authentication check
        return true; // or false if not authenticated
    }
}
            

The `@HostBinding` decorator is used to bind a property or attribute of the host element to a property of the directive or component.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    @HostBinding('class.highlight') isHighlighted = true;
}
            

Form validation in reactive forms is done using validators such as `Validators.required`, `Validators.minLength`, etc.

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

@Component({
    selector: 'app-form',
    template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <input formControlName="name" />
        <div *ngIf="form.get('name').invalid && form.get('name').touched">
            Name is required
        </div>
        <button type="submit">Submit</button>
    </form>
    `
})
export class FormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['', Validators.required]
        });
    }

    onSubmit() {
        console.log(this.form.value);
    }
}
            

The `declarations` property in `@NgModule` is used to declare the components, directives, and pipes that belong to the module.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my.component';

@NgModule({
    declarations: [MyComponent],
    imports: [CommonModule],
    exports: [MyComponent]
})
export class MyModule {}
            

The `ngModel` directive is used for two-way data binding by binding form controls to component properties.

<input [(ngModel)]="name" />
<p>Hello {{ name }}</p>
            

The `@Injectable` decorator is used to mark a class as available to be provided and injected as a dependency in other components or services.

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

@Injectable({
    providedIn: 'root'
})
export class MyService {
    getData() {
        return 'Service data';
    }
}
            

HTTP errors can be handled using the `catchError` operator from `rxjs` to catch and handle errors from HTTP requests.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class DataService {
    constructor(private http: HttpClient) {}

    getData() {
        return this.http.get('https://api.example.com/data').pipe(
            catchError(error => {
                console.error('Error occurred', error);
                return of([]);
            })
        );
    }
}
            

The `providers` property in `@NgModule` is used to define the services that will be available for dependency injection within the module.

import { NgModule } from '@angular/core';
import { MyService } from './my.service';

@NgModule({
    providers: [MyService]
})
export class MyModule {}
            

The `*ngFor` directive is used to iterate over a list and create a template for each item in the list.

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

The `ngIf` directive is used to conditionally include or exclude elements from the DOM based on an expression.

<div *ngIf="isVisible">
    Content is visible
</div>
            

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

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

@Component({
    selector: 'app-child',
    template: '<p>{{ data }}</p>'
})
export class ChildComponent {
    @Input() data: string;
}
            

The `AppComponent` is the root component of the Angular application and serves as the entry point for the component tree.

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

@Component({
    selector: 'app-root',
    template: '<h1>Welcome to Angular!</h1>'
})
export class AppComponent {}
            

Custom directives are created by using the `@Directive` decorator to define a class that will be applied to elements.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef, private renderer: Renderer2) {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
    }
}
            

The `ngOnInit` lifecycle hook is used for initialization logic that needs to be performed after the component's data-bound properties have been initialized.

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

@Component({
    selector: 'app-example',
    template: '<p>Example component</p>'
})
export class ExampleComponent implements OnInit {
    ngOnInit() {
        console.log('Component initialized');
    }
}
            

User input is handled using Angular forms, which can be either template-driven or reactive forms.

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

@Component({
    selector: 'app-login',
    template: `
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
        <input formControlName="username" />
        <input formControlName="password" type="password" />
        <button type="submit">Login</button>
    </form>
    `
})
export class LoginComponent {
    loginForm: FormGroup;

    constructor(private fb: FormBuilder) {
        this.loginForm = this.fb.group({
            username: ['', Validators.required],
            password: ['', Validators.required]
        });
    }

    onSubmit() {
        console.log(this.loginForm.value);
    }
}
            

The `ngModel` directive is used for two-way data binding between the form input fields and the component properties.

<input [(ngModel)]="name" />
<p>Hello {{ name }}</p>
            

A custom pipe is defined by using the `@Pipe` decorator and implementing the `PipeTransform` interface.

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

@Pipe({
    name: 'reverse'
})
export class ReversePipe implements PipeTransform {
    transform(value: string): string {
        return value.split('').reverse().join('');
    }
}
            

The `ngFor` directive is used to repeat a template for each item in a list or array.

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

The `ngClass` directive is used to dynamically add or remove CSS classes based on the expression.

<div [ngClass]="{ 'highlight': isHighlighted, 'bold': isBold }">
    Styled text
</div>
            

The `@Output` decorator is used to define an event that a child component can emit to its parent component.

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

@Component({
    selector: 'app-child',
    template: `<button (click)="sendMessage()">Send</button>`
})
export class ChildComponent {
    @Output() message = new EventEmitter<string>();

    sendMessage() {
        this.message.emit('Hello from child');
    }
}
            

You can bind a component property to an HTML element attribute using property binding syntax with square brackets.

<img [src]="imageUrl" />
            

The `ngIf` directive is used to conditionally include or exclude elements from the DOM based on a boolean expression.

<div *ngIf="isVisible">Content is visible</div>
            

The `@ViewChild` decorator is used to access a child component or element within the component's template.

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'app-parent',
    template: `<app-child></app-child>`
})
export class ParentComponent implements AfterViewInit {
    @ViewChild(ChildComponent) child: ChildComponent;

    ngAfterViewInit() {
        console.log(this.child);
    }
}
            

The `@Injectable` decorator is used to mark a class as available for dependency injection.

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

@Injectable({
    providedIn: 'root'
})
export class MyService {
    getValue() {
        return 'Service value';
    }
}
            

Reactive forms are created using the `FormBuilder` service to construct the form model and its controls.

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

@Component({
    selector: 'app-reactive-form',
    template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <input formControlName="name" />
        <button type="submit">Submit</button>
    </form>
    `
})
export class ReactiveFormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['', Validators.required]
        });
    }

    onSubmit() {
        console.log(this.form.value);
    }
}
            

The `app.module.ts` file defines the root module of the application, including the components, directives, pipes, and services that are used throughout the app.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

Events are handled using Angular's event binding syntax, with parentheses around the event name.

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

The `ngSwitch` directive is used to conditionally display elements based on the value of an expression.

<div [ngSwitch]="value">
    <p *ngSwitchCase="'case1'">Case 1</p>
    <p *ngSwitchCase="'case2'">Case 2</p>
    <p *ngSwitchDefault>Default case</p>
</div>
            

Child routes are defined within the `children` property of a route configuration object.

const routes: Routes = [
    { path: 'parent', component: ParentComponent, children: [
        { path: 'child', component: ChildComponent }
    ]}
];
            

The `ngOnChanges` lifecycle hook is used to respond to changes in input properties of the component.

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

@Component({
    selector: 'app-example',
    template: '<p>{{ value }}</p>'
})
export class ExampleComponent implements OnChanges {
    @Input() value: string;

    ngOnChanges(changes: SimpleChanges) {
        console.log('Changes:', changes);
    }
}
            

A service can be created using the `@Injectable` decorator with the `providedIn: 'root'` option to make it available throughout the application.

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

@Injectable({
    providedIn: 'root'
})
export class ExampleService {
    getData() {
        return 'Some data';
    }
}
            

The `ngStyle` directive is used to apply styles dynamically based on an expression.

<div [ngStyle]="{ 'color': color, 'font-size': fontSize }">
    Styled text
</div>
            

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

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

@Directive({
    selector: '[appHover]'
})
export class HoverDirective {
    @HostListener('mouseenter') onMouseEnter() {
        console.log('Mouse entered');
    }

    @HostListener('mouseleave') onMouseLeave() {
        console.log('Mouse left');
    }
}
            

HTTP requests are handled using the `HttpClient` service provided by the `@angular/common/http` module.

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

@Component({
    selector: 'app-http',
    template: '<p>Check console for HTTP request result</p>'
})
export class HttpComponent {
    constructor(private http: HttpClient) {
        this.http.get('https://api.example.com/data')
            .subscribe(data => console.log(data));
    }
}
            

The `ngOnDestroy` lifecycle hook is used to clean up resources and unsubscribe from observables when a component is destroyed.

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

@Component({
    selector: 'app-example',
    template: '<p>Example component</p>'
})
export class ExampleComponent implements OnDestroy {
    private subscription: Subscription;

    constructor() {
        this.subscription = // ... initialize subscription
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}
            

The `ngModel` directive is used for two-way data binding between form input fields and component properties.

<input [(ngModel)]="name" />
<p>Hello {{ name }}</p>
            

A custom pipe is defined by using the `@Pipe` decorator and implementing the `PipeTransform` interface.

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

@Pipe({
    name: 'reverse'
})
export class ReversePipe implements PipeTransform {
    transform(value: string): string {
        return value.split('').reverse().join('');
    }
}
            

The `ngFor` directive is used to repeat a template for each item in a list or array.

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

The `ngClass` directive is used to dynamically add or remove CSS classes based on the expression.

<div [ngClass]="{ 'highlight': isHighlighted, 'bold': isBold }">
    Styled text
</div>
            

The `@Output` decorator is used to define an event that a child component can emit to its parent component.

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

@Component({
    selector: 'app-child',
    template: `<button (click)="sendMessage()">Send</button>`
})
export class ChildComponent {
    @Output() message = new EventEmitter<string>();

    sendMessage() {
        this.message.emit('Hello from child');
    }
}
            

You can bind a component property to an HTML element attribute using property binding syntax with square brackets.

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

The `ngIf` directive is used to conditionally include or exclude elements from the DOM based on a boolean expression.

<div *ngIf="isVisible">Content is visible</div>
            

The `@ViewChild` decorator is used to access a child component or element within the component's template.

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'app-parent',
    template: `<app-child></app-child>`
})
export class ParentComponent implements AfterViewInit {
    @ViewChild(ChildComponent) child: ChildComponent;

    ngAfterViewInit() {
        console.log(this.child);
    }
}
            

The `@Injectable` decorator is used to mark a class as available for dependency injection.

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

@Injectable({
    providedIn: 'root'
})
export class MyService {
    getValue() {
        return 'Service value';
    }
}
            

Reactive forms are created using the `FormBuilder` service to construct the form model and its controls.

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

@Component({
    selector: 'app-reactive-form',
    template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <input formControlName="name" />
        <button type="submit">Submit</button>
    </form>
    `
})
export class ReactiveFormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['', Validators.required]
        });
    }

    onSubmit() {
        console.log(this.form.value);
    }
}
            

The `app.module.ts` file defines the root module of the application, including the components, directives, pipes, and services that are used throughout the app.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

Events are handled using Angular's event binding syntax, with parentheses around the event name.

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

The `ngSwitch` directive is used to conditionally display elements based on the value of an expression.

<div [ngSwitch]="value">
    <p *ngSwitchCase="'case1'">Case 1</p>
    <p *ngSwitchCase="'case2'">Case 2</p>
    <p *ngSwitchDefault>Default case</p>
</div>
            

Child routes are defined within the `children` property of a route configuration object.

const routes: Routes = [
    { path: 'parent', component: ParentComponent, children: [
        { path: 'child', component: ChildComponent }
    ]}
];
            

The `ngOnChanges` lifecycle hook is used to respond to changes in input properties of the component.

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

@Component({
    selector: 'app-example',
    template: '<p>{{ value }}</p>'
})
export class ExampleComponent implements OnChanges {
    @Input() value: string;

    ngOnChanges(changes: SimpleChanges) {
        console.log('Changes:', changes);
    }
}
            

A service can be created using the `@Injectable` decorator with the `providedIn: 'root'` option to make it available throughout the application.

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

@Injectable({
    providedIn: 'root'
})
export class ExampleService {
    getData() {
        return 'Some data';
    }
}
            

The `ngStyle` directive is used to apply styles dynamically based on an expression.

<div [ngStyle]="{ 'color': color, 'font-size': fontSize }">
    Styled text
</div>
            

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

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

@Directive({
    selector: '[appHover]'
})
export class HoverDirective {
    @HostListener('mouseenter') onMouseEnter() {
        console.log('Mouse entered');
    }

    @HostListener('mouseleave') onMouseLeave() {
        console.log('Mouse left');
    }
}
            

HTTP requests are handled using the `HttpClient` service provided by the `@angular/common/http` module.

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

@Component({
    selector: 'app-http',
    template: '<p>Check console for HTTP request result</p>'
})
export class HttpComponent {
    constructor(private http: HttpClient) {
        this.http.get('https://api.example.com/data')
            .subscribe(data => console.log(data));
    }
}
            

The `ngOnDestroy` lifecycle hook is used to clean up resources and unsubscribe from observables when a component is destroyed.

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

@Component({
    selector: 'app-example',
    template: '<p>Example component</p>'
})
export class ExampleComponent implements OnDestroy {
    private subscription: Subscription;

    constructor() {
        this.subscription = // ... initialize subscription
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}
            

The `ngOnInit` lifecycle hook is used for component initialization, including fetching data and setting up component properties.

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

@Component({
    selector: 'app-example',
    template: '<p>{{ message }}</p>'
})
export class ExampleComponent implements OnInit {
    message: string;

    ngOnInit() {
        this.message = 'Component initialized';
    }
}
            

The `ngModel` directive binds form control values to component properties, supporting two-way data binding in forms.

<form>
    <input [(ngModel)]="username" name="username" />
    <p>Your username is: {{ username }}</p>
</form>
            

A service is defined with the `@Injectable` decorator and can be injected into components or other services.

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

@Injectable({
    providedIn: 'root'
})
export class DataService {
    getData() {
        return ['Item 1', 'Item 2'];
    }
}
            

Routing is configured using the `RouterModule.forRoot` method, providing route definitions in the application module.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent }
];

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

Validation is implemented using Angular’s built-in validators or custom validators on form controls.

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

@Component({
    selector: 'app-validation-form',
    template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <input formControlName="email" placeholder="Email" />
        <div *ngIf="form.get('email').invalid && form.get('email').touched">
            <p>Email is required and must be valid</p>
        </div>
        <button type="submit">Submit</button>
    </form>
    `
})
export class ValidationFormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            email: ['', [Validators.required, Validators.email]]
        });
    }


    onSubmit() {
        if (this.form.valid) {
            console.log(this.form.value);
        }
    }
}
            

When using `ngFor` with objects, you can iterate over the object's keys using the `keyvalue` pipe.

<ul>
    <li *ngFor="let item of object | keyvalue">{{ item.key }}: {{ item.value }}</li>
</ul>
            

The `ngAfterViewInit` lifecycle hook is used to perform actions after Angular initializes the component's view and child views.

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'app-parent',
    template: `<app-child></app-child>`
})
export class ParentComponent implements AfterViewInit {
    @ViewChild(ChildComponent) child: ChildComponent;

    ngAfterViewInit() {
        console.log('Child component:', this.child);
    }
}
            

You can dynamically set CSS styles using Angular’s `[ngStyle]` directive.

<div [ngStyle]="{ 'color': color, 'font-size': fontSize }">
    Dynamic style content
</div>
            

A module is created using the `@NgModule` decorator and can include declarations, imports, providers, and bootstrap components.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';

@NgModule({
    declarations: [FeatureComponent],
    imports: [CommonModule],
    exports: [FeatureComponent]
})
export class FeatureModule {}
            

The `ngSwitch` directive allows you to display elements based on a matched value.

<div [ngSwitch]="value">
    <div *ngSwitchCase="'case1'">Case 1</div>
    <div *ngSwitchCase="'case2'">Case 2</div>
    <div *ngSwitchDefault>Default case</div>
</div>
            

HTTP requests are handled using Angular’s `HttpClient` service.

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

@Component({
    selector: 'app-http',
    template: '<p>Data: {{ data }}</p>'
})
export class HttpComponent {
    data: any;

    constructor(private http: HttpClient) {
        this.http.get('https://api.example.com/data')
            .subscribe(response => this.data = response);
    }
}
            

The `@Input` decorator is used to define properties that can receive data from a parent component.

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

@Component({
    selector: 'app-child',
    template: '<p>{{ data }}</p>'
})
export class ChildComponent {
    @Input() data: string;
}
            

The `ngClass` directive dynamically sets CSS classes on an element based on conditions.

<div [ngClass]="{ 'active': isActive, 'inactive': !isActive }">
    Conditional classes
</div>
            

You can create a component using the Angular CLI command `ng generate component` or `ng g c`.

ng generate component my-component
            

The `ng-content` directive is used for content projection, allowing you to insert content into a component’s template.

@Component({
    selector: 'app-wrapper',
    template: '<ng-content></ng-content>'
})
export class WrapperComponent {}
            

The `@ViewChild` decorator is used to query a single child element or component.

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'app-parent',
    template: `<app-child></app-child>`
})
export class ParentComponent {
    @ViewChild(ChildComponent) child: ChildComponent;
}
            

The `@Output` decorator is used to define an event that a child component can emit to its parent component.

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

@Component({
    selector: 'app-child',
    template: '<button (click)="sendMessage()">Send</button>'
})
export class ChildComponent {
    @Output() messageEvent = new EventEmitter<string>();

    sendMessage() {
        this.messageEvent.emit('Hello from child');
    }
}
            

Errors in HTTP requests can be handled using the `catchError` operator in RxJS.

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Component({
    selector: 'app-http',
    template: '<p>Data: {{ data }}</p>'
})
export class HttpComponent {
    data: any;

    constructor(private http: HttpClient) {
        this.http.get('https://api.example.com/data')
            .pipe(
                catchError(error => {
                    console.error('Error:', error);
                    return of([]);
                })
            )
            .subscribe(response => this.data = response);
    }
}
            

Routes with parameters are defined using a colon `:` followed by the parameter name.

const routes: Routes = [
    { path: 'user/:id', component: UserComponent }
];
            

The `ngOnDestroy` lifecycle hook is used to perform cleanup tasks when the component is destroyed.

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

@Component({
    selector: 'app-example',
    template: '<p>Component with cleanup</p>'
})
export class ExampleComponent implements OnDestroy {
    ngOnDestroy() {
        console.log('Component destroyed');
    }
}
            

The `@Output` decorator is used to create custom events that a component can emit.

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

@Component({
    selector: 'app-custom-button',
    template: '<button (click)="onClick()">Click me</button>'
})
export class CustomButtonComponent {
    @Output() clicked = new EventEmitter<void>();

    onClick() {
        this.clicked.emit();
    }
}
            

The `@ViewChild` decorator is used to get a reference to a child component or element in the template.

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

@Component({
    selector: 'app-example',
    template: '<input #inputElement />'
})
export class ExampleComponent {
    @ViewChild('inputElement') input!: ElementRef;

    ngAfterViewInit() {
        this.input.nativeElement.focus();
    }
}
            

The `ngIf` directive is used to include or exclude elements based on a condition.

<div *ngIf="isVisible">This content is visible</div>
            

The `@Injectable` decorator is used to define a service that can be injected into components or other services.

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

@Injectable({
    providedIn: 'root'
})
export class ExampleService {
    getData() {
        return 'Data';
    }
}
            

The `ngFor` directive can be used to iterate over objects by using the key-value pair syntax.

<div *ngFor="let key of objectKeys(myObject)">
    {{ key }}: {{ myObject[key] }}
</div>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    myObject = { a: 1, b: 2, c: 3 };
    objectKeys = Object.keys;
}
            

The `@HostBinding` decorator is used to bind a property of the host element to a property in the directive or component.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    @HostBinding('class.highlighted') isHighlighted = true;
}
            

A custom pipe can be created to filter a list based on a condition.

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

@Pipe({ name: 'filterList' })
export class FilterListPipe implements PipeTransform {
    transform(items: any[], searchText: string): any[] {
        if (!items) return [];
        if (!searchText) return items;
        searchText = searchText.toLowerCase();
        return items.filter(item => item.toLowerCase().includes(searchText));
    }
}
            

The `@ContentChild` decorator is used to get a reference to a child element projected into the component's view.

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

@Component({
    selector: 'app-parent',
    template: '<ng-content></ng-content>'
})
export class ParentComponent implements AfterContentInit {
    @ContentChild('content') content!: ElementRef;

    ngAfterContentInit() {
        console.log(this.content.nativeElement.textContent);
    }
}
            

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

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

@Component({
    selector: 'app-child',
    template: '<p>{{ data }}</p>'
})
export class ChildComponent {
    @Input() data!: string;
}
            

The `ngClass` directive can be used to conditionally apply CSS classes based on a condition.

<div [ngClass]="{ 'active': isActive, 'inactive': !isActive }">
    Content
</div>
            

The `@Inject` decorator is used to specify a dependency for injection when the type cannot be inferred.

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

@Injectable({
    providedIn: 'root'
})
export class ExampleService {
    constructor(@Inject(String) private value: string) { }
}
            

The `ngModel` directive is used for two-way data binding in forms.

<input [(ngModel)]="value" />
<p>Value: {{ value }}</p>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    value = 'Initial value';
}
            

The `ng-template` directive defines a template that can be conditionally rendered.

<ng-template #template>
    </ng-template><ng-template #template><p>This is a template</p>
</ng-template>

<div *ngIf="showTemplate; else template">
    <p>Content when condition is true</p>
</div>
            

The `ngOnChanges` lifecycle hook is used to detect and act upon changes to input properties.

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

@Component({
    selector: 'app-example',
    template: '<p>{{ data }}</p>'
})
export class ExampleComponent implements OnChanges {
    @Input() data!: string;

    ngOnChanges(changes: SimpleChanges) {
        console.log(changes);
    }
}
            

The `ngOnInit` lifecycle hook is used to perform component initialization after Angular has initialized all data-bound properties.

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

@Component({
    selector: 'app-example',
    template: '<p>Component initialized</p>'
})
export class ExampleComponent implements OnInit {
    ngOnInit() {
        console.log('Component initialized');
    }
}
            

The `ngSwitch` directive is used to conditionally display elements based on a switch expression.

<div [ngSwitch]="condition">
    <p *ngSwitchCase="'value1'">Case 1</p>
    <p *ngSwitchCase="'value2'">Case 2</p>
    <p *ngSwitchDefault>Default case</p>
</div>
            

The `ngContainer` is used to group elements without adding extra DOM elements.

<ng-container *ngIf="isVisible">
    </ng-container><ng-container *ngIf="isVisible"><p>Content is visible</p>
</ng-container>
            

The `ngFor` directive is used to repeat a block of HTML for each item in an array.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    items = ['Item 1', 'Item 2', 'Item 3'];
}
            

The `ngModel` directive is used for two-way data binding with form inputs.

<input [(ngModel)]="inputValue" />
<p>Input value: {{ inputValue }}</p>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    inputValue = '';
}
            

The `@NgModule` decorator is used to define an Angular module, including its components, directives, and services.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

The `ngIf` directive is used to include or exclude a block of HTML based on a condition.

<div *ngIf="isVisible">
    <p>This content is conditionally rendered</p>
</div>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    isVisible = true;
}
            

The `ngOnInit` lifecycle hook is used to perform initialization logic after Angular has set all input properties.

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

@Component({
    selector: 'app-example',
    template: '<p>Component Initialized</p>'
})
export class ExampleComponent implements OnInit {
    ngOnInit() {
        console.log('Component Initialized');
    }
}
            

The `ngClass` directive can be used to dynamically add or remove CSS classes based on conditions.

<div [ngClass]="{'active': isActive, 'inactive': !isActive}">
    Content with dynamic classes
</div>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    isActive = true;
}
            

To create a custom directive, you use the `@Directive` decorator and implement the directive logic.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef, private renderer: Renderer2) {}

    @HostListener('mouseenter') onMouseEnter() {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'transparent');
    }
}
            

The `ngFor` directive is used to loop through an array and generate HTML for each item.

<ul>
    <li *ngFor="let item of items">{{ item.name }} - {{ item.value }}</li>
</ul>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    items = [
        { name: 'Item 1', value: 10 },
        { name: 'Item 2', value: 20 },
        { name: 'Item 3', value: 30 }
    ];
}
            

The `@Input` decorator allows you to pass data from a parent component to a child component.

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

@Component({
    selector: 'app-child',
    template: '<p>{{ data }}</p>'
})
export class ChildComponent {
    @Input() data!: string;
}
            

The `@Output` decorator is used to define an event that a component can emit to its parent component.

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

@Component({
    selector: 'app-button',
    template: '<button (click)="onClick()">Click me</button>'
})
export class ButtonComponent {
    @Output() clicked = new EventEmitter<void>();

    onClick() {
        this.clicked.emit();
    }
}
            

The `@NgModule` decorator defines an Angular module, including its components, directives, pipes, and services.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

Event binding is done using parentheses around the event name in the template.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    handleClick() {
        console.log('Button clicked');
    }
}
            

The `ng-container` is used to group elements without adding extra DOM elements.

<ng-container *ngIf="isVisible">
    </ng-container><ng-container *ngIf="isVisible"><p>Content is visible</p>
</ng-container>
            

Form validation is handled using `FormGroup` and `FormControl` with built-in or custom validators.

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

@Component({
    selector: 'app-form',
    template: '<form [formGroup]="form" (ngSubmit)="onSubmit()">...</form>'
})
export class FormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]]
        });
    }

    onSubmit() {
        if (this.form.valid) {
            console.log(this.form.value);
        }
    }
}
            

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

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

@Directive({
    selector: '[appClickTracker]'
})
export class ClickTrackerDirective {
    @HostListener('click', ['$event'])
    onClick(event: Event) {
        console.log('Element clicked', event);
    }
}
            

The `HttpClient` service is used to make HTTP requests to a server and handle responses.

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

@Component({
    selector: 'app-data',
    template: '...',
})
export class DataComponent {
    constructor(private http: HttpClient) {}

    fetchData() {
        this.http.get('https://api.example.com/data').subscribe(data => {
            console.log(data);
        });
    }
}
            

The `ngOnDestroy` lifecycle hook is used to clean up resources, such as unsubscribing from observables or detaching event handlers, before a component is destroyed.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent implements OnDestroy {
    private subscription: Subscription;

    constructor() {
        this.subscription = someObservable.subscribe();
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}
            

The `ngModel` directive is used to bind form input values to component properties with two-way data binding.

<input [(ngModel)]="inputValue" />
<p>Input value: {{ inputValue }}</p>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    inputValue = '';
}
            

The `@Injectable` decorator marks a class as available for dependency injection.

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

@Injectable({
    providedIn: 'root'
})
export class ExampleService {
    getData() {
        return 'Data from service';
    }
}
            

Routing in Angular is configured using the `RouterModule` and defining routes in a routing module.

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: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full' }
];

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

Create a service using `@Injectable`, then inject it into a component's constructor.

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

@Injectable({
    providedIn: 'root'
})
export class ExampleService {
    getData() {
        return 'Data from service';
    }
}

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    constructor(private exampleService: ExampleService) {
        console.log(this.exampleService.getData());
    }
}
            

Angular modules are classes with a `@NgModule` decorator that define a context for a set of components, directives, pipes, and services. You create a module using `@NgModule`.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

The `@Pipe` decorator defines a custom pipe for transforming data in templates.

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

@Pipe({
    name: 'reverse'
})
export class ReversePipe implements PipeTransform {
    transform(value: string): string {
        return value.split('').reverse().join('');
    }
}
            

Use the Angular CLI command `ng generate component ` to create a new component.

ng generate component my-component

// The command creates a folder with four files:
// my-component.component.ts
// my-component.component.html
// my-component.component.css
// my-component.component.spec.ts
            

The `@Component` decorator is used to define a component, including its metadata like selector, template, and style URLs.

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

@Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.css']
})
export class ExampleComponent {
    // Component logic
}
            

Handle form submission by using the `(ngSubmit)` event in the template and handling it in the component.

<form (ngSubmit)="onSubmit()" #myForm="ngForm">
    <input name="name" ngModel required />
    <button type="submit">Submit</button>
</form>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    onSubmit() {
        console.log('Form submitted');
    }
}
            

Use Angular's `*ngIf` directive to conditionally render elements based on a condition.

<div *ngIf="isVisible">
    <p>This content is conditionally rendered</p>
</div>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    isVisible = true;
}
            

The `@NgModule` decorator defines an Angular module, including declarations, imports, providers, and bootstrap components.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

Data binding is done using interpolation `{{}}`, property binding `[property]`, and event binding `(event)`.

<!-- Interpolation -->
<p>{{ message }}</p>

<!-- Property Binding -->
<img [src]="imageUrl" />

<!-- Event Binding -->
<button (click)="handleClick()">Click me</button>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    message = 'Hello, Angular!';
    imageUrl = 'https://example.com/image.jpg';

    handleClick() {
        console.log('Button clicked');
    }
}
            

The `ngFor` directive is used to repeat an element for each item in an array.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    items = ['Item 1', 'Item 2', 'Item 3'];
}
            

The `@Injectable` decorator marks a class as available for dependency injection.

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

@Injectable({
    providedIn: 'root'
})
export class ExampleService {
    getData() {
        return 'Data from service';
    }
}
            

The `ngModel` directive enables two-way data binding by binding form input values to component properties.

<input [(ngModel)]="inputValue" />
<p>Input value: {{ inputValue }}</p>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    inputValue = '';
}
            

Routes are defined using the `RouterModule` and specifying route configurations in a routing module.

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: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full' }
];

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

The `@HostListener` decorator allows you to listen to events on the host element of a directive or component.

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

@Directive({
    selector: '[appClickTracker]'
})
export class ClickTrackerDirective {
    @HostListener('click', ['$event'])
    onClick(event: Event) {
        console.log('Element clicked', event);
    }
}
            

The `@Pipe` decorator defines a custom pipe for transforming data in templates.

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

@Pipe({
    name: 'reverse'
})
export class ReversePipe implements PipeTransform {
    transform(value: string): string {
        return value.split('').reverse().join('');
    }
}
            

Inject a service into a component by adding it to the component's constructor.

import { Component } from '@angular/core';
import { ExampleService } from './example.service';

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    constructor(private exampleService: ExampleService) {
        console.log(this.exampleService.getData());
    }
}
            

Angular modules are classes annotated with `@NgModule` that group related components, directives, pipes, and services. They are used to organize an application into cohesive blocks.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

The `ngClass` directive allows you to dynamically add or remove CSS classes based on conditions.

<div [ngClass]="{'active': isActive, 'inactive': !isActive}">
    Conditional styling
</div>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    isActive = true;
}
            

Handle user input using Angular's forms module, either with template-driven forms or reactive forms.

<!-- Template-driven form -->
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
    <input name="name" ngModel required />
    <button type="submit">Submit</button>
</form>

<!-- Reactive form -->
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['']
        });
    }

    onSubmit() {
        console.log(this.form.value);
    }
}
            

Create a custom pipe by defining a class with the `@Pipe` decorator and implementing the `PipeTransform` interface.

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

@Pipe({
    name: 'uppercase'
})
export class UppercasePipe implements PipeTransform {
    transform(value: string): string {
        return value.toUpperCase();
    }
}
            

The `ngOnInit` lifecycle hook is used to initialize component properties and perform any necessary setup after the component's data-bound properties have been initialized.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent implements OnInit {
    ngOnInit() {
        console.log('Component initialized');
    }
}
            

Pass data to a child component using `@Input` properties.

<!-- Parent component template -->
<app-child [data]="parentData"></app-child>

<!-- Child component -->
import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-child',
    template: '...',
})
export class ChildComponent {
    @Input() data: any;
}
            

The `@Output` decorator is used to emit events from a child component to a parent component.

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

@Component({
    selector: 'app-child',
    template: '<button (click)="notify()">Notify</button>',
})
export class ChildComponent {
    @Output() notifyEvent = new EventEmitter<void>();

    notify() {
        this.notifyEvent.emit();
    }
}

// Parent component template
<app-child (notifyEvent)="onNotify()"></app-child>

@Component({
    selector: 'app-parent',
    template: '...',
})
export class ParentComponent {
    onNotify() {
        console.log('Notification received');
    }
}
            

Use the Angular CLI command `ng generate component ` to create a new component.

ng generate component my-component

// The command creates a folder with four files:
// my-component.component.ts
// my-component.component.html
// my-component.component.css
// my-component.component.spec.ts
            

The `@Component` decorator is used to define a component, including its metadata like selector, template, and style URLs.

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

@Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.css']
})
export class ExampleComponent {
    // Component logic
}
            

Handle form submission by using the `(ngSubmit)` event in the template and handling it in the component.

<form (ngSubmit)="onSubmit()" #myForm="ngForm">
    <input name="name2" ngModel required />
    <button type="submit">Submit</button>
</form>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    onSubmit() {
        console.log('Form submitted');
    }
}
            

Use Angular's `*ngIf` directive to conditionally render elements based on a condition.

<div *ngIf="isVisible">
    <p>This content is conditionally rendered</p>
</div>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    isVisible = true;
}
            

The `@NgModule` decorator defines an Angular module, including declarations, imports, providers, and bootstrap components.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

Data binding is done using interpolation `{{}}`, property binding `[property]`, and event binding `(event)`.

<!-- Interpolation -->
<p>{{ message }}</p>

<!-- Property Binding -->
<img alt="" [src]="imageUrl" />

<!-- Event Binding -->
<button (click)="handleClick()">Click me</button>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    message = 'Hello, Angular!';
    imageUrl = 'https://example.com/image.jpg';

    handleClick() {
        console.log('Button clicked');
    }
}
            

The `ngFor` directive is used to repeat an element for each item in an array.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    items = ['Item 1', 'Item 2', 'Item 3'];
}
            

The `@Injectable` decorator marks a class as available for dependency injection.

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

@Injectable({
    providedIn: 'root'
})
export class ExampleService {
    getData() {
        return 'Data from service';
    }
}
            

The `ngModel` directive enables two-way data binding by binding form input values to component properties.

<input [(ngModel)]="inputValue" />
<p>Input value: {{ inputValue }}</p>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    inputValue = '';
}
            

Routes are defined using the `RouterModule` and specifying route configurations in a routing module.

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: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full' }
];

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

The `@HostListener` decorator allows you to listen to events on the host element of a directive or component.

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

@Directive({
    selector: '[appClickTracker]'
})
export class ClickTrackerDirective {
    @HostListener('click', ['$event'])
    onClick(event: Event) {
        console.log('Element clicked', event);
    }
}
            

The `@Pipe` decorator defines a custom pipe for transforming data in templates.

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

@Pipe({
    name: 'reverse'
})
export class ReversePipe implements PipeTransform {
    transform(value: string): string {
        return value.split('').reverse().join('');
    }
}
            

Inject a service into a component by adding it to the component's constructor.

import { Component } from '@angular/core';
import { ExampleService } from './example.service';

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    constructor(private exampleService: ExampleService) {
        console.log(this.exampleService.getData());
    }
}
            

Angular modules are classes annotated with `@NgModule` that group related components, directives, pipes, and services. They are used to organize an application into cohesive blocks.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

The `ngClass` directive allows you to dynamically add or remove CSS classes based on conditions.

<div [ngClass]="{'active': isActive, 'inactive': !isActive}">
    Conditional styling
</div>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    isActive = true;
}
            

Handle user input using Angular's forms module, either with template-driven forms or reactive forms.

<!-- Template-driven form -->
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
    <input name="name2" ngModel required />
    <button type="submit">Submit</button>
</form>

<!-- Reactive form -->
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['']
        });
    }

    onSubmit() {
        console.log(this.form.value);
    }
}
            

Create a custom pipe by defining a class with the `@Pipe` decorator and implementing the `PipeTransform` interface.

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

@Pipe({
    name: 'uppercase'
})
export class UppercasePipe implements PipeTransform {
    transform(value: string): string {
        return value.toUpperCase();
    }
}
            

The `ngOnInit` lifecycle hook is used to initialize component properties and perform any necessary setup after the component's data-bound properties have been initialized.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent implements OnInit {
    ngOnInit() {
        console.log('Component initialized');
    }
}
            

Pass data to a child component using `@Input` properties.

<!-- Parent component template -->
<app-child [data]="parentData"></app-child>

<!-- Child component -->
import { Component, Input } from '@angular/core';

@Component({
    selector: 'app-child',
    template: '...',
})
export class ChildComponent {
    @Input() data: any;
}
            

The `@Output` decorator is used to emit events from a child component to a parent component.

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

@Component({
    selector: 'app-child',
    template: '<button (click)="notify()">Notify</button>',
})
export class ChildComponent {
    @Output() notifyEvent = new EventEmitter<void>();

    notify() {
        this.notifyEvent.emit();
    }
}

// Parent component template
<app-child (notifyEvent)="onNotify()"></app-child>

@Component({
    selector: 'app-parent',
    template: '...',
})
export class ParentComponent {
    onNotify() {
        console.log('Notification received');
    }
}
            

Create a module using the Angular CLI command `ng generate module ` or manually by defining a class with the `@NgModule` decorator.

ng generate module my-module

// Example of manually creating a module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my.component';

@NgModule({
    declarations: [MyComponent],
    imports: [CommonModule],
    exports: [MyComponent]
})
export class MyModule { }
            

Set up routing by defining routes in the `AppRoutingModule` and using the ` ` directive in the main template.

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: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full' }
];

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

// In the main template
<router-outlet></router-outlet>
            

Implement lazy loading by configuring routes with the `loadChildren` property.

const routes: Routes = [
    { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
    { path: '', redirectTo: '/home', pathMatch: 'full' }
];

// In home-routing.module.ts
const routes: Routes = [
    { path: '', component: HomeComponent }
];
            

Angular services are classes that handle business logic and data access. They are used by injecting them into components or other services.

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

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

// Injecting service into a component
@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    constructor(private dataService: DataService) {
        console.log(this.dataService.getData());
    }
}
            

Perform HTTP requests using the `HttpClient` service.

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

@Injectable({
    providedIn: 'root'
})
export class DataService {
    constructor(private http: HttpClient) { }

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

// In the component
@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    data: any;

    constructor(private dataService: DataService) {
        this.dataService.fetchData().subscribe(response => {
            this.data = response;
        });
    }
}
            

The `ngIf` directive conditionally includes or excludes elements in the DOM based on an expression.

<div *ngIf="isVisible">
    <p>This content is visible</p>
</div>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    isVisible = true;
}
            

The `ngFor` directive repeats an element for each item in an array.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    items = ['Item 1', 'Item 2', 'Item 3'];
}
            

The `@Output` decorator is used to create custom events that components can emit to notify their parent components.

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

@Component({
    selector: 'app-child',
    template: '<button (click)="notify()">Notify</button>',
})
export class ChildComponent {
    @Output() notifyEvent = new EventEmitter<void>();

    notify() {
        this.notifyEvent.emit();
    }
}

// In the parent component
@Component({
    selector: 'app-parent',
    template: '...',
})
export class ParentComponent {
    onNotify() {
        console.log('Notification received');
    }
}
            

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

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

@Component({
    selector: 'app-child',
    template: '<p>{{ data }}</p>',
})
export class ChildComponent {
    @Input() data: string;
}

// In the parent component
@Component({
    selector: 'app-parent',
    template: '<app-child [data]="parentData"></app-child>',
})
export class ParentComponent {
    parentData = 'Data from parent';
}
            

Modules in Angular are used to organize an application into cohesive blocks. They help in managing and encapsulating components, services, directives, and pipes.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyModule } from './my.module';

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

Form validation in Angular can be handled using built-in validators or custom validators in both template-driven and reactive forms.

<!-- Template-driven form -->
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
    <input name="name3" ngModel required />
    <div *ngIf="myForm.submitted && !myForm.controls.name?.valid">
        Name is required
    </div>
    <button type="submit">Submit</button>
</form>

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['', Validators.required]
        });
    }

    onSubmit() {
        if (this.form.valid) {
            console.log(this.form.value);
        }
    }
}
            

Create custom directives to extend the behavior of elements in your application.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef, private renderer: Renderer2) { }

    @HostListener('mouseover') onMouseOver() {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
    }

    @HostListener('mouseout') onMouseOut() {
        this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
    }
}

// In the component template
<p appHighlight>Hover over me!</p>
            

Angular's change detection strategy determines how and when the view updates. The default strategy is `CheckAlways`, but it can be customized to `OnPush` for performance optimization.

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

@Component({
    selector: 'app-example',
    template: '...',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent { }
            

Implement dependency injection by providing services in Angular modules or components and injecting them into constructors.

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

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    constructor(private dataService: DataService) {
        console.log(this.dataService.getData());
    }
}
            

Angular provides built-in pipes for formatting data in templates, such as `DatePipe`, `CurrencyPipe`, and `DecimalPipe`.

<p>{{ today | date:'shortDate' }}</p>
<p>{{ amount | currency:'USD' }}</p>
<p>{{ number | number:'1.2-2' }}</p>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    today = new Date();
    amount = 1234.56;
    number = 1234.5678;
}
            

State management in Angular can be handled using services, or more advanced solutions like NgRx for large applications.

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

@Injectable({
    providedIn: 'root'
})
export class StateService {
    private state = new BehaviorSubject<any>({});
    state$ = this.state.asObservable();

    setState(newState: any) {
        this.state.next(newState);
    }
}

// In the component
@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    state$ = this.stateService.state$;

    constructor(private stateService: StateService) { }

    updateState() {
        this.stateService.setState({ key: 'value' });
    }
}
            

Handle errors in HTTP requests by using the `catchError` operator from RxJS and handling them in the service.

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

@Injectable({
    providedIn: 'root'
})
export class DataService {
    constructor(private http: HttpClient) { }

    fetchData() {
        return this.http.get('https://api.example.com/data').pipe(
            catchError(error => {
                console.error('Error occurred:', error);
                return throwError(error);
            })
        );
    }
}
            

The `ngOnDestroy` lifecycle hook is used to perform cleanup before the component is destroyed.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent implements OnDestroy {
    private subscription: Subscription;

    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
}
            

The `@HostListener` decorator allows you to listen to events on the host element of a directive or component.

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

@Directive({
    selector: '[appClickTracker]'
})
export class ClickTrackerDirective {
    @HostListener('click', ['$event'])
    onClick(event: MouseEvent) {
        console.log('Element clicked:', event);
    }
}
            

The `ngStyle` directive allows you to set multiple inline styles dynamically based on an expression.

<div [ngStyle]="{'color': isRed ? 'red' : 'blue', 'font-size': fontSize + 'px'}">
    Dynamic styling
</div>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    isRed = true;
    fontSize = 16;
}
            

The `ngClass` directive allows you to dynamically add or remove CSS classes based on an expression.

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">
    Dynamic classes
</div>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    isActive = true;
    isDisabled = false;
}
            

Angular guards are used to protect routes and control access. They can be implemented using interfaces such as `CanActivate`, `CanDeactivate`, `Resolve`, and `CanLoad`.

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 isAuthenticated = false; // Replace with actual authentication check
        if (isAuthenticated) {
            return true;
        } else {
            this.router.navigate(['/login']);
            return false;
        }
    }
}

// In app-routing.module.ts
const routes: Routes = [
    { path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] }
];
            

The `@ContentChild` and `@ContentChildren` decorators are used to access content projected into a component using `ng-content`.

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

@Component({
    selector: 'app-parent',
    template: '<ng-content></ng-content>',
})
export class ParentComponent implements AfterContentInit {
    @ContentChild('header') header: ElementRef;
    @ContentChildren('item') items: QueryList<ElementRef>;

    ngAfterContentInit() {
        console.log(this.header.nativeElement.textContent);
        this.items.forEach(item => console.log(item.nativeElement.textContent));
    }
}

// In the parent component template
<app-parent>
    </app-parent><app-parent><h1 #header>Header</h1>
    <p #item>Item 1</p>
    <p #item>Item 2</p>
</app-parent>
            

`Renderer2` is an Angular service used to manipulate the DOM in a way that is safe and compatible with different platforms.

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

@Component({
    selector: 'app-example',
    template: '<div #myDiv></div>',
})
export class ExampleComponent implements AfterViewInit {
    constructor(private renderer: Renderer2, private el: ElementRef) { }

    ngAfterViewInit() {
        const div = this.el.nativeElement.querySelector('div');
        this.renderer.setStyle(div, 'color', 'red');
    }
}
            

`FormArray` is used to manage an array of form controls or form groups. It allows dynamic addition and removal of form elements.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            items: this.fb.array([])
        });
    }

    get items() {
        return this.form.get('items') as FormArray;
    }

    addItem() {
        this.items.push(this.fb.control(''));
    }

    removeItem(index: number) {
        this.items.removeAt(index);
    }
}
            

Use `NgModule` imports to include other modules in your module and exports to make components, directives, or pipes available outside the module.

@NgModule({
    imports: [CommonModule, FormsModule],
    declarations: [MyComponent],
    exports: [MyComponent]
})
export class MyModule { }
            

`@ViewChild` and `@ViewChildren` are used to access elements or components within the component's view.

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

@Component({
    selector: 'app-example',
    template: `
        <p #paragraph>Paragraph 1</p>
        <p #paragraph>Paragraph 2</p>
    `,
})
export class ExampleComponent implements AfterViewInit {
    @ViewChild('paragraph') paragraph: ElementRef;
    @ViewChildren('paragraph') paragraphs: QueryList<ElementRef>;

    ngAfterViewInit() {
        console.log(this.paragraph.nativeElement.textContent);
        this.paragraphs.forEach(p => console.log(p.nativeElement.textContent));
    }
}
            

Angular pipes transform data in templates. You can create custom pipes by implementing the `PipeTransform` interface.

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

@Pipe({
    name: 'reverse'
})
export class ReversePipe implements PipeTransform {
    transform(value: string): string {
        return value.split('').reverse().join('');
    }
}

// In the component template
<p>{{ 'Hello' | reverse }}</p>
            

Lifecycle hooks are methods that Angular calls at different stages of a component's lifecycle, such as `ngOnInit`, `ngOnChanges`, `ngOnDestroy`, etc.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent implements OnInit, OnDestroy {
    ngOnInit() {
        console.log('Component initialized');
    }

    ngOnDestroy() {
        console.log('Component destroyed');
    }
}
            

The `ChangeDetectorRef` service is used to manually trigger change detection.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    constructor(private cdr: ChangeDetectorRef) { }

    triggerChangeDetection() {
        this.cdr.detectChanges();
    }
}
            

Form validation in Angular is handled using validators on form controls or form groups. Validators can be synchronous or asynchronous.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['', [Validators.required, Validators.minLength(3)]]
        });
    }

    get name() {
        return this.form.get('name');
    }

    onSubmit() {
        if (this.form.valid) {
            console.log(this.form.value);
        }
    }
}
            

Use `HttpInterceptor` to intercept HTTP requests and responses for tasks such as adding headers or logging.

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const authReq = req.clone({
            headers: req.headers.set('Authorization', 'Bearer token')
        });
        return next.handle(authReq);
    }
}

// In app.module.ts
providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]
            

The `@Input` decorator allows a component to receive data from its parent, and the `@Output` decorator allows a component to emit events to its parent.

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

@Component({
    selector: 'app-child',
    template: `<button (click)="notify()">Notify</button>`,
})
export class ChildComponent {
    @Input() message: string;
    @Output() notify: EventEmitter<string> = new EventEmitter<string>();

    notifyParent() {
        this.notify.emit('Hello from child');
    }
}

@Component({
    selector: 'app-parent',
    template: `<app-child [message]="parentMessage" (notify)="onNotify($event)"></app-child>`,
})
export class ParentComponent {
    parentMessage = 'Message from parent';

    onNotify(message: string) {
        console.log(message);
    }
}
            

Create a lazy-loaded module by using the `loadChildren` property in the routing configuration.

const routes: Routes = [
    {
        path: 'lazy',
        loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
    }
];
            

Use `NgModule` to organize an application into cohesive blocks of functionality, which helps with code organization and reusability.

@NgModule({
    declarations: [Component1, Component2],
    imports: [CommonModule, FormsModule],
    exports: [Component1]
})
export class SharedModule { }
            

`ViewEncapsulation` controls how styles are encapsulated within a component. Options include `Emulated`, `Native`, and `None`.

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

@Component({
    selector: 'app-example',
    template: '...',
    styles: [`p { color: red; }`],
    encapsulation: ViewEncapsulation.None
})
export class ExampleComponent { }
            

The `async` pipe automatically subscribes to an observable or promise and returns the latest value.

@Component({
    selector: 'app-example',
    template: `<p>{{ data$ | async }}</p>`,
})
export class ExampleComponent {
    data$ = this.dataService.getData();

    constructor(private dataService: DataService) { }
}
            

The `ngFor` directive is used to repeat a block of HTML for each item in an array or list.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    items = ['Item 1', 'Item 2', 'Item 3'];
}
            

The `ngIf` directive conditionally includes or excludes a block of HTML based on an expression.

<p *ngIf="isVisible">Visible content</p>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    isVisible = true;
}
            

The `ngSwitch` directive allows you to conditionally include one of multiple elements based on a value.

<div [ngSwitch]="selectedValue">
    <p *ngSwitchCase="'A'">Case A</p>
    <p *ngSwitchCase="'B'">Case B</p>
    <p *ngSwitchDefault>Default case</p>
</div>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    selectedValue = 'A';
}
            

The `@Injectable` decorator marks a class as available to be provided and injected as a dependency.

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

@Injectable({
    providedIn: 'root',
})
export class ExampleService {
    constructor() { }
}
            

`NgZone` is used to execute code inside or outside Angular's zone to control change detection.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    constructor(private ngZone: NgZone) { }

    runOutsideAngular() {
        this.ngZone.runOutsideAngular(() => {
            // Code here will not trigger Angular's change detection
        });
    }
}
            

The `@HostListener` decorator allows you to listen to events on the host element of a directive or component.

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

@Directive({
    selector: '[appHover]'
})
export class HoverDirective {
    @HostListener('mouseenter') onMouseEnter() {
        console.log('Mouse entered');
    }

    @HostListener('mouseleave') onMouseLeave() {
        console.log('Mouse left');
    }
}
            

`@ViewEncapsulation` controls how styles are applied to the component's view. It can be `Emulated`, `Native`, or `None`.

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

@Component({
    selector: 'app-example',
    template: `<p>Styled text</p>`,
    styles: [`p { color: green; }`],
    encapsulation: ViewEncapsulation.Emulated
})
export class ExampleComponent { }
            

`Renderer2` is a service for safely manipulating the DOM.

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

@Component({
    selector: 'app-example',
    template: `<div #myDiv></div>`,
})
export class ExampleComponent implements OnInit {
    constructor(private renderer: Renderer2, private el: ElementRef) { }

    ngOnInit() {
        const div = this.el.nativeElement.querySelector('div');
        this.renderer.setStyle(div, 'color', 'blue');
    }
}
            

`HttpClient` is used to make HTTP requests and handle responses.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    constructor(private http: HttpClient) { }

    fetchData() {
        this.http.get('https://api.example.com/data').subscribe(data => {
            console.log(data);
        });
    }
}
            

`NgModule` is used to organize an Angular application into cohesive blocks of functionality.

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

Create a custom directive to modify the behavior or appearance of elements.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef, private renderer: Renderer2) { }

    @HostListener('mouseenter') onMouseEnter() {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
    }
}
            

`ngOnInit` is used for component initialization, while `ngOnChanges` is used to respond to changes in input properties.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent implements OnInit, OnChanges {
    @Input() data: string;

    ngOnInit() {
        console.log('Component initialized');
    }

    ngOnChanges(changes: SimpleChanges) {
        console.log('Input properties changed', changes);
    }
}
            

`FormBuilder` simplifies the creation of reactive forms.

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

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]]
        });
    }

    onSubmit() {
        console.log(this.form.value);
    }
}
            

`@Input` allows a parent component to pass data to a child component, and `@Output` allows a child component to emit events to a parent component.

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

@Component({
    selector: 'app-child',
    template: `<button (click)="notify()">Notify</button>`,
})
export class ChildComponent {
    @Input() childData: string;
    @Output() notify: EventEmitter<string> = new EventEmitter<string>();

    notifyParent() {
        this.notify.emit('Data from child');
    }
}

@Component({
    selector: 'app-parent',
    template: `<app-child [childData]="parentData" (notify)="handleNotify($event)"></app-child>`,
})
export class ParentComponent {
    parentData = 'Data from parent';

    handleNotify(data: string) {
        console.log(data);
    }
}
            

Use Angular's Router module to define routes and navigate between different views.

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

const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: '**', redirectTo: 'home' }
];

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

Create a feature module to encapsulate related components, directives, and services.

@NgModule({
    declarations: [FeatureComponent],
    imports: [CommonModule, SharedModule],
    exports: [FeatureComponent]
})
export class FeatureModule { }
            

`@ViewChild` allows you to access a child component or directive, and `@ContentChild` allows you to access projected content.

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

@Component({
    selector: 'app-example',
    template: `<p #paragraph>Content</p><ng-content></ng-content>`,
})
export class ExampleComponent {
    @ViewChild('paragraph') paragraph: ElementRef;
    @ContentChild('content') content: ElementRef;

    ngAfterViewInit() {
        console.log(this.paragraph.nativeElement.textContent);
    }

    ngAfterContentInit() {
        console.log(this.content.nativeElement.textContent);
    }
}
            

`ngStyle` is used to dynamically set multiple inline styles for an element.

@Component({
    selector: 'app-example',
    template: `<div [ngStyle]="{'color': color, 'font-size': fontSize}">Styled text</div>`,
})
export class ExampleComponent {
    color = 'blue';
    fontSize = '20px';
}
            

`ngClass` is used to dynamically add or remove CSS classes from an element based on conditions.

@Component({
    selector: 'app-example',
    template: `<div [ngClass]="{'active': isActive, 'inactive': !isActive}">Classy div</div>`,
})
export class ExampleComponent {
    isActive = true;
}
            

`ngFor` can be used to iterate over objects by using the `keyvalue` pipe.

<ul>
    <li *ngFor="let entry of object | keyvalue">{{ entry.key }}: {{ entry.value }}</li>
</ul>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent {
    object = { name: 'John', age: 30 };
}
            

`ngTemplateOutlet` is used to dynamically insert an ` ` into the DOM.

<ng-template #template>
    </ng-template><ng-template #template><p>Template content</p>
</ng-template>

<div [ngTemplateOutlet]="template"></div>

@Component({
    selector: 'app-example',
    template: '...',
})
export class ExampleComponent { }
            

`ngContent` is used to project content into a component's template.

@Component({
    selector: 'app-example',
    template: `<ng-content></ng-content>`,
})
export class ExampleComponent { }

@Component({
    selector: 'app-parent',
    template: `<app-example></app-example><app-example><p>Projected content</p></app-example>`,
})
export class ParentComponent { }
            

`@HostBinding` is used to bind properties of the host element to component or directive properties.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    @HostBinding('class.highlighted') isHighlighted = true;
}
            

`FormArray` is used to manage a collection of form controls in Angular reactive forms.

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

@Component({
    selector: 'app-dynamic-form',
    template: `
        <form [formGroup]="form">
            <div formArrayName="items">
                <div *ngFor="let item of items.controls; let i = index">
                    <input [formControlName]="i" />
                </div>
            </div>
            <button (click)="addItem()">Add Item</button>
        </form>
    `,
})
export class DynamicFormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            items: this.fb.array([])
        });
    }

    get items() {
        return this.form.get('items') as FormArray;
    }

    addItem() {
        this.items.push(this.fb.control(''));
    }
}
            

Lazy loading is implemented using Angular's routing module by defining routes with a loadChildren property.

const routes: Routes = [
    {
        path: 'feature',
        loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
    }
];
            

HTTP errors can be handled using Angular's `HttpInterceptor` to catch and process HTTP errors globally.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler) {
        return next.handle(req).pipe(
            catchError((error: HttpErrorResponse) => {
                // Handle error
                console.error('HTTP Error:', error);
                return throwError(error);
            })
        );
    }
}
            

`@ContentChildren` allows querying of projected content in Angular.

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'app-parent',
    template: `
        <ng-content></ng-content>
    `,
})
export class ParentComponent implements AfterContentInit {
    @ContentChildren(ChildComponent) children: QueryList<ChildComponent>;

    ngAfterContentInit() {
        console.log(this.children.toArray());
    }
}
            

The `ngIf` directive can be used with `else` to conditionally display alternate content.

@Component({
    selector: 'app-example',
    template: `
        <div *ngIf="isVisible; else notVisible">Content is visible</div>
        <ng-template #notVisible>Content is not visible</ng-template>
    `,
})
export class ExampleComponent {
    isVisible = true;
}
            

The `trackBy` function is used to optimize the rendering of lists by tracking changes to items in the list.

@Component({
    selector: 'app-example',
    template: `
        <div *ngFor="let item of items; trackBy: trackById">{{ item.name }}</div>
    `,
})
export class ExampleComponent {
    items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];

    trackById(index: number, item: any) {
        return item.id;
    }
}
            

A custom pipe is created to transform data in the template.

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

@Pipe({
    name: 'reverse'
})
export class ReversePipe implements PipeTransform {
    transform(value: string): string {
        return value.split('').reverse().join('');
    }
}
            

`@HostListener` allows listening to events on the host element of a directive or component.

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

@Directive({
    selector: '[appHover]'
})
export class HoverDirective {
    @HostListener('mouseenter') onMouseEnter() {
        console.log('Mouse entered');
    }

    @HostListener('mouseleave') onMouseLeave() {
        console.log('Mouse left');
    }
}
            

Form validation can be handled using Angular's reactive forms and built-in validators.

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

@Component({
    selector: 'app-form',
    template: `
        <form [formGroup]="form" (ngSubmit)="onSubmit()">
            <input formControlName="name" />
            <div *ngIf="form.controls['name'].invalid">Name is required</div>
            <button type="submit">Submit</button>
        </form>
    `,
})
export class FormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['', Validators.required]
        });
    }

    onSubmit() {
        console.log(this.form.value);
    }
}
            

The `@Inject` decorator is used to specify the provider to be injected into a class.

import { Injectable, Inject } from '@angular/core';
import { API_URL } from './tokens';

@Injectable({
    providedIn: 'root'
})
export class ApiService {
    constructor(@Inject(API_URL) private apiUrl: string) { }
}
            

Custom error handling can be implemented using Angular's `HttpInterceptor` to catch and handle HTTP errors.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable()
export class CustomErrorInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler) {
        return next.handle(req).pipe(
            catchError((error: HttpErrorResponse) => {
                // Custom error handling logic
                console.error('An error occurred:', error.message);
                return throwError(error);
            })
        );
    }
}
            

A reusable component is created by defining it with a selector and providing inputs and outputs.

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

@Component({
    selector: 'app-reusable',
    template: `
        <button (click)="onClick()">Click me</button>
    `,
})
export class ReusableComponent {
    @Input() label: string;
    @Output() clicked = new EventEmitter<void>();

    onClick() {
        this.clicked.emit();
    }
}
            

Dependency Injection is used to inject services or other dependencies into components or services.

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

@Injectable({
    providedIn: 'root'
})
export class DataService {
    getData() {
        return ['Item 1', 'Item 2'];
    }
}
            

Application state can be managed using services, or state management libraries like NgRx or Akita.

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

@Injectable({
    providedIn: 'root'
})
export class StateService {
    private state = new BehaviorSubject<any>({});
    state$ = this.state.asObservable();

    setState(newState: any) {
        this.state.next(newState);
    }
}
            

Build and deployment settings are configured in the `angular.json` file.

{
    "projects": {
        "my-app": {
            "architect": {
                "build": {
                    "options": {
                        "outputPath": "dist/my-app",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "tsConfig": "tsconfig.app.json"
                    }
                }
            }
        }
    }
}
            

Route guards are used to control access to routes based on conditions.

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 {
        // Check authentication status
        const isAuthenticated = false;
        if (!isAuthenticated) {
            this.router.navigate(['/login']);
            return false;
        }
        return true;
    }
}
            

`HttpClient` is used for making HTTP requests to a backend API.

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

@Injectable({
    providedIn: 'root'
})
export class ApiService {
    constructor(private http: HttpClient) { }

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

Services are used to share data and logic across multiple components.

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

@Injectable({
    providedIn: 'root'
})
export class DataService {
    getData() {
        return ['Item 1', 'Item 2'];
    }
}
            

`@Input` is used to pass data to a child component, and `@Output` is used to emit events from a child component.

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

@Component({
    selector: 'app-child',
    template: `<button (click)="notify()">Notify</button>`,
})
export class ChildComponent {
    @Input() data: string;
    @Output() notifyEvent = new EventEmitter<string>();

    notify() {
        this.notifyEvent.emit('Notification from child');
    }
}
            

`@ViewChild` is used to access a child component or DOM element from the parent component.

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

@Component({
    selector: 'app-parent',
    template: `<p #paragraph>Paragraph</p>`,
})
export class ParentComponent implements AfterViewInit {
    @ViewChild('paragraph') paragraph: ElementRef;

    ngAfterViewInit() {
        console.log(this.paragraph.nativeElement.textContent);
    }
}
            

The `ngSwitch` directive is used to conditionally display one of several elements based on the value of an expression.

@Component({
    selector: 'app-switch',
    template: `
        <div [ngSwitch]="value">
            <p *ngSwitchCase="'A'">Case A</p>
            <p *ngSwitchCase="'B'">Case B</p>
            <p *ngSwitchDefault>Default case</p>
        </div>
    `,
})
export class SwitchComponent {
    value = 'A';
}
            

Custom directives can be created to modify the behavior or appearance of elements.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef, private renderer: Renderer2) { }

    @HostListener('mouseenter') onMouseEnter() {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
    }
}
            

HTTP interceptors are used to modify HTTP requests and responses.

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { ErrorInterceptor } from './error.interceptor';

@NgModule({
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
    ]
})
export class AppModule { }
            

The `@HostBinding` decorator binds a property of the host element to a property of the directive or component.

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

@Directive({
    selector: '[appClass]'
})
export class ClassDirective {
    @HostBinding('class.active') isActive = true;
}
            

The `@ViewChildren` decorator is used to query for multiple elements or directives in the template.

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'app-parent',
    template: `
        <app-child *ngFor="let child of children"></app-child>
    `,
})
export class ParentComponent implements AfterViewInit {
    @ViewChildren(ChildComponent) childComponents: QueryList<ChildComponent>;

    ngAfterViewInit() {
        console.log(this.childComponents.toArray());
    }
}
            

Asynchronous operations can be handled using RxJS observables and operators.

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
    selector: 'app-data',
    template: `
        <div *ngIf="data$ | async as data">
            {{ data | json }}
        </div>
    `,
})
export class DataComponent implements OnInit {
    data$ = this.apiService.getData();

    constructor(private apiService: ApiService) { }

    ngOnInit() { }
}
            

The `@ContentChild` decorator allows querying for a single projected content element.

import { Component, ContentChild, AfterContentInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'app-parent',
    template: `<ng-content></ng-content>`,
})
export class ParentComponent implements AfterContentInit {
    @ContentChild(ChildComponent) child: ChildComponent;

    ngAfterContentInit() {
        console.log(this.child);
    }
}
            

The `ngClass` directive is used to add or remove CSS classes dynamically.

@Component({
    selector: 'app-example',
    template: `
        <div [ngClass]="{'active': isActive, 'inactive': !isActive}">
            Conditional classes
        </div>
        <button (click)="toggle()">Toggle</button>
    `,
})
export class ExampleComponent {
    isActive = true;

    toggle() {
        this.isActive = !this.isActive;
    }
}
            

The `ngModel` directive is used for two-way data binding between the form control and the component.

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

@Component({
    selector: 'app-two-way-binding',
    template: `
        <input [(ngModel)]="value" />
        <p>{{ value }}</p>
    `,
})
export class TwoWayBindingComponent {
    value = 'Initial value';
}
            

The `@Injectable` decorator marks a class as a service that can be injected into other components or services.

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

@Injectable({
    providedIn: 'root'
})
export class ExampleService {
    getData() {
        return ['Data 1', 'Data 2'];
    }
}
            

The `Router` service is used to programmatically navigate between routes.

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

@Component({
    selector: 'app-navigate',
    template: `
        <button (click)="goToHome()">Go to Home</button>
    `,
})
export class NavigateComponent {
    constructor(private router: Router) { }

    goToHome() {
        this.router.navigate(['/home']);
    }
}
            

Route resolvers are used to fetch data before navigating to a route.

import { Injectable } from '@angular/core';
import { Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { ApiService } from './api.service';

@Injectable({
    providedIn: 'root'
})
export class DataResolver implements Resolve<any> {
    constructor(private apiService: ApiService) { }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
        return this.apiService.getData();
    }
}
            

Dynamic form controls can be created using Angular's `FormBuilder` service.

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

@Component({
    selector: 'app-dynamic-form',
    template: `
        <form [formGroup]="formGroup">
            <input formControlName="dynamicControl" />
        </form>
    `,
})
export class DynamicFormComponent {
    formGroup: FormGroup;

    constructor(private fb: FormBuilder) {
        this.formGroup = this.fb.group({
            dynamicControl: ['']
        });
    }
}
            

The `trackBy` function improves performance by tracking items by their identity.

@Component({
    selector: 'app-list',
    template: `
        <ul>
            <li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
        </ul>
    `,
})
export class ListComponent {
    items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];

    trackByFn(index: number, item: any) {
        return item.id;
    }
}
            

The `ngIf` directive can conditionally display elements with an `else` block.

@Component({
    selector: 'app-condition',
    template: `
        <div *ngIf="isVisible; else elseBlock">Visible</div>
        <ng-template #elseBlock>Not visible</ng-template>
    `,
})
export class ConditionComponent {
    isVisible = true;
}
            

`HttpClient` is used for making POST requests to a backend API.

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

@Injectable({
    providedIn: 'root'
})
export class ApiService {
    constructor(private http: HttpClient) { }

    postData(data: any) {
        return this.http.post('https://api.example.com/data', data);
    }
}
            

The `FormArray` is used to manage an array of form controls.

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

@Component({
    selector: 'app-dynamic-form-array',
    template: `
        <form [formGroup]="formGroup">
            <div formArrayName="items">
                <div *ngFor="let item of items.controls; let i = index">
                    <input [formControlName]="i" />
                </div>
            </div>
            <button (click)="addItem()">Add Item</button>
        </form>
    `,
})
export class DynamicFormArrayComponent {
    formGroup: FormGroup;

    constructor(private fb: FormBuilder) {
        this.formGroup = this.fb.group({
            items: this.fb.array([this.fb.control('')])
        });
    }

    get items() {
        return this.formGroup.get('items') as FormArray;
    }

    addItem() {
        this.items.push(this.fb.control(''));
    }
}
            

The `ngOnDestroy` lifecycle hook is used to clean up resources when a component is destroyed.

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

@Component({
    selector: 'app-cleanup',
    template: `<p>Cleanup example</p>`,
})
export class CleanupComponent implements OnDestroy {
    private subscription: Subscription;

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}
            

The `ng-template` directive defines a template that can be reused or rendered conditionally.

@Component({
    selector: 'app-template',
    template: `
        <ng-template #template let-data="data">
            </ng-template><ng-template #template let-data="data"><p>{{ data }}</p>
        </ng-template>
        <ng-container *ngTemplateOutlet="template; context: { data: 'Template data' }"></ng-container>
    `,
})
export class TemplateComponent { }
            

The `trackBy` function helps Angular track items in a list and improve rendering performance.

@Component({
    selector: 'app-track-by',
    template: `
        <ul>
            <li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
        </ul>
    `,
})
export class TrackByComponent {
    items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];

    trackByFn(index: number, item: any) {
        return item.id;
    }
}
            

The `@ViewChild` decorator can be used with a static flag to determine when the query should be resolved.

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'app-parent',
    template: `<app-child></app-child>`,
})
export class ParentComponent implements AfterViewInit {
    @ViewChild(ChildComponent, { static: true }) child: ChildComponent;

    ngAfterViewInit() {
        console.log(this.child);
    }
}
            

The `let` syntax in `ngFor` allows you to define a variable for each item in the loop.

@Component({
    selector: 'app-list',
    template: `
        <ul>
            <li *ngFor="let item of items; let i = index">
                {{ i + 1 }}: {{ item }}
            </li>
        </ul>
    `,
})
export class ListComponent {
    items = ['Item 1', 'Item 2', 'Item 3'];
}
            

The `@Input` decorator is used to pass data from a parent component to a child component, while the `@Output` decorator is used to emit events from the child to the parent.

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

@Component({
    selector: 'app-child',
    template: `
        <button (click)="notifyParent()">Notify Parent</button>
    `,
})
export class ChildComponent {
    @Input() data: string;
    @Output() notify = new EventEmitter<string>();

    notifyParent() {
        this.notify.emit('Data from child');
    }
}

@Component({
    selector: 'app-parent',
    template: `
        <app-child [data]="parentData" (notify)="handleNotification($event)"></app-child>
    `,
})
export class ParentComponent {
    parentData = 'Data from parent';

    handleNotification(message: string) {
        console.log(message);
    }
}
            

The `@ContentChildren` decorator queries for multiple projected content elements in a component.

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'app-parent',
    template: `<ng-content></ng-content>`,
})
export class ParentComponent implements AfterContentInit {
    @ContentChildren(ChildComponent) children: QueryList<ChildComponent>;

    ngAfterContentInit() {
        this.children.forEach(child => console.log(child));
    }
}
            

`FormGroup` and `FormControl` are used to create and manage reactive forms.

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

@Component({
    selector: 'app-reactive-form',
    template: `
        <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
            <input formControlName="name" />
            <button type="submit">Submit</button>
        </form>
    `,
})
export class ReactiveFormComponent {
    formGroup: FormGroup;

    constructor(private fb: FormBuilder) {
        this.formGroup = this.fb.group({
            name: ['', Validators.required]
        });
    }

    onSubmit() {
        console.log(this.formGroup.value);
    }
}
            

The `FormBuilder` service simplifies form creation and validation in Angular forms.

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

@Component({
    selector: 'app-builder-form',
    template: `
        <form [formGroup]="formGroup">
            <input formControlName="email" />
        </form>
    `,
})
export class BuilderFormComponent {
    formGroup: FormGroup;

    constructor(private fb: FormBuilder) {
        this.formGroup = this.fb.group({
            email: ['']
        });
    }
}
            

The `Validators` class provides built-in validation functions for forms.

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

@Component({
    selector: 'app-validate-form',
    template: `
        <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
            <input formControlName="email" />
            <div *ngIf="formGroup.controls.email.invalid">Invalid email</div>
            <button type="submit">Submit</button>
        </form>
    `,
})
export class ValidateFormComponent {
    formGroup: FormGroup;

    constructor(private fb: FormBuilder) {
        this.formGroup = this.fb.group({
            email: ['', [Validators.required, Validators.email]]
        });
    }

    onSubmit() {
        console.log(this.formGroup.value);
    }
}
            

Lazy loading allows modules to be loaded on demand, improving application performance.

const routes: Routes = [
    {
        path: 'lazy',
        loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
    }
];

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

Form submission in reactive forms can be handled by subscribing to the form's `valueChanges` or `statusChanges` observable.

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

@Component({
    selector: 'app-reactive-form',
    template: `
        <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
            <input formControlName="name" />
            <button type="submit">Submit</button>
        </form>
    `,
})
export class ReactiveFormComponent {
    formGroup: FormGroup;

    constructor(private fb: FormBuilder) {
        this.formGroup = this.fb.group({
            name: ['']
        });

        this.formGroup.valueChanges.subscribe(value => {
            console.log('Form value changed:', value);
        });
    }

    onSubmit() {
        console.log(this.formGroup.value);
    }
}
            

An `HttpInterceptor` can be used to modify HTTP requests or responses globally.

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const clonedReq = req.clone({
            setHeaders: {
                Authorization: `Bearer your-token`
            }
        });

        return next.handle(clonedReq);
    }
}
            

Route guards can be used to control access to routes based on certain conditions.

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 = false; // Replace with actual login check
        if (!isLoggedIn) {
            this.router.navigate(['/login']);
            return false;
        }
        return true;
    }
}
            

Custom directives can be created to extend HTML elements with additional behavior.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef, private renderer: Renderer2) {}

    @HostListener('mouseenter') onMouseEnter() {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'transparent');
    }
}
            

The `ChangeDetectorRef` service allows you to manually control change detection.

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

@Component({
    selector: 'app-manual-detection',
    template: `<p>{{ message }}</p>`,
})
export class ManualDetectionComponent {
    message = 'Initial message';

    constructor(private cdRef: ChangeDetectorRef) {}

    updateMessage() {
        this.message = 'Updated message';
        this.cdRef.detectChanges();
    }
}
            

The `EventEmitter` class is used to emit custom events from child components to parent components.

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

@Component({
    selector: 'app-child',
    template: `<button (click)="sendEvent()">Send Event</button>`,
})
export class ChildComponent {
    @Output() event = new EventEmitter<string>();

    sendEvent() {
        this.event.emit('Data from child');
    }
}

@Component({
    selector: 'app-parent',
    template: `
        <app-child (event)="handleEvent($event)"></app-child>
    `,
})
export class ParentComponent {
    handleEvent(message: string) {
        console.log(message);
    }
}
            

Feature modules allow you to organize application functionality into cohesive blocks.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';

@NgModule({
    declarations: [FeatureComponent],
    imports: [CommonModule],
    exports: [FeatureComponent]
})
export class FeatureModule { }
            

The `NgZone` service helps control Angular's change detection process manually.

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

@Component({
    selector: 'app-zone',
    template: `<p>{{ message }}</p>`,
})
export class ZoneComponent {
    message = 'Initial message';

    constructor(private ngZone: NgZone) {
        this.ngZone.runOutsideAngular(() => {
            setTimeout(() => {
                this.message = 'Updated message';
                this.ngZone.run(() => console.log('Change detected'));
            }, 1000);
        });
    }
}
            

The `@HostListener` decorator allows you to listen to DOM events directly on the host element of a directive or component.

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

@Directive({
    selector: '[appClickTracker]'
})
export class ClickTrackerDirective {
    @HostListener('click', ['$event']) onClick(event: Event) {
        console.log('Element clicked:', event);
    }
}
            

The `@ViewChildren` decorator queries for multiple elements within the view of a component.

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'app-parent',
    template: `<app-child></app-child><app-child></app-child>`,
})
export class ParentComponent implements AfterViewInit {
    @ViewChildren(ChildComponent) children: QueryList<ChildComponent>;

    ngAfterViewInit() {
        this.children.forEach(child => console.log(child));
    }
}
            

The `ngOnChanges` lifecycle hook is used to respond to changes in input properties.

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

@Component({
    selector: 'app-changes',
    template: `<p>{{ inputValue }}</p>`,
})
export class ChangesComponent implements OnChanges {
    @Input() inputValue: string;

    ngOnChanges(changes: SimpleChanges) {
        console.log('Changes:', changes);
    }
}
            

The `ngOnInit` lifecycle hook is used for component initialization logic.

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

@Component({
    selector: 'app-init',
    template: `<p>Component initialized</p>`,
})
export class InitComponent implements OnInit {
    ngOnInit() {
        console.log('Component initialized');
    }
}
            

The `ngOnDestroy` lifecycle hook is used to clean up resources and unsubscribe from observables.

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

@Component({
    selector: 'app-destroy',
    template: `<p>Component destroyed</p>`,
})
export class DestroyComponent implements OnDestroy {
    private subscription: Subscription;

    ngOnDestroy() {
        // Unsubscribe to avoid memory leaks
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
}
            

The `ngModel` directive is used for two-way data binding between form controls and component properties.

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

@Component({
    selector: 'app-two-way-binding',
    template: `
        <input [(ngModel)]="value" />
        <p>Value: {{ value }}</p>
    `,
})
export class TwoWayBindingComponent {
    value: string = '';
}
            

The `@HostBinding` decorator is used to bind a property of the host element to a property of the directive or component.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    @HostBinding('class.highlight') isHighlighted = true;
}
            

The `@HostListener` decorator allows you to listen to events on the host element of the directive or component.

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

@Directive({
    selector: '[appClickTracker]'
})
export class ClickTrackerDirective {
    @HostListener('click', ['$event']) onClick(event: Event) {
        console.log('Element clicked:', event);
    }
}
            

The `ngOnChanges` lifecycle hook responds to changes in input properties.

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

@Component({
    selector: 'app-changes',
    template: `<p>{{ inputValue }}</p>`,
})
export class ChangesComponent implements OnChanges {
    @Input() inputValue: string;

    ngOnChanges(changes: SimpleChanges) {
        console.log('Changes:', changes);
    }
}
            

The `ngOnInit` lifecycle hook is used for component initialization logic.

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

@Component({
    selector: 'app-init',
    template: `<p>Component initialized</p>`,
})
export class InitComponent implements OnInit {
    ngOnInit() {
        console.log('Component initialized');
    }
}
            

The `ngAfterViewInit` lifecycle hook is used after the component's view and child views have been initialized.

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

@Component({
    selector: 'app-view-init',
    template: `<div #myDiv>Content</div>`,
})
export class ViewInitComponent implements AfterViewInit {
    @ViewChild('myDiv') div: ElementRef;

    ngAfterViewInit() {
        console.log(this.div.nativeElement.textContent);
    }
}
            

The `ngAfterContentInit` lifecycle hook is used after Angular initializes the content of the component.

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

@Component({
    selector: 'app-content-init',
    template: `<ng-content></ng-content>`,
})
export class ContentInitComponent implements AfterContentInit {
    @ContentChild('content') content: ElementRef;

    ngAfterContentInit() {
        console.log(this.content.nativeElement.textContent);
    }
}
            

The `ngAfterViewChecked` lifecycle hook is used after Angular checks the component's view and child views.

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

@Component({
    selector: 'app-view-checked',
    template: `<p>Check view</p>`,
})
export class ViewCheckedComponent implements AfterViewChecked {
    ngAfterViewChecked() {
        console.log('View checked');
    }
}
            

The `ngAfterContentChecked` lifecycle hook is used after Angular checks the content projected into the component.

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

@Component({
    selector: 'app-content-checked',
    template: `<p>Check content</p>`,
})
export class ContentCheckedComponent implements AfterContentChecked {
    ngAfterContentChecked() {
        console.log('Content checked');
    }
}
            

The `ngOnDestroy` lifecycle hook is used to perform cleanup just before Angular destroys the component.

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

@Component({
    selector: 'app-destroy',
    template: `<p>Component destroyed</p>`,
})
export class DestroyComponent implements OnDestroy {
    private subscription: Subscription;

    ngOnDestroy() {
        // Unsubscribe to avoid memory leaks
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
}
            

The `@Input` decorator allows data to be passed from a parent component to a child component.

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

@Component({
    selector: 'app-child',
    template: `<p>{{ data }}</p>`,
})
export class ChildComponent {
    @Input() data: string;
}

@Component({
    selector: 'app-parent',
    template: `<app-child [data]="parentData"></app-child>`,
})
export class ParentComponent {
    parentData = 'Data from parent';
}
            

The `@Output` decorator is used to emit events from a child component to a parent component.

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

@Component({
    selector: 'app-child',
    template: `<button (click)="sendData()">Send Data</button>`,
})
export class ChildComponent {
    @Output() dataEvent = new EventEmitter<string>();

    sendData() {
        this.dataEvent.emit('Data from child');
    }
}

@Component({
    selector: 'app-parent',
    template: `
        <app-child (dataEvent)="receiveData($event)"></app-child>
        <p>{{ receivedData }}</p>
    `,
})
export class ParentComponent {
    receivedData: string;

    receiveData(data: string) {
        this.receivedData = data;
    }
}
            

The `@ViewChild` decorator allows querying a single element or directive from the component's view.

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

@Component({
    selector: 'app-view-child',
    template: `<div #myDiv>Content</div>`,
})
export class ViewChildComponent implements AfterViewInit {
    @ViewChild('myDiv') div: ElementRef;

    ngAfterViewInit() {
        console.log(this.div.nativeElement.textContent);
    }
}
            

A shared module allows you to share common functionality across multiple modules.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent } from './shared.component';

@NgModule({
    declarations: [SharedComponent],
    imports: [CommonModule],
    exports: [SharedComponent]
})
export class SharedModule { }
            

Routing configuration is done in the `@NgModule` decorator with the `RouterModule.forRoot` method.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent },
];

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

The `ActivatedRoute` service provides access to the route parameters of the active route.

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

@Component({
    selector: 'app-route',
    template: `<p>Parameter: {{ param }}</p>`,
})
export class RouteComponent implements OnInit {
    param: string;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.route.paramMap.subscribe(params => {
            this.param = params.get('id');
        });
    }
}
            

The `RouterLink` directive is used to bind a link to a route in the Angular router.

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

@Component({
    selector: 'app-navigation',
    template: `
        <a routerLink="/home">Home</a>
        <a routerLink="/about">About</a>
    `,
})
export class NavigationComponent { }
            

The `Router` service allows you to navigate programmatically to different routes.

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

@Component({
    selector: 'app-navigation',
    template: `<button (click)="navigate()">Go to About</button>`,
})
export class NavigationComponent {
    constructor(private router: Router) {}

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

The `FormControl` class is used to manage the value and validation status of form inputs.

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

@Component({
    selector: 'app-form',
    template: `
        <input [formControl]="nameControl" />
        <p>Value: {{ nameControl.value }}</p>
    `,
})
export class FormComponent {
    nameControl = new FormControl('');
}
            

The `FormArray` class is used to manage an array of form controls.

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

@Component({
    selector: 'app-form-array',
    template: `
        <form [formGroup]="form">
            <div formArrayName="items">
                <div *ngFor="let item of items.controls; let i = index">
                    <input [formControlName]="i" />
                </div>
            </div>
            <button (click)="addItem()">Add Item</button>
        </form>
    `,
})
export class FormArrayComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            items: this.fb.array([this.fb.control('')])
        });
    }

    get items() {
        return this.form.get('items') as FormArray;
    }

    addItem() {
        this.items.push(this.fb.control(''));
    }
}
            

Reactive forms allow you to create forms with validation using `FormControl` and `FormGroup` classes.

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

@Component({
    selector: 'app-reactive-form',
    template: `
        <form [formGroup]="form" (ngSubmit)="onSubmit()">
            <input formControlName="name" placeholder="Name" />
            <div *ngIf="form.controls.name.invalid && form.controls.name.touched">
                Name is required
            </div>
            <button type="submit" [disabled]="form.invalid">Submit</button>
        </form>
    `,
})
export class ReactiveFormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['', Validators.required]
        });
    }

    onSubmit() {
        console.log(this.form.value);
    }
}
            

The `FormBuilder` class helps create complex forms with nested controls.

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

@Component({
    selector: 'app-nested-form',
    template: `
        <form [formGroup]="form">
            <div formGroupName="address">
                <input formControlName="street" placeholder="Street" />
                <input formControlName="city" placeholder="City" />
            </div>
        </form>
    `,
})
export class NestedFormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            address: this.fb.group({
                street: [''],
                city: ['']
            })
        });
    }
}
            

You can create custom validators and use them with form controls.

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

@Component({
    selector: 'app-custom-validation',
    template: `
        <form [formGroup]="form">
            <input formControlName="password" placeholder="Password" />
            <div *ngIf="form.controls.password.errors?.pattern">
                Password must contain at least one uppercase letter
            </div>
        </form>
    `,
})
export class CustomValidationComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            password: ['', [Validators.required, this.uppercaseValidator]]
        });
    }

    uppercaseValidator(control) {
        const hasUppercase = /[A-Z]/.test(control.value);
        return hasUppercase ? null : { pattern: true };
    }
}
            

Asynchronous validators are used to perform validation that requires an HTTP request or other async operations.

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, AsyncValidatorFn, AbstractControl } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { debounceTime, map, catchError } from 'rxjs/operators';

@Component({
    selector: 'app-async-validator',
    template: `
        <form [formGroup]="form">
            <input formControlName="username" placeholder="Username" />
            <div *ngIf="form.controls.username.errors?.taken">
                Username is taken
            </div>
        </form>
    `,
})
export class AsyncValidatorComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            username: ['', null, this.usernameValidator()]
        });
    }

    usernameValidator(): AsyncValidatorFn {
        return (control: AbstractControl): Observable<any> => {
            return of(control.value).pipe(
                debounceTime(300),
                map(value => value === 'admin' ? { taken: true } : null),
                catchError(() => of(null))
            );
        };
    }
}
            

The `HttpClient` service is used to perform HTTP requests.

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

@Component({
    selector: 'app-http',
    template: `
        <p>Data: {{ data | json }}</p>
    `,
})
export class HttpComponent implements OnInit {
    data: any;

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.http.get('https://api.example.com/data').subscribe(response => {
            this.data = response;
        });
    }
}
            

The `HttpInterceptor` allows you to intercept and modify HTTP requests and responses.

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const cloned = req.clone({
            setHeaders: {
                Authorization: 'Bearer my-token'
            }
        });
        return next.handle(cloned);
    }
}
            

The `HttpParams` class is used to build query parameters for HTTP requests.

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

@Component({
    selector: 'app-http-params',
    template: `
        <p>Data: {{ data | json }}</p>
    `,
})
export class HttpParamsComponent implements OnInit {
    data: any;

    constructor(private http: HttpClient) {}

    ngOnInit() {
        const params = new HttpParams().set('param1', 'value1').set('param2', 'value2');
        this.http.get('https://api.example.com/data', { params }).subscribe(response => {
            this.data = response;
        });
    }
}
            

The `NgModel` directive is used for two-way data binding in Angular forms.

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

@Component({
    selector: 'app-ng-model',
    template: `
        <input [(ngModel)]="name" placeholder="Name" />
        <p>Name: {{ name }}</p>
    `,
})
export class NgModelComponent {
    name: string = '';
}
            

Custom pipes allow you to transform data before displaying it in the template.

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

@Pipe({
    name: 'reverse'
})
export class ReversePipe implements PipeTransform {
    transform(value: string): string {
        return value.split('').reverse().join('');
    }
}
            

The `@HostListener` decorator allows you to listen to DOM events in your component or directive.

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

@Directive({
    selector: '[appHover]'
})
export class HoverDirective {
    @HostListener('mouseenter') onMouseEnter() {
        console.log('Mouse entered');
    }

    @HostListener('mouseleave') onMouseLeave() {
        console.log('Mouse left');
    }
}
            

The `@ContentChild` decorator is used to access a single child element projected into a component.

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

@Component({
    selector: 'app-content-child',
    template: `<ng-content></ng-content>`,
})
export class ContentChildComponent implements AfterContentInit {
    @ContentChild('content') content: ElementRef;

    ngAfterContentInit() {
        console.log(this.content.nativeElement.textContent);
    }
}
            

The `ChangeDetectorRef` service allows you to manually trigger change detection.

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

@Component({
    selector: 'app-detection',
    template: `
        <p>{{ message }}</p>
        <button (click)="updateMessage()">Update Message</button>
    `,
})
export class DetectionComponent {
    message: string = 'Initial Message';

    constructor(private cd: ChangeDetectorRef) {}

    updateMessage() {
        this.message = 'Updated Message';
        this.cd.detectChanges();
    }
}
            

The `@Injectable` decorator is used to create a service that can be injected into other components or services.

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

@Injectable({
    providedIn: 'root'
})
export class DataService {
    getData() {
        return ['Item1', 'Item2', 'Item3'];
    }
}
            

Providers can be configured in the `@NgModule` decorator to be available throughout the application or module.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DataService } from './data.service';

@NgModule({
    imports: [CommonModule],
    providers: [DataService]
})
export class SharedModule { }
            

The `ng-content` directive is used to project content into a component's template.

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

@Component({
    selector: 'app-content',
    template: `<ng-content></ng-content>`,
})
export class ContentComponent { }
            

The `@Inject` decorator allows you to specify a dependency to be injected into a component or service.

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

@Component({
    selector: 'app-doc',
    template: `<p>Document title: {{ title }}</p>`,
})
export class DocComponent {
    title: string;

    constructor(@Inject(DOCUMENT) private document: Document) {
        this.title = this.document.title;
    }
}
            

The `@HostBinding` decorator is used to bind properties to the host element of a directive or component.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    @HostBinding('class.highlighted') isHighlighted = true;
}
            

The `@Host` decorator allows you to inject a dependency from the host element.

import { Directive, Host } from '@angular/core';
import { DataService } from './data.service';

@Directive({
    selector: '[appHost]',
})
export class HostDirective {
    constructor(@Host() private dataService: DataService) {
        console.log(this.dataService.getData());
    }
}
            

The `ngOnInit` lifecycle hook is used to perform initialization logic after Angular has initialized the component's data-bound properties.

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

@Component({
    selector: 'app-init',
    template: `<p>Component initialized</p>`,
})
export class InitComponent implements OnInit {
    ngOnInit() {
        console.log('Component initialized');
    }
}
            

The `ngOnDestroy` lifecycle hook is used to perform cleanup just before Angular destroys the component or directive.

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

@Component({
    selector: 'app-destroy',
    template: `<p>Component is being destroyed</p>`,
})
export class DestroyComponent implements OnDestroy {
    private subscription: Subscription = new Subscription();

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}
            

The `@ViewChild` decorator allows you to access a child component or element within the parent component.

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

@Component({
    selector: 'app-view-child',
    template: `<p #paragraph>Some text</p>`,
})
export class ViewChildComponent implements AfterViewInit {
    @ViewChild('paragraph') paragraph: ElementRef;

    ngAfterViewInit() {
        console.log(this.paragraph.nativeElement.textContent);
    }
}
            

The `@ContentChildren` decorator is used to access multiple child elements projected into a component.

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

@Component({
    selector: 'app-content-children',
    template: `<ng-content></ng-content>`,
})
export class ContentChildrenComponent implements AfterContentInit {
    @ContentChildren('content') contents: QueryList<ElementRef>;

    ngAfterContentInit() {
        this.contents.forEach(content => {
            console.log(content.nativeElement.textContent);
        });
    }
}
            

The `ngOnChanges` lifecycle hook allows you to respond to changes in input properties.

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

@Component({
    selector: 'app-changes',
    template: `<p>{{ value }}</p>`,
})
export class ChangesComponent implements OnChanges {
    @Input() value: string;

    ngOnChanges(changes: SimpleChanges) {
        console.log('Changes:', changes);
    }
}
            

The `ngFor` directive is used to iterate over arrays or collections in Angular templates.

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

@Component({
    selector: 'app-ng-for',
    template: `
        <ul>
            <li *ngFor="let item of items">{{ item }}</li>
        </ul>
    `,
})
export class NgForComponent {
    items = ['Item 1', 'Item 2', 'Item 3'];
}
            

The `ngIf` directive conditionally includes or excludes elements from the DOM.

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

@Component({
    selector: 'app-ng-if',
    template: `
        <div *ngIf="isVisible">This is visible</div>
    `,
})
export class NgIfComponent {
    isVisible = true;
}
            

The `ngClass` directive is used to dynamically add or remove CSS classes based on expressions.

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

@Component({
    selector: 'app-ng-class',
    template: `
        <div [ngClass]="{'active': isActive, 'inactive': !isActive}">
            Conditional classes
        </div>
    `,
})
export class NgClassComponent {
    isActive = true;
}
            

The `ngStyle` directive allows you to apply inline styles conditionally based on expressions.

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

@Component({
    selector: 'app-ng-style',
    template: `
        <div [ngStyle]="{'color': color, 'font-size': fontSize}">
            Styled text
        </div>
    `,
})
export class NgStyleComponent {
    color = 'blue';
    fontSize = '20px';
}
            

The `@Pipe` decorator is used to create custom pipes to transform data in templates.

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

@Pipe({
    name: 'uppercase'
})
export class UppercasePipe implements PipeTransform {
    transform(value: string): string {
        return value.toUpperCase();
    }
}
            

The `ngModel` directive is used for two-way data binding in Angular forms.

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

@Component({
    selector: 'app-ng-model',
    template: `
        <input [(ngModel)]="name" placeholder="Name" />
        <p>Name: {{ name }}</p>
    `,
})
export class NgModelComponent {
    name: string = '';
}
            

Reactive forms provide a way to handle form submissions with more control over validation and state.

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

@Component({
    selector: 'app-reactive-form',
    template: `
        <form [formGroup]="form" (ngSubmit)="onSubmit()">
            <input formControlName="name" placeholder="Name" />
            <button type="submit">Submit</button>
        </form>
    `,
})
export class ReactiveFormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['']
        });
    }

    onSubmit() {
        console.log(this.form.value);
    }
}
            

The `FormBuilder` service is used to create form groups in a reactive form.

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

@Component({
    selector: 'app-form-builder',
    template: `
        <form [formGroup]="form">
            <input formControlName="email" placeholder="Email" />
        </form>
    `,
})
export class FormBuilderComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            email: ['']
        });
    }
}
            

The `HttpInterceptor` interface allows you to intercept and modify HTTP requests and responses.

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const authReq = req.clone({
            headers: req.headers.set('Authorization', 'Bearer my-token')
        });
        return next.handle(authReq);
    }
}
            

The `HttpClient` service provides methods to handle errors using RxJS operators.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Component({
    selector: 'app-http-error',
    template: `<p>Check console for errors</p>`,
})
export class HttpErrorComponent {
    constructor(private http: HttpClient) {
        this.http.get('https://api.example.com/data')
            .pipe(catchError(error => {
                console.error('Error occurred:', error);
                return of([]);
            }))
            .subscribe(response => {
                console.log(response);
            });
    }
}
            

The `@Directive` decorator is used to create custom directives that can manipulate the DOM.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef, private renderer: Renderer2) {}

    @HostListener('mouseenter') onMouseEnter() {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
    }
}
            

The `Renderer2` service allows you to interact with the DOM in a safe way.

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

@Directive({
    selector: '[appColor]'
})
export class ColorDirective {
    constructor(private el: ElementRef, private renderer: Renderer2) {
        this.renderer.setStyle(this.el.nativeElement, 'color', 'blue');
    }
}
            

The `@ViewChildren` decorator allows you to query and access multiple child elements or components.

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

@Component({
    selector: 'app-view-children',
    template: `<div #item *ngFor="let i of items">{{ i }}</div>`,
})
export class ViewChildrenComponent implements AfterViewInit {
    @ViewChildren('item') items: QueryList<ElementRef>;

    ngAfterViewInit() {
        this.items.forEach(item => {
            console.log(item.nativeElement.textContent);
        });
    }
}
            

Feature modules are created using the `@NgModule` decorator to group related components, directives, and services.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';

@NgModule({
    imports: [CommonModule],
    declarations: [FeatureComponent],
    exports: [FeatureComponent]
})
export class FeatureModule { }
            

The `RouterModule` is used to configure routes and navigation in an Angular application.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: '', redirectTo: '/home', pathMatch: 'full' }
];

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

The `ActivatedRoute` service allows you to access route parameters in your component.

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

@Component({
    selector: 'app-route-params',
    template: `<p>Route ID: {{ id }}</p>`,
})
export class RouteParamsComponent implements OnInit {
    id: string;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.route.paramMap.subscribe(params => {
            this.id = params.get('id');
        });
    }
}
            

The `HttpClient` service can send POST requests with JSON data using the `post` method.

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

@Component({
    selector: 'app-post-request',
    template: `<p>Check console for response</p>`,
})
export class PostRequestComponent {
    constructor(private http: HttpClient) {
        this.http.post('https://api.example.com/data', { key: 'value' })
            .subscribe(response => {
                console.log(response);
            });
    }
}
            

The `FormArray` class allows you to manage an array of form controls in a reactive form.

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

@Component({
    selector: 'app-form-array',
    template: `
        <form [formGroup]="form">
            <div formArrayName="items">
                <div *ngFor="let item of items.controls; let i = index">
                    <input [formControlName]="i" />
                </div>
            </div>
        </form>
    `,
})
export class FormArrayComponent {
    form: FormGroup;

    get items() {
        return this.form.get('items') as FormArray;
    }

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            items: this.fb.array(['', '', ''])
        });
    }
}
            

The `HttpParams` class is used to construct query parameters for an HTTP request.

import { Component } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

@Component({
    selector: 'app-http-params',
    template: `<p>Check console for response</p>`,
})
export class HttpParamsComponent {
    constructor(private http: HttpClient) {
        const params = new HttpParams().set('param1', 'value1').set('param2', 'value2');
        this.http.get('https://api.example.com/data', { params })
            .subscribe(response => {
                console.log(response);
            });
    }
}
            

The `@HostBinding` decorator allows you to bind properties of the host element in a directive or component.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    @HostBinding('class.highlighted') isHighlighted = true;
}
            

The `@HostListener` decorator allows you to listen to events on the host element in a directive or component.

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

@Directive({
    selector: '[appHover]'
})
export class HoverDirective {
    @HostListener('mouseenter') onMouseEnter() {
        console.log('Mouse entered');
    }

    @HostListener('mouseleave') onMouseLeave() {
        console.log('Mouse left');
    }
}
            

The `@Inject` decorator is used to specify a dependency to be injected into a service or component.

import { Injectable, Inject } from '@angular/core';
import { MyService } from './my-service.service';

@Injectable({
    providedIn: 'root'
})
export class MyComponentService {
    constructor(@Inject(MyService) private myService: MyService) {}
}
            

The `@Optional` decorator allows you to specify that a dependency is optional.

import { Injectable, Optional } from '@angular/core';
import { OptionalService } from './optional.service';

@Injectable({
    providedIn: 'root'
})
export class MyService {
    constructor(@Optional() private optionalService?: OptionalService) {}
}
            

The `@Self` decorator ensures that a dependency is resolved from the same injector, not from parent injectors.

import { Injectable, Self } from '@angular/core';
import { MyService } from './my-service.service';

@Injectable({
    providedIn: 'root'
})
export class AnotherService {
    constructor(@Self() private myService: MyService) {}
}
            

The `@Attribute` decorator allows you to access the value of an attribute on the host element.

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

@Directive({
    selector: '[appAttribute]'
})
export class AttributeDirective {
    constructor(@Attribute('data-attribute') private dataAttribute: string) {
        console.log(dataAttribute);
    }
}
            

The `@NgModule` decorator is used to declare and import modules in an Angular application.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

The `providers` array in `@NgModule` allows you to specify services to be available at the module level.

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MyService } from './my-service.service';

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

The `@Pipe` decorator is used to create custom pipes that can transform data in templates.

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

@Pipe({
    name: 'reverse'
})
export class ReversePipe implements PipeTransform {
    transform(value: string): string {
        return value.split('').reverse().join('');
    }
}
            

The `@Injectable` decorator is used to define a service that can be injected into other components or services.

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

@Injectable({
    providedIn: 'root'
})
export class MyService {
    constructor() {}
}
            

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

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

@Component({
    selector: 'app-reusable',
    template: `<p>This is a reusable component</p>`,
})
export class ReusableComponent {}
            

The `@ViewChild` decorator allows you to access and manipulate a child component or DOM element.

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'app-parent',
    template: `<app-child></app-child>`,
})
export class ParentComponent implements AfterViewInit {
    @ViewChild(ChildComponent) child: ChildComponent;

    ngAfterViewInit() {
        console.log(this.child);
    }
}
            

The `@ContentChild` decorator allows you to access and manipulate content projected into a component.

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

@Component({
    selector: 'app-content',
    template: `<ng-content></ng-content>`,
})
export class ContentComponent implements AfterContentInit {
    @ContentChild('content') content: ElementRef;

    ngAfterContentInit() {
        console.log(this.content.nativeElement.textContent);
    }
}
            

The `exports` array in `@NgModule` allows you to specify which components, directives, and pipes should be available to other modules.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent } from './shared.component';

@NgModule({
    imports: [CommonModule],
    declarations: [SharedComponent],
    exports: [SharedComponent]
})
export class SharedModule { }
            

The `@Inject` decorator allows you to provide a specific token value for dependency injection.

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

export const API_URL = new InjectionToken<string>('apiUrl');

@Injectable({
    providedIn: 'root'
})
export class ApiService {
    constructor(@Inject(API_URL) private apiUrl: string) {
        console.log(apiUrl);
    }
}
            

The `@Directive` decorator is used to create a structural directive that can change the layout of the DOM.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
    selector: '[appIf]'
})
export class IfDirective {
    constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}

    @Input() set appIf(condition: boolean) {
        if (condition) {
            this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
            this.viewContainer.clear();
        }
    }
}
            

The `forRoot` and `forChild` methods are used to configure providers for root and feature modules, respectively.

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyService } from './my-service.service';

@NgModule({
    imports: [CommonModule],
    declarations: [],
    exports: []
})
export class FeatureModule {
    static forRoot(): ModuleWithProviders<FeatureModule> {
        return {
            ngModule: FeatureModule,
            providers: [MyService]
        };
    }
}
            

The `BehaviorSubject` is used to manage state in Angular. It holds the current value and emits it to new subscribers.

import { BehaviorSubject } from 'rxjs';

export class StateService {
    private stateSubject = new BehaviorSubject<number>(0);
    state$ = this.stateSubject.asObservable();

    updateState(value: number) {
        this.stateSubject.next(value);
    }
}
            

The `OnPush` strategy improves performance by only checking for changes when the input properties change or when an event occurs.

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

@Component({
    selector: 'app-onpush',
    template: `<p>OnPush change detection</p>`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushComponent {}
            

The `@ViewEncapsulation` decorator is used to control how styles are applied to components.

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

@Component({
    selector: 'app-encapsulation',
    template: `<p>ViewEncapsulation example</p>`,
    styles: [`p { color: red; }`],
    encapsulation: ViewEncapsulation.None
})
export class EncapsulationComponent {}
            

Route guards control access to routes based on conditions.

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 isAuthenticated = false; // Replace with real authentication logic
        if (isAuthenticated) {
            return true;
        } else {
            this.router.navigate(['/login']);
            return false;
        }
    }
}
            

Custom pipes can transform data based on provided arguments.

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

@Pipe({
    name: 'multiply'
})
export class MultiplyPipe implements PipeTransform {
    transform(value: number, multiplier: number): number {
        return value * multiplier;
    }
}
            

The `FormBuilder` service can be used to create complex forms with nested form groups.

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

@Component({
    selector: 'app-nested-form',
    template: `
        <form [formGroup]="form">
            <div formGroupName="personalInfo">
                <input formControlName="name" placeholder="Name">
                <input formControlName="age" placeholder="Age">
            </div>
            <div formGroupName="address">
                <input formControlName="street" placeholder="Street">
                <input formControlName="city" placeholder="City">
            </div>
        </form>
    `,
})
export class NestedFormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            personalInfo: this.fb.group({
                name: [''],
                age: ['']
            }),
            address: this.fb.group({
                street: [''],
                city: ['']
            })
        });
    }
}
            

Lazy-loaded modules can be configured in the `@NgModule` using the `loadChildren` property in routes.

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

const routes: Routes = [
    { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
];

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

Providing a service in the `@NgModule` ensures that it is a singleton across the entire application.

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MyService } from './my-service.service';

@NgModule({
    declarations: [AppComponent],
    imports: [],
    providers: [MyService], // Singleton service
    bootstrap: [AppComponent]
})
export class AppModule { }
            

The `HttpInterceptor` allows you to intercept and modify HTTP requests and responses.

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const clonedRequest = req.clone({
            headers: req.headers.set('Authorization', 'Bearer token')
        });
        return next.handle(clonedRequest);
    }
}
            

The `ChangeDetectorRef` service allows you to manually trigger change detection in your components.

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

@Component({
    selector: 'app-manual-detect',
    template: `<p>Manual change detection</p>`,
})
export class ManualDetectComponent {
    constructor(private cdr: ChangeDetectorRef) {}

    triggerChangeDetection() {
        this.cdr.detectChanges();
    }
}
            

The `Renderer2` service provides methods to manipulate the DOM in a platform-independent way.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(private renderer: Renderer2, private el: ElementRef) {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
    }
}
            

The `NgFor` directive is used to loop through an array of objects in the template.

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

@Component({
    selector: 'app-item-list',
    template: `
        <ul>
            <li *ngFor="let item of items">{{ item.name }}</li>
        </ul>
    `,
})
export class ItemListComponent {
    items = [{ name: 'Item 1' }, { name: 'Item 2' }, { name: 'Item 3' }];
}
            

The `NgIf` directive allows you to conditionally include or exclude elements from the DOM.

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

@Component({
    selector: 'app-conditional',
    template: `
        <p *ngIf="isVisible">This element is conditionally rendered</p>
    `,
})
export class ConditionalComponent {
    isVisible = true;
}
            

The `FormArray` allows you to manage a dynamic list of form controls.

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

@Component({
    selector: 'app-dynamic-form',
    template: `
        <form [formGroup]="form">
            <div formArrayName="items">
                <div *ngFor="let item of items.controls; let i = index">
                    <input [formControlName]="i" placeholder="Item {{i + 1}}">
                </div>
            </div>
            <button (click)="addItem()">Add Item</button>
        </form>
    `,
})
export class DynamicFormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            items: this.fb.array([])
        });
    }

    get items() {
        return this.form.get('items') as FormArray;
    }

    addItem() {
        this.items.push(this.fb.control(''));
    }
}
            

The `@HostListener` decorator allows you to listen to DOM events directly in your component.

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

@Component({
    selector: 'app-host-listener',
    template: `<p>HostListener example</p>`,
})
export class HostListenerComponent {
    @HostListener('click', ['$event'])
    onClick(event: Event) {
        console.log('Element clicked!', event);
    }
}
            

The `ngOnChanges` lifecycle hook is used to respond to changes in input properties.

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

@Component({
    selector: 'app-changes',
    template: `<p>ngOnChanges example</p>`,
})
export class ChangesComponent implements OnChanges {
    @Input() data: string;

    ngOnChanges(changes: SimpleChanges) {
        console.log('Changes detected:', changes);
    }
}
            

The `ngOnInit` lifecycle hook is used to perform initialization tasks for the component.

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

@Component({
    selector: 'app-init',
    template: `<p>ngOnInit example</p>`,
})
export class InitComponent implements OnInit {
    data: string;

    ngOnInit() {
        this.data = 'Initialized data';
    }
}
            

The `ngOnDestroy` lifecycle hook is used to perform cleanup tasks before the component is destroyed.

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

@Component({
    selector: 'app-destroy',
    template: `<p>ngOnDestroy example</p>`,
})
export class DestroyComponent implements OnDestroy {
    private subscription: Subscription;

    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
}
            

The `@Input` decorator allows a child component to receive data from a parent, while `@Output` allows the child to emit events to the parent.

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

@Component({
    selector: 'app-child',
    template: `
        <button (click)="sendMessage()">Send Message</button>
    `,
})
export class ChildComponent {
    @Input() message: string;
    @Output() messageEvent = new EventEmitter<string>();

    sendMessage() {
        this.messageEvent.emit('Message from child');
    }
}

@Component({
    selector: 'app-parent',
    template: `
        <app-child [message]="parentMessage" (messageEvent)="receiveMessage($event)"></app-child>
        <p>Received Message: {{ receivedMessage }}</p>
    `,
})
export class ParentComponent {
    parentMessage = 'Message from parent';
    receivedMessage: string;

    receiveMessage(message: string) {
        this.receivedMessage = message;
    }
}
            

The `ngSwitch` directive allows you to conditionally display elements based on a value.

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

@Component({
    selector: 'app-switch',
    template: `
        <div [ngSwitch]="value">
            <p *ngSwitchCase="'A'">Value is A</p>
            <p *ngSwitchCase="'B'">Value is B</p>
            <p *ngSwitchDefault>Default value</p>
        </div>
    `,
})
export class SwitchComponent {
    value = 'A';
}
            

The `@Injectable` decorator is used to mark a class as a service that can be injected. You can specify the provider in `@NgModule` or directly in the component.

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

@Injectable({
    providedIn: 'root' // Singleton service provided at the root level
})
export class MyService {}
            

The `@ContentChild` decorator is used to access a child component or directive that is projected into a content slot.

import { Component, ContentChild, AfterContentInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'app-parent',
    template: `<ng-content></ng-content>`
})
export class ParentComponent implements AfterContentInit {
    @ContentChild(ChildComponent) child: ChildComponent;

    ngAfterContentInit() {
        console.log(this.child);
    }
}
            

The `@ViewChild` decorator is used to access a child component or directive within the view.

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'app-parent',
    template: `<app-child></app-child>`
})
export class ParentComponent implements AfterViewInit {
    @ViewChild(ChildComponent) child: ChildComponent;

    ngAfterViewInit() {
        console.log(this.child);
    }
}
            

The `ngModel` directive is used for two-way data binding with form controls.

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

@Component({
    selector: 'app-model',
    template: `<input [(ngModel)]="value" placeholder="Enter value"> <p>{{ value }}</p>`
})
export class ModelComponent {
    value: string = '';
}
            

The `AsyncPipe` subscribes to an observable or promise and returns the latest value it has emitted.

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
    selector: 'app-async',
    template: `<p>{{ data$ | async }}</p>`
})
export class AsyncComponent {
    data$: Observable<string> = of('Hello World');
}
            

The `ngClass` directive allows you to dynamically add or remove CSS classes based on component state.

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

@Component({
    selector: 'app-class',
    template: `<div [ngClass]="{'active': isActive, 'inactive': !isActive}">Dynamic Class</div>`
})
export class ClassComponent {
    isActive = true;
}
            

The `ngStyle` directive allows you to dynamically set inline styles on an element.

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

@Component({
    selector: 'app-style',
    template: `<div [ngStyle]="{ 'color': color, 'font-size': fontSize }">Styled Text</div>`
})
export class StyleComponent {
    color = 'blue';
    fontSize = '20px';
}
            

The `trackBy` function helps Angular optimize rendering by tracking items in a list.

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

@Component({
    selector: 'app-trackby',
    template: `
        <ul>
            <li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
        </ul>
    `
})
export class TrackByComponent {
    items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];

    trackByFn(index: number, item: any) {
        return item.id;
    }
}
            

The `ngIf` directive can be used with `else` to display alternate content based on a condition.

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

@Component({
    selector: 'app-if-else',
    template: `
        <div *ngIf="isVisible; else notVisible">Visible Content</div>
        <ng-template #notVisible>Not Visible Content</ng-template>
    `
})
export class IfElseComponent {
    isVisible = true;
}
            

The `@HostBinding` decorator allows you to bind properties to the host element of the directive or component.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    @HostBinding('class.highlight') isHighlighted = true;
}
            

The `@HostListener` decorator allows you to listen to events on the host element of the directive or component.

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

@Directive({
    selector: '[appClickTracker]'
})
export class ClickTrackerDirective {
    @HostListener('click', ['$event'])
    onClick(event: Event) {
        console.log('Host element clicked!', event);
    }
}
            

The `HttpClient` service is used to make HTTP requests and handle responses.

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

@Component({
    selector: 'app-http',
    template: `<p>Data: {{ data$ | async }}</p>`
})
export class HttpComponent {
    data$: Observable<any>;

    constructor(private http: HttpClient) {
        this.data$ = this.http.get('https://api.example.com/data');
    }
}
            

The `HttpInterceptor` allows you to intercept and modify HTTP requests and responses.

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const clonedRequest = req.clone({
            setHeaders: { Authorization: 'Bearer token' }
        });
        return next.handle(clonedRequest);
    }
}
            

The `Router` service is used to navigate between routes programmatically.

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

@Component({
    selector: 'app-navigate',
    template: `<button (click)="goToPage()">Go to Page</button>`
})
export class NavigateComponent {
    constructor(private router: Router) {}

    goToPage() {
        this.router.navigate(['/page']);
    }
}
            

The `ActivatedRoute` service allows you to access route parameters and query parameters.

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

@Component({
    selector: 'app-route',
    template: `<p>Param: {{ param }}</p>`
})
export class RouteComponent implements OnInit {
    param: string;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.route.params.subscribe(params => {
            this.param = params['id'];
        });
    }
}
            

Route guards are used to protect routes based on certain conditions.

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 isAuthenticated = false; // Check authentication
        if (!isAuthenticated) {
            this.router.navigate(['/login']);
            return false;
        }
        return true;
    }
}
            

The `RouterOutlet` directive is used to display routed components based on the active route.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

const routes: Routes = [
    { path: '', component: HomeComponent }
];

@NgModule({

    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

@Component({
    selector: 'app-root',
    template: `<router-outlet></router-outlet>`
})
export class AppComponent {}
            

Dependency Injection is used to inject services into components or other services.

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

@Injectable({
    providedIn: 'root'
})
export class MyService {}

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
    selector: 'app-example',
    template: `<p>Service injected</p>`
})
export class ExampleComponent {
    constructor(private myService: MyService) {}
}
            

Custom pipes are used to transform data before displaying it in the template.

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

@Pipe({
    name: 'reverse'
})
export class ReversePipe implements PipeTransform {
    transform(value: string): string {
        return value.split('').reverse().join('');
    }
}

@Component({
    selector: 'app-pipe',
    template: `<p>{{ 'Angular' | reverse }}</p>`
})
export class PipeComponent {}
            

The `ChangeDetectionStrategy` is used to control how Angular checks for changes in a component.

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

@Component({
    selector: 'app-detection',
    template: `<p>Change Detection Strategy</p>`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DetectionComponent {}
            

The `@Inject` decorator is used to specify a provider to inject into a constructor when the dependency is not directly injectable.

import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
    providedIn: 'root'
})
export class DocumentService {
    constructor(@Inject(DOCUMENT) private document: Document) {}
}
            

The `@Component` decorator is used to define metadata for a component, such as its selector, template, and styles.

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

@Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.css']
})
export class ExampleComponent {}
            

The `@NgModule` decorator defines an Angular module by providing metadata, such as declarations, imports, and providers.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

The `ReactiveFormsModule` provides reactive form capabilities in Angular, allowing you to build and manage forms programmatically.

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

@Component({
    selector: 'app-reactive-form',
    template: `
        <form [formGroup]="form">
            <label for="name">Name:</label>
            <input id="name" formControlName="name">
            <button (click)="submit()">Submit</button>
        </form>
    `
})
export class ReactiveFormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: ['']
        });
    }

    submit() {
        console.log(this.form.value);
    }
}
            

The `FormsModule` provides support for template-driven forms in Angular, allowing you to build forms declaratively.

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

@Component({
    selector: 'app-template-form',
    template: `
        <form #form="ngForm" (ngSubmit)="submit(form)">
            <label for="name">Name:</label>
            <input id="name" name="name" ngModel>
            <button type="submit">Submit</button>
        </form>
    `
})
export class TemplateFormComponent {
    submit(form: any) {
        console.log(form.value);
    }
}
            

Interceptors can be used with `HttpClient` to log HTTP requests and responses.

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

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('Request made:', req);
        return next.handle(req);
    }
}
            

The `@Output` decorator allows a child component to emit events to a parent component.

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

@Component({
    selector: 'app-child',
    template: `<button (click)="notify()">Notify</button>`
})
export class ChildComponent {
    @Output() notifyEvent = new EventEmitter<void>();

    notify() {
        this.notifyEvent.emit();
    }
}

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

@Component({
    selector: 'app-parent',
    template: `<app-child (notifyEvent)="onNotify()"></app-child>`
})
export class ParentComponent {
    onNotify() {
        console.log('Notification received!');
    }
}
            

The `ng-template` directive allows you to define reusable templates that can be used with structural directives.

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

@Component({
    selector: 'app-template',
    template: `
        <ng-template #template let-name="name">
            </ng-template><ng-template #template let-name="name"><p>Hello, {{ name }}!</p>
        </ng-template>
        <ng-container *ngTemplateOutlet="template; context: { name: 'Angular' }"></ng-container>
    `
})
export class TemplateComponent {}
            

The `ng-content` directive is used to project content from a parent component into a child component.

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

@Component({
    selector: 'app-child',
    template: `<ng-content></ng-content>`
})
export class ChildComponent {}

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

@Component({
    selector: 'app-parent',
    template: `<app-child></app-child><app-child><p>Projected Content</p></app-child>`
})
export class ParentComponent {}
            

The `ComponentFactoryResolver` allows you to dynamically create components at runtime.

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
    selector: 'app-dynamic-loader',
    template: `<ng-template #container></ng-template>`
})
export class DynamicLoaderComponent {
    @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

    constructor(private resolver: ComponentFactoryResolver) {}

    loadComponent() {
        const factory = this.resolver.resolveComponentFactory(DynamicComponent);
        this.container.createComponent(factory);
    }
}
            

The `FormArray` is used to manage a collection of form controls, which can be dynamically added or removed.

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

@Component({
    selector: 'app-dynamic-form',
    template: `
        <form [formGroup]="form">
            <div formArrayName="items">
                <div *ngFor="let item of items.controls; let i = index">
                    <input [formControlName]="i">
                    <button (click)="removeItem(i)">Remove</button>
                </div>
            </div>
            <button (click)="addItem()">Add Item</button>
        </form>
    `
})
export class DynamicFormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            items: this.fb.array([])
        });
    }

    get items() {
        return this.form.get('items') as FormArray;
    }

    addItem() {
        this.items.push(this.fb.control(''));
    }

    removeItem(index: number) {
        this.items.removeAt(index);
    }
}
            

The `ChangeDetectorRef` service is used to manually trigger change detection in Angular.

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

@Component({
    selector: 'app-manual-detection',
    template: `<p>Manual Change Detection</p>`
})
export class ManualDetectionComponent {
    constructor(private cdr: ChangeDetectorRef) {}

    detectChanges() {
        this.cdr.detectChanges();
    }
}
            

The `@HostListener` decorator allows you to listen to DOM events on the host element of a directive or component.

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

@Directive({
    selector: '[appClickTracker]'
})
export class ClickTrackerDirective {
    @HostListener('click', ['$event'])
    onClick(event: Event) {
        console.log('Element clicked!', event);
    }
}
            

The `@ViewChild` decorator allows you to access child components, directives, or DOM elements from the parent component.

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

@Component({
    selector: 'app-parent',
    template: `<button (click)="clickChild()">Click Child</button><app-child #child></app-child>`
})
export class ParentComponent {
    @ViewChild('child') child: ElementRef;

    clickChild() {
        console.log(this.child);
    }
}
            

The `@ContentChild` decorator allows you to access content projected into a component using `ng-content`.

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

@Component({
    selector: 'app-content',
    template: `<ng-content></ng-content>`
})
export class ContentComponent {
    @ContentChild('projectedContent') content: ElementRef;

    ngAfterContentInit() {
        console.log(this.content.nativeElement.textContent);
    }
}
            

The `NgZone` service allows you to run code inside or outside Angular's zone, which affects change detection.

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

@Component({
    selector: 'app-zone',
    template: `<p>NgZone Example</p>`
})
export class ZoneComponent {
    constructor(private ngZone: NgZone) {}

    runOutsideAngular() {
        this.ngZone.runOutsideAngular(() => {
            console.log('Running outside Angular zone');
        });
    }
}
            

The `ViewEncapsulation` enum controls how styles are applied to components.

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

@Component({
    selector: 'app-encapsulation',
    template: `<p>View Encapsulation Example</p>`,
    styles: [`p { color: blue; }`],
    encapsulation: ViewEncapsulation.Emulated
})
export class EncapsulationComponent {}
            

Lazy-loaded modules are configured using `NgModule` and the `RouterModule.forRoot` method with the `loadChildren` property.

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

const routes: Routes = [
    { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
];

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

The `ChangeDetectionStrategy.OnPush` strategy optimizes performance by checking for changes only when input properties change or events occur.

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

@Component({
    selector: 'app-performance',
    template: `<p>OnPush Change Detection</p>`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class PerformanceComponent {}
            

The `ng-container` directive allows you to conditionally render elements without adding extra DOM nodes.

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

@Component({
    selector: 'app-container',
    template: `
        <ng-container *ngIf="isVisible">
            </ng-container><ng-container *ngIf="isVisible"><p>Conditionally Rendered Content</p>
        </ng-container>
    `
})
export class ContainerComponent {
    isVisible = true;
}
            

The `@Injectable` decorator marks a class as a service that can be injected into other classes.

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

@Injectable({
    providedIn: 'root'
})
export class DataService {
    getData() {
        return ['Data 1', 'Data 2', 'Data 3'];
    }
}
            

The `ngIf` directive conditionally includes a template based on the value of an expression.

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

@Component({
    selector: 'app-condition',
    template: `
        <div *ngIf="isVisible">This content is visible</div>
    `
})
export class ConditionComponent {
    isVisible = true;
}
            

The `ngFor` directive is used to iterate over a list of items and render them in the template.

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

@Component({
    selector: 'app-list',
    template: `
        <ul>
            <li *ngFor="let item of items">{{ item }}</li>
        </ul>
    `
})
export class ListComponent {
    items = ['Item 1', 'Item 2', 'Item 3'];
}
            

The `ngSwitch` directive allows you to display different templates based on a value.

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

@Component({
    selector: 'app-switch',
    template: `
        <div [ngSwitch]="color">
            <div *ngSwitchCase="'red'">Red color</div>
            <div *ngSwitchCase="'blue'">Blue color</div>
            <div *ngSwitchDefault>Default color</div>
        </div>
    `
})
export class SwitchComponent {
    color = 'blue';
}
            

The `@ViewChild` decorator is used to get a reference to a child component or element in the template.

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

@Component({
    selector: 'app-view-child',
    template: `<p #paragraph>Child Paragraph</p>`
})
export class ViewChildComponent {
    @ViewChild('paragraph') paragraph: ElementRef;

    ngAfterViewInit() {
        console.log(this.paragraph.nativeElement.textContent);
    }
}
            

The `ngStyle` directive allows you to apply dynamic styles to an element based on an expression.

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

@Component({
    selector: 'app-style',
    template: `
        <div [ngStyle]="{ 'color': color, 'font-size.px': fontSize }">
            Styled Text
        </div>
    `
})
export class StyleComponent {
    color = 'red';
    fontSize = 20;
}
            

The `ngClass` directive allows you to conditionally apply one or more CSS classes to an element.

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

@Component({
    selector: 'app-class',
    template: `
        <div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }">
            Conditional Classes
        </div>
    `
})
export class ClassComponent {
    isActive = true;
    isDisabled = false;
}
            

The `@Input` decorator allows a child component to receive data from its parent component.

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

@Component({
    selector: 'app-child',
    template: `<p>Received: {{ data }}</p>`
})
export class ChildComponent {
    @Input() data: string;
}

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

@Component({
    selector: 'app-parent',
    template: `<app-child [data]="parentData"></app-child>`
})
export class ParentComponent {
    parentData = 'Data from parent';
}
            

The `@HostBinding` decorator allows you to bind properties to the host element of a directive or component.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    @HostBinding('style.backgroundColor') backgroundColor = 'yellow';
}
            

The `@HostListener` decorator allows you to listen to events on the host element of a directive or component.

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

@Directive({
    selector: '[appClickTracker]'
})
export class ClickTrackerDirective {
    @HostListener('click', ['$event'])
    onClick(event: Event) {
        console.log('Element clicked:', event);
    }
}
            

The `Router` service is used to navigate between different routes in an Angular application.

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

@Component({
    selector: 'app-navigation',
    template: `<button (click)="navigate()">Go to Details</button>`
})
export class NavigationComponent {
    constructor(private router: Router) {}

    navigate() {
        this.router.navigate(['/details']);
    }
}
            

The `ActivatedRoute` service is used to access route parameters and other information about the current route.

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

@Component({
    selector: 'app-details',
    template: `<p>Item ID: {{ itemId }}</p>`
})
export class DetailsComponent implements OnInit {
    itemId: string;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.itemId = this.route.snapshot.paramMap.get('id');
    }
}
            

The `RouterModule` is used to configure application routes using the `RouterModule.forRoot` method.

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 },
    { path: 'about', component: AboutComponent }
];

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

The `CanActivate` guard is used to control access to routes based on conditions.

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 isAuthenticated = false; // Example condition
        if (!isAuthenticated) {
            this.router.navigate(['/login']);
            return false;
        }
        return true;
    }
}
            

The `HttpClient` service is used to make HTTP requests and handle responses.

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

@Injectable({
    providedIn: 'root'
})
export class DataService {
    constructor(private http: HttpClient) {}

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

The `HttpInterceptor` interface allows you to intercept and modify HTTP requests and responses.

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const authReq = req.clone({ setHeaders: { Authorization: 'Bearer token' } });
        return next.handle(authReq);
    }
}
            

The `FormBuilder` service simplifies the creation of reactive forms.

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

@Component({
    selector: 'app-reactive-form',
    template: `
        <form [formGroup]="form">
            <input formControlName="name">
            <input formControlName="email">
        </form>
    `
})
export class ReactiveFormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            name: [''],
            email: ['']
        });
    }
}
            

The `FormArray` allows you to manage a collection of form controls.

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

@Component({
    selector: 'app-dynamic-form',
    template: `
        <form [formGroup]="form">
            <div formArrayName="items">
                <div *ngFor="let item of items.controls; let i = index">
                    <input [formControlName]="i">
                    <button (click)="removeItem(i)">Remove</button>
                </div>
            </div>
            <button (click)="addItem()">Add Item</button>
        </form>
    `
})
export class DynamicFormComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            items: this.fb.array([])
        });
    }

    get items() {
        return this.form.get('items') as FormArray;
    }

    addItem() {
        this.items.push(this.fb.control(''));
    }

    removeItem(index: number) {
        this.items.removeAt(index);
    }
}
            

The `ngOnChanges` lifecycle hook responds to changes in input properties.

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

@Component({
    selector: 'app-changes',
    template: `<p>Previous: {{ prevValue }}, Current: {{ currentValue }}</p>`
})
export class ChangesComponent implements OnChanges {
    @Input() value: string;
    prevValue: string;
    currentValue: string;

    ngOnChanges(changes: SimpleChanges) {
        if (changes.value) {
            this.prevValue = changes.value.previousValue;
            this.currentValue = changes.value.currentValue;
        }
    }
}
            

The `ngAfterViewInit` lifecycle hook is used to perform actions after the view and child views have been initialized.

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

@Component({
    selector: 'app-after-view',
    template: `<p #paragraph>View Initialized</p>`
})
export class AfterViewComponent implements AfterViewInit {
    @ViewChild('paragraph') paragraph: ElementRef;

    ngAfterViewInit() {
        console.log(this.paragraph.nativeElement.textContent);
    }
}
            

The `ng-content` directive allows you to project content into a component's view.

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

@Component({
    selector: 'app-card',
    template: `
        <div class="card">
            <ng-content></ng-content>
        </div>
    `
})
export class CardComponent {}
            

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

@Component({
    selector: 'app-root',
    template: `
        <app-card>
            </app-card><app-card><h1>Card Title</h1>
            <p>Card content goes here.</p>
        </app-card>
    `
})
export class AppComponent {}
            

The `ng-template` directive defines reusable templates that can be instantiated later.

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

@Component({
    selector: 'app-template',
    template: `
        <ng-template #myTemplate>
            </ng-template><ng-template #myTemplate><p>This is a reusable template.</p>
        </ng-template>
        <ng-container *ngTemplateOutlet="myTemplate"></ng-container>
    `
})
export class TemplateComponent {}
            

The `ChangeDetectionStrategy` can be set to `OnPush` to optimize change detection performance.

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

@Component({
    selector: 'app-optimized',
    template: `<p>Optimized Change Detection</p>`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptimizedComponent {}
            

The `Renderer2` service is used to safely manipulate DOM elements without direct access.

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

@Component({
    selector: 'app-renderer',
    template: `<p #paragraph>Text</p>`
})
export class RendererComponent {
    constructor(private renderer: Renderer2, private el: ElementRef) {}

    ngAfterViewInit() {
        const paragraph = this.el.nativeElement.querySelector('p');
        this.renderer.setStyle(paragraph, 'color', 'blue');
    }
}
            

The `@Directive` decorator is used to create custom directives that can modify the behavior of elements.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef, private renderer: Renderer2) {}

    @HostListener('mouseenter') onMouseEnter() {
        this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
    }
}
            

The `@NgModule` decorator defines a module and its components, directives, and services.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FeatureComponent } from './feature/feature.component';

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

Dependency Injection allows you to provide and inject services into components or other services.

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

@Injectable({
    providedIn: 'root'
})
export class AuthService {
    login() {
        console.log('User logged in');
    }
}

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
    selector: 'app-login',
    template: `<button (click)="login()">Login</button>`
})
export class LoginComponent {
    constructor(private authService: AuthService) {}

    login() {
        this.authService.login();
    }
}
            

The `Observable` class is used to handle asynchronous data streams and is often used with Angular's `HttpClient`.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
    selector: 'app-data',
    template: `<p>{{ data | json }}</p>`
})
export class DataComponent implements OnInit {
    data: any;

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.getData().subscribe(response => this.data = response);
    }

    getData(): Observable<any> {
        return this.http.get('https://api.example.com/data');
    }
}
            

RxJS operators are used to transform and manipulate data streams.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Component({
    selector: 'app-transformed-data',
    template: `<p>{{ data | json }}</p>`
})
export class TransformedDataComponent implements OnInit {
    data: any;

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.getData().pipe(
            map(response => response.items)
        ).subscribe(items => this.data = items);
    }

    getData() {
        return this.http.get<any>('https://api.example.com/data');
    }
}
            

The `@Output` decorator and `EventEmitter` are used to emit events from a child component to its parent.

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

@Component({
    selector: 'app-child',
    template: `<button (click)="notify()">Notify</button>`
})
export class ChildComponent {
    @Output() notifyEvent = new EventEmitter<string>();

    notify() {
        this.notifyEvent.emit('Event from child');
    }
}

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

@Component({
    selector: 'app-parent',
    template: `<app-child (notifyEvent)="handleNotification($event)"></app-child>`
})
export class ParentComponent {
    handleNotification(message: string) {
        console.log(message);
    }
}
            

The `@HostBinding` decorator allows you to bind properties of the host element.

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    @HostBinding('style.backgroundColor') backgroundColor: string = 'yellow';
}
            

The `@HostListener` decorator listens to events on the host element.

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

@Directive({
    selector: '[appClickTracker]'
})
export class ClickTrackerDirective {
    @HostListener('click', ['$event'])
    onClick(event: MouseEvent) {
        console.log('Element clicked:', event);
    }
}
            

The `ngFor` directive is used to loop through a collection and render each item.

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

@Component({
    selector: 'app-list',
    template: `
        <ul>
            <li *ngFor="let item of items">{{ item }}</li>
        </ul>
    `
})
export class ListComponent {
    items: string[] = ['Item 1', 'Item 2', 'Item 3'];
}
            

The `ngIf` directive is used to conditionally include or exclude elements based on an expression.

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

@Component({
    selector: 'app-conditional',
    template: `
        <p *ngIf="isVisible">This text is visible</p>
    `
})
export class ConditionalComponent {
    isVisible = true;
}
            

The `ngSwitch` directive allows you to conditionally display elements based on a switch value.

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

@Component({
    selector: 'app-switch',
    template: `
        <div [ngSwitch]="color">
            <p *ngSwitchCase="'red'">Red color</p>
            <p *ngSwitchCase="'green'">Green color</p>
            <p *ngSwitchDefault>Default color</p>
        </div>
    `
})
export class SwitchComponent {
    color = 'green';
}
            

The `ngStyle` directive allows you to dynamically set CSS styles based on an object.

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

@Component({
    selector: 'app-style',
    template: `
        <div [ngStyle]="styles">Styled Div</div>
    `
})
export class StyleComponent {
    styles = {
        'color': 'blue',
        'font-size': '20px'
    };
}
            

The `ngClass` directive allows you to conditionally apply CSS classes based on an expression.

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

@Component({
    selector: 'app-class',
    template: `
        <div [ngClass]="{'active': isActive, 'inactive': !isActive}">Styled Div</div>
    `
})
export class ClassComponent {
    isActive = true;
}
            

The `ngModel` directive is used for two-way data binding between form inputs and component properties.

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

@Component({
    selector: 'app-two-way-binding',
    template: `
        <input [(ngModel)]="name">
        <p>Hello, {{ name }}!</p>
    `
})
export class TwoWayBindingComponent {
    name: string = '';
}
            

The `FormControl` class is used to manage the state and validation of individual form controls.

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

@Component({
    selector: 'app-form-control',
    template: `
        <input [formControl]="nameControl">
        <p>Control Value: {{ nameControl.value }}</p>
    `
})
export class FormControlComponent {
    nameControl = new FormControl('');
}
            

The `FormGroup` class is used to group related `FormControl` instances into a single entity.

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
    selector: 'app-form-group',
    template: `
        <form [formGroup]="form">
            <input formControlName="name">
            <input formControlName="email">
        </form>
    `
})
export class FormGroupComponent {
    form = new FormGroup({
        name: new FormControl(''),
        email: new FormControl('')
    });
}
            

The `@ViewChild` decorator allows you to access child components or DOM elements from the parent component.

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

@Component({
    selector: 'app-child',
    template: `<p #childParagraph>Child Component</p>`
})
export class ChildComponent {}

@Component({
    selector: 'app-parent',
    template: `
        <app-child></app-child>
        <button (click)="logChildParagraph()">Log Child Paragraph</button>
    `
})
export class ParentComponent implements AfterViewInit {
    @ViewChild(ChildComponent) child!: ChildComponent;
    @ViewChild('childParagraph') childParagraph!: ElementRef;

    ngAfterViewInit() {
        console.log(this.child);
        console.log(this.childParagraph.nativeElement.textContent);
    }

    logChildParagraph() {
        console.log(this.childParagraph.nativeElement.textContent);
    }
}
            

The `@ContentChild` decorator allows you to access content projected into the component using `ng-content`.

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

@Component({
    selector: 'app-card',
    template: `
        <ng-content></ng-content>
    `
})
export class CardComponent implements AfterContentInit {
    @ContentChild('cardContent') cardContent!: ElementRef;

    ngAfterContentInit() {
        console.log(this.cardContent.nativeElement.textContent);
    }
}

@Component({
    selector: 'app-root',
    template: `
        <app-card>
            </app-card><app-card><p #cardContent>Card Content</p>
        </app-card>
    `
})
export class AppComponent {}
            

The `@Input` decorator allows a parent component to pass data to a child component.

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

@Component({
    selector: 'app-child',
    template: `<p>Received: {{ data }}</p>`
})
export class ChildComponent {
    @Input() data!: string;
}

@Component({
    selector: 'app-parent',
    template: `<app-child [data]="parentData"></app-child>`
})
export class ParentComponent {
    parentData = 'Data from Parent';
}
            

The `@Output` decorator is used to create custom events that a child component can emit to its parent.

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

@Component({
    selector: 'app-child',
    template: `<button (click)="sendMessage()">Send Message</button>`
})
export class ChildComponent {
    @Output() message = new EventEmitter<string>();

    sendMessage() {
        this.message.emit('Hello from Child');
    }
}

@Component({
    selector: 'app-parent',
    template: `<app-child (message)="receiveMessage($event)"></app-child>`
})
export class ParentComponent {
    receiveMessage(message: string) {
        console.log(message);
    }
}
            

The `ReactiveForms` module provides a way to create forms with validation using `FormGroup` and `FormControl`.

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

@Component({
    selector: 'app-reactive-form',
    template: `
        <form [formGroup]="form" (ngSubmit)="onSubmit()">
            <label for="label">Name:</label>
            <input id="label" formControlName="name">
            <div *ngIf="form.get('name')?.invalid && form.get('name')?.touched">
                Name is required.
            </div>
            <button type="submit">Submit</button>
        </form>
    `
})
export class ReactiveFormComponent {
    form = new FormGroup({
        name: new FormControl('', Validators.required)
    });

    onSubmit() {
        console.log(this.form.value);
    }
}
            

The `ngFor` directive can be used with a custom template to display a list of items.

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

@Component({
    selector: 'app-item-list',
    template: `
        <ul>
            <ng-container *ngFor="let item of items; let i = index">
                </ng-container><ng-container *ngFor="let item of items; let i = index"><li>{{ i + 1 }}. {{ item }}</li>
            </ng-container>
        </ul>
    `
})
export class ItemListComponent {
    items = ['Item 1', 'Item 2', 'Item 3'];
}
            

The `ngIf` directive can be used with the `else` clause to conditionally display alternate content.

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

@Component({
    selector: 'app-conditional',
    template: `
        <div *ngIf="isVisible; else elseBlock">
            <p>Content is visible</p>
        </div>
        <ng-template #elseBlock>
            </ng-template><ng-template #elseBlock><p>Content is hidden</p>
        </ng-template>
    `
})
export class ConditionalComponent {
    isVisible = true;
}
            

The `ngSwitch` directive can be used with multiple `ngSwitchCase` directives to handle different cases.

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

@Component({
    selector: 'app-switch',
    template: `
        <div [ngSwitch]="color">
            <p *ngSwitchCase="'red'">Red</p>
            <p *ngSwitchCase="'green'">Green</p>
            <p *ngSwitchCase="'blue'">Blue</p>
            <p *ngSwitchDefault>Unknown color</p>
        </div>
    `
})
export class SwitchComponent {
    color = 'green';
}
            

The `ngStyle` directive allows you to conditionally apply styles based on an object.

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

@Component({
    selector: 'app-style',
    template: `
        <div [ngStyle]="{ 'background-color': isActive ? 'yellow' : 'white' }">
            Conditional Style
        </div>
    `
})
export class StyleComponent {
    isActive = true;
}
            

The `ngClass` directive allows you to toggle multiple CSS classes based on an object or array.

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

@Component({
    selector: 'app-class',
    template: `
        <div [ngClass]="{ 'active': isActive, 'highlight': isHighlighted }">Styled Div</div>
    `
})
export class ClassComponent {
    isActive = true;
    isHighlighted = false;
}
            

The `ngModel` directive is used for two-way data binding in forms.

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

@Component({
    selector: 'app-form',
    template: `
        <form>
            <label for="label">Name:</label>
            <input id="label" [(ngModel)]="name" name="name2">
            <p>Your name is {{ name }}</p>
        </form>
    `
})
export class FormComponent {
    name = '';
}
            

The `FormBuilder` service helps in creating `FormGroup` and `FormControl` instances more easily.

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

@Component({
    selector: 'app-form-builder',
    template: `
        <form [formGroup]="form" (ngSubmit)="onSubmit()">
            <label for="email">Email:</label>
            <input id="email" formControlName="email">
            <div *ngIf="form.get('email')?.invalid && form.get('email')?.touched">
                Email is required.
            </div>
            <button type="submit">Submit</button>
        </form>
    `
})
export class FormBuilderComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            email: ['', Validators.required]
        });
    }

    onSubmit() {
        console.log(this.form.value);
    }
}
            

The `FormArray` class is used to handle an array of form controls or groups.

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

@Component({
    selector: 'app-form-array',
    template: `
        <form [formGroup]="form">
            <div formArrayName="items">
                <div *ngFor="let item of items.controls; let i = index">
                    <input [formControlName]="i">
                </div>
            </div>
            <button (click)="addItem()">Add Item</button>
        </form>
    `
})
export class FormArrayComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            items: this.fb.array([''])
        });
    }

    get items() {
        return this.form.get('items') as FormArray;
    }

    addItem() {
        this.items.push(this.fb.control(''));
    }
}
            

The `AsyncPipe` subscribes to an observable or promise and returns the latest value.

import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';

@Component({
    selector: 'app-async',
    template: `
        <div *ngIf="data$ | async as data">
            {{ data }}
        </div>
    `
})
export class AsyncComponent {
    data$: Observable<string> = of('Asynchronous Data');
}
            

The `ChangeDetectionStrategy` can be set to `OnPush` to optimize change detection by checking only when input properties change.

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

@Component({
    selector: 'app-on-push',
    template: `<p>OnPush Change Detection</p>`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushComponent {}
            

The `@Injectable` decorator is used to mark a class as available to be injected. Services can be provided at different levels, such as in the root or in a specific module.

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

@Injectable({
    providedIn: 'root' // or provide in a specific module
})
export class DataService {
    constructor() { }
}
            

The `HttpClient` service is used to make HTTP requests and handle responses.

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

@Component({
    selector: 'app-http',
    template: `
        <button (click)="fetchData()">Fetch Data</button>
        <pre>{{ data | json }}

The `Router` service is used to navigate between routes programmatically.

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

@Component({
    selector: 'app-navigation',
    template: `<button (click)="goToHome()">Go to Home</button>`
})
export class NavigationComponent {
    constructor(private router: Router) { }

    goToHome() {
        this.router.navigate(['/home']);
    }
}
            

The `ActivatedRoute` service is used to access route parameters and query parameters.

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

@Component({
    selector: 'app-route-params',
    template: `<p>Route Parameter: {{ id }}</p>`
})
export class RouteParamsComponent implements OnInit {
    id!: string;

    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        this.route.paramMap.subscribe(params => {
            this.id = params.get('id')!;
        });
    }
}
            

The `RouterModule` is used to define and configure routes in an Angular application.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent }
];

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

To create a custom decorator in Angular, you define a function that returns a function which is applied to the target. For example:

function LogClass(target: Function) {
    console.log("Class:", target);
}

@LogClass
class ExampleClass {}
            

Angular Guards are interfaces that allow you to control access to routes. They are implemented by creating classes that implement one or more of the guard interfaces:

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 = /* logic to check if the user is logged in */;
    if (isLoggedIn) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}
            

You can create dynamic forms using FormBuilder and FormGroup. Here's an example:

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

@Component({
  selector: 'app-dynamic-form',
  template: \`
    <form [formGroup]="form">
      <label for="name">Name:</label>
      <input id="name" formControlName="name">
      <label for="age">Age:</label>
      <input id="age" formControlName="age">
    </form>
  \`
})
export class DynamicFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: [''],
      age: ['']
    });
  }
}
            

Angular's default change detection strategy is CheckAlways, where Angular checks all components to see if they need to be updated. You can use the OnPush strategy to optimize performance, which only checks the component when its inputs change or when an event occurs:

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

@Component({
  selector: 'app-on-push',
  templateUrl: './on-push.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushComponent {
  // Component logic
}
            

State management in Angular can be handled using libraries like NgRx or Akita. For example, using NgRx involves creating actions, reducers, and selectors:

import { createAction, props } from '@ngrx/store';

export const loadItems = createAction('[Items Page] Load Items');
export const loadItemsSuccess = createAction('[Items API] Items Loaded Success', props<{ items: any[] }>());

import { createReducer, on } from '@ngrx/store';

export const initialState = [];

const _itemsReducer = createReducer(
  initialState,
  on(loadItemsSuccess, (state, { items }) => [...items])
);

export function itemsReducer(state, action) {
  return _itemsReducer(state, action);
}
            

Dependency Injection (DI) in Angular allows you to inject dependencies (services) into components and other services. You can use it by defining a service and then injecting it into a component:

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  // Service logic
}

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-example',
  template: \`<p>Example component</p>\`
})
export class ExampleComponent {
  constructor(private myService: MyService) {}
}
            

The HttpClient module is used to make HTTP requests. Here's an example of making a GET request:

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

@Component({
  selector: 'app-api',
  template: \`<p>Data: {{ data | json }}</p>\`
})
export class ApiComponent {
  data: any;

  constructor(private http: HttpClient) {
    this.http.get('https://api.example.com/data')
      .subscribe(response => {
        this.data = response;
      });
  }
}
            

Performance can be optimized using techniques such as lazy loading, trackBy in ngFor, and OnPush change detection strategy:

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) }
];

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

<ng-container *ngFor="let item of items; trackBy: trackById">
  <div>{{ item.name }}</div>
</ng-container>

trackById(index: number, item: any): number {
  return item.id;
}
            

Reactive Forms provide a model-driven approach to handle form inputs. They offer advantages like better scalability, easier unit testing, and more control over form validation:

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

@Component({
  selector: 'app-reactive-form',
  template: \`
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="name">
      <input formControlName="email">
      <button type="submit">Submit</button>
    </form>
  \`
})
export class ReactiveFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    console.log(this.form.value);
  }
}
            

To handle routes with parameters, define parameters in the route configuration and access them in the component:

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

@Component({
  selector: 'app-route-param',
  template: \`<p>Param: {{ id }}</p>\`
})
export class RouteParamComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.id = params.get('id');
    });
  }
}
            

NgZone allows you to run code inside or outside Angular's change detection. This is useful for optimizing performance:

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

@Component({
  selector: 'app-ngzone',
  template: \`<p>NgZone example</p>\`
})
export class NgZoneComponent {
  constructor(private ngZone: NgZone) {
    this.ngZone.runOutsideAngular(() => {
      // Code that does not trigger change detection
    });
  }
}
            

Create a library using Angular CLI and then include it in your application:

ng generate library my-lib
ng build my-lib

// In your application module
import { MyLibModule } from 'my-lib';

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

Angular Universal is used for server-side rendering (SSR). It allows rendering Angular applications on the server before sending them to the client:

ng add @nguniversal/express-engine

// server.ts
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { AppServerModule } from './src/main.server';

const app = express();
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
  providers: [provideModuleMap(LAZY_MODULE_MAP)]
}));
            

Custom pipes are created by implementing the PipeTransform interface:

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

@Pipe({
  name: 'customPipe'
})
export class CustomPipe implements PipeTransform {
  transform(value: string, ...args: any[]): string {
    return value.toUpperCase();
  }
}
            

Angular provides several built-in validators for forms:

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

@Component({
  selector: 'app-validators',
  template: \`
    <form [formGroup]="form">
      <input formControlName="email">
      <input formControlName="password">
    </form>
  \`
})
export class ValidatorsComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }
}
            

Content projection allows you to pass content into a component's template. Use the <ng-content> directive:

<ng-content></ng-content>

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

@Component({
  selector: 'app-content-projection',
  template: \`
    <div>
      <ng-content></ng-content>
    </div>
  \`
})
export class ContentProjectionComponent {}
            

Feature modules can be lazy-loaded by configuring routes with loadChildren:

const routes: Routes = [
  { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }
];
            

Observables are used to handle asynchronous data. Use the subscribe method to react to data changes:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { DataService } from './data.service';

@Component({
  selector: 'app-observable',
  template: \`<p>Data: {{ data | json }}</p>\`
})
export class ObservableComponent implements OnInit {
  data$: Observable<any>;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data$ = this.dataService.getData();
  }
}
            

ViewChild allows you to access a child component or element in your template:

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: \`<app-child #childRef></app-child>\`
})
export class ParentComponent {
  @ViewChild('childRef') childComponent: ChildComponent;

  ngAfterViewInit() {
    console.log(this.childComponent);
  }
}
            

Lifecycle hooks are methods in Angular that allow you to tap into key moments of a component's lifecycle:

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

@Component({
  selector: 'app-lifecycle',
  template: \`<p>Lifecycle hooks example</p>\`
})
export class LifecycleComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Component Initialized');
  }

  ngOnDestroy() {
    console.log('Component Destroyed');
  }
}
            

Custom validators are used to add validation logic to form controls. Implement a custom validator by creating a function that returns either null or an object indicating the validation error:

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? { 'forbiddenName': { value: control.value } } : null;
  };
}

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

@Component({
  selector: 'app-custom-validator',
  template: \`
    <form [formGroup]="form">
      <input formControlName="name">
      <div *ngIf="form.get('name').hasError('forbiddenName')">
        Name is forbidden
      </div>
    </form>
  \`
})
export class CustomValidatorComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', [forbiddenNameValidator(/admin/)]]
    });
  }
}
            

To provide multiple instances of a service, use different providers with a unique token:

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

export const MY_SERVICE_TOKEN = new InjectionToken<MyService>('MyService');

@Injectable()
export class MyService {
  constructor() {}
}

@NgModule({
  providers: [
    { provide: MY_SERVICE_TOKEN, useClass: MyService }
  ]
})
export class AppModule { }
            

Use an HTTP interceptor to catch and handle HTTP errors:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        console.error('HTTP Error:', error);
        return throwError(error);
      })
    );
  }
}
            

Define child routes within a parent route configuration:

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      { path: 'child1', component: Child1Component },
      { path: 'child2', component: Child2Component }
    ]
  }
];
            

NgRx Effects allow you to handle side effects in your application. Create effects to listen for actions and perform tasks like HTTP requests:

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { MyService } from './my.service';
import { loadItems, loadItemsSuccess } from './actions';
import { switchMap } from 'rxjs/operators';

@Injectable()
export class MyEffects {
  loadItems$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadItems),
      switchMap(() => this.myService.getItems()
        .pipe(map(items => loadItemsSuccess({ items })))
      )
    )
  );

  constructor(
    private actions$: Actions,
    private myService: MyService
  ) {}
}
            

Custom directives are used to extend HTML behavior. Create a directive by defining a class and using the @Directive decorator:

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
  }
}
            

Angular provides different encapsulation strategies for component styles. Use ViewEncapsulation to control this:

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

@Component({
  selector: 'app-encapsulation',
  template: \`<p>Encapsulation example</p>\`,
  styles: [\`
    p {
      color: red;
    }
  \`],
  encapsulation: ViewEncapsulation.None
})
export class EncapsulationComponent {}
            

Use the loadChildren property in route configurations to lazy-load modules:

const routes: Routes = [
  { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
];
            

ChangeDetectorRef provides methods to manually trigger change detection in a component:

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

@Component({
  selector: 'app-change-detection',
  template: \`<p>Change detection example</p>\`
})
export class ChangeDetectionComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  detectChanges() {
    this.cdr.detectChanges();
  }
}
            

Renderer2 is used to safely manipulate the DOM in Angular. Here’s an example of adding a class to an element:

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

@Component({
  selector: 'app-renderer',
  template: \`<div #myDiv>Renderer2 Example</div>\`
})
export class RendererComponent {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngAfterViewInit() {
    const div = this.el.nativeElement.querySelector('div');
    this.renderer.addClass(div, 'highlight');
  }
}
            

AsyncPipe allows you to subscribe to observables directly in the template:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { DataService } from './data.service';

@Component({
  selector: 'app-async-pipe',
  template: \`<p>Data: {{ data$ | async | json }}</p>\`
})
export class AsyncPipeComponent implements OnInit {
  data$: Observable<any>;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data$ = this.dataService.getData();
  }
}
            

ChangeDetectionStrategy controls how Angular checks for changes in a component. Use ChangeDetectionStrategy.OnPush to optimize performance:

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

@Component({
  selector: 'app-change-detection-strategy',
  template: \`<p>Change Detection Strategy Example</p>\`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChangeDetectionStrategyComponent {}
            

HostBinding and HostListener are used to bind properties and listen to events on the host element:

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

@Component({
  selector: 'app-host',
  template: \`<p>Host Binding and Listener Example</p>\`
})
export class HostComponent {
  @HostBinding('class.highlight') isHighlighted = true;

  @HostListener('click') onClick() {
    this.isHighlighted = !this.isHighlighted;
  }
}
            

ngOnChanges is called when an input property value changes:

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

@Component({
  selector: 'app-on-changes',
  template: \`<p>On Changes Example</p>\`
})
export class OnChangesComponent implements OnChanges {
  @Input() data: any;

  ngOnChanges(changes: SimpleChanges) {
    console.log('Changes:', changes);
  }
}
            

ng-container and ng-template are used to manage templates and control the rendering:

<ng-container *ngIf="condition">
  <ng-template #template>
    </ng-template></ng-container><ng-container *ngIf="condition"><ng-template #template><p>Content to render</p>
  </ng-template>
</ng-container>

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

@Component({
  selector: 'app-container',
  template: \`
    <ng-container *ngIf="showContent; else noContent">
      </ng-container><ng-container *ngIf="showContent; else noContent"><p>Content is visible</p>
    </ng-container>
    <ng-template #noContent>
      </ng-template><ng-template #noContent><p>Content is hidden</p>
    </ng-template>
  \`
})
export class ContainerComponent {
  showContent = true;
}
            

Manage environment configurations using environment files:

// environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};

// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com'
};
            

Custom structural directives are created using the *ngIf and *ngFor syntax:

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}

  @Input() set appMyDirective(condition: boolean) {
    this.viewContainer.clear();
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }
}
            

Global error handling is configured using an error handler class:

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

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: any) {
    console.error('Global error:', error);
  }
}

@NgModule({
  providers: [{ provide: ErrorHandler, useClass: GlobalErrorHandler }]
})
export class AppModule { }
            

Internationalization is handled using the Angular i18n package:

ng add @angular/localize

// app.component.html
<p i18n="@@hello">Hello</p>

// Extract messages
ng extract-i18n

// Translate and build for a specific locale
ng build --localize
            

Renderer2 can be used to dynamically create and manipulate components:

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-dynamic',
  template: \`<ng-template #container></ng-template>\`
})
export class DynamicComponentLoader {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  loadComponent() {
    const factory = this.resolver.resolveComponentFactory(DynamicComponent);
    this.container.clear();
    this.container.createComponent(factory);
  }
}
            

Custom pipes are used to transform data in the template. Create a pipe by defining a class and using the @Pipe decorator:

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

@Pipe({
  name: 'customPipe'
})
export class CustomPipe implements PipeTransform {
  transform(value: string, ...args: any[]): string {
    return value.toUpperCase();
  }
}
            

ChangeDetectorRef can be used to manually control change detection, such as when you need to update the view outside of Angular's default change detection cycle:

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

@Component({
  selector: 'app-manual-change',
  template: \`<p>{{ data }}</p>\`
})
export class ManualChangeComponent {
  data = 'Initial data';

  constructor(private cdr: ChangeDetectorRef) {}

  updateData() {
    this.data = 'Updated data';
    this.cdr.detectChanges();
  }
}
            

Reactive forms allow for more complex validation logic. Here’s how to create a form with custom validators:

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

@Component({
  selector: 'app-reactive-form',
  template: \`
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="username">
      <div *ngIf="form.get('username').hasError('forbiddenName')">
        Username is forbidden
      </div>
      <button type="submit">Submit</button>
    </form>
  \`
})
export class ReactiveFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      username: ['', [this.forbiddenNameValidator(/admin/)]]
    });
  }

  forbiddenNameValidator(nameRe: RegExp) {
    return (control: AbstractControl): {[key: string]: any} | null => {
      const forbidden = nameRe.test(control.value);
      return forbidden ? { 'forbiddenName': { value: control.value } } : null;
    };
  }

  onSubmit() {
    console.log(this.form.value);
  }
}
            

Use Angular's ComponentFactoryResolver to dynamically load components:

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-dynamic-loader',
  template: \`<ng-template #container></ng-template>\`
})
export class DynamicLoaderComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  loadComponent() {
    const factory = this.resolver.resolveComponentFactory(DynamicComponent);
    this.container.clear();
    this.container.createComponent(factory);
  }
}
            

Lazy loading modules allows for more efficient loading of Angular applications. Define a lazy-loaded module in your routing configuration:

const routes: Routes = [
  {
    path: 'lazy',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  }
];
            

NgRx provides a way to manage state in Angular applications using a store. Define actions, reducers, and effects:

import { createAction, createReducer, on } from '@ngrx/store';

// Actions
export const loadItems = createAction('[Item] Load Items');
export const loadItemsSuccess = createAction('[Item] Load Items Success', (items: any[]) => ({ items }));

// Reducer
export const initialState = [];
const _itemsReducer = createReducer(
  initialState,
  on(loadItemsSuccess, (state, { items }) => [...items])
);

export function itemsReducer(state, action) {
  return _itemsReducer(state, action);
}
            

Structural directives change the structure of the DOM. Create a custom structural directive like this:

import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}

  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}
            

HostListener can be used to listen to events on the host element of a component:

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

@Component({
  selector: 'app-host-listener',
  template: \`<p>Host Listener Example</p>\`
})
export class HostListenerComponent {
  @HostListener('click', ['$event'])
  onClick(event: Event) {
    console.log('Host element clicked:', event);
  }
}
            

ng-content allows you to project content into a component:

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

@Component({
  selector: 'app-content',
  template: \`<ng-content></ng-content>\`
})
export class ContentComponent {}
            

@ContentChild and @ContentChildren are used to access content projected into a component:

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

@Component({
  selector: 'app-content-query',
  template: \`<ng-content></ng-content>\`
})
export class ContentQueryComponent {
  @ContentChild('contentRef') contentChild: ElementRef;
  @ContentChildren('contentRef') contentChildren: QueryList<ElementRef>;
}
            

Custom decorators can be used to add metadata to classes or methods:

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

export function CustomDecorator(message: string) {
  return createDecorator((target: Function) => {
    target.prototype.customMessage = message;
  });
}

@CustomDecorator('Hello World')
export class CustomClass {
  customMessage: string;
}
            

Dependency injection scopes can be controlled using the providedIn property:

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

@Injectable({
  providedIn: 'root'  // Singleton scope
})
export class MyService {}

@Injectable({
  providedIn: 'any'   // Scoped to any module or component
})
export class ScopedService {}
            

HTTP interceptors can be used to modify requests and responses globally:

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer my-token')
    });
    return next.handle(authReq);
  }
}
            

Router guards can be used to protect routes based on conditions:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Observable } from 'rxjs';

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

  canActivate(): Observable<boolean> | Promise<boolean> | boolean {
    const isAuthenticated = false;  // Implement your authentication check here
    if (!isAuthenticated) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}
            

NgModule helps in organizing an application into cohesive blocks of functionality:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FeatureModule } from './feature/feature.module';

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

Custom validators can be created and used in reactive forms:

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function passwordMatchValidator(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const password = control.get('password');
    const confirmPassword = control.get('confirmPassword');
    return password && confirmPassword && password.value !== confirmPassword.value
      ? { 'mismatch': true }
      : null;
  };
}
            

@ViewChild and @ViewChildren are used to query and access elements or directives in the component's view:

import { Component, ViewChild, ViewChildren, QueryList } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: \`
    <app-child #child></app-child>
    <app-child *ngFor="let child of children" #children></app-child>
  \`
})
export class ParentComponent {
  @ViewChild('child') child: ChildComponent;
  @ViewChildren('children') children: QueryList<ChildComponent>;
}
            

Lazy loading modules with route parameters involves passing parameters to the route and configuring the module accordingly:

const routes: Routes = [
  {
    path: 'lazy/:id',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  }
];
            

Renderer2 is used for safe and compatible DOM manipulation:

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

@Component({
  selector: 'app-renderer',
  template: \`<div #box>Content</div>\`
})
export class RendererComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  changeColor() {
    this.renderer.setStyle(this.el.nativeElement.querySelector('div'), 'color', 'red');
  }
}
            

ngOnInit is called after the component is initialized, while ngAfterViewInit is called after the view has been fully initialized:

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

@Component({
  selector: 'app-lifecycle',
  template: \`<p>Lifecycle Hooks Example</p>\`
})
export class LifecycleComponent implements OnInit, AfterViewInit {
  ngOnInit() {
    console.log('OnInit called');
  }

  ngAfterViewInit() {
    console.log('AfterViewInit called');
  }
}
            

Feature modules help to organize an Angular application into cohesive blocks. Here's how to set up a feature module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';
import { FeatureRoutingModule } from './feature-routing.module';

@NgModule({
  declarations: [FeatureComponent],
  imports: [
    CommonModule,
    FeatureRoutingModule
  ]
})
export class FeatureModule { }
            

Custom directives are used to extend the behavior of elements. Here’s an example of a custom directive:

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'transparent');
  }
}
            

When you need to provide multiple instances or configurations of a service, you can use multi-provider tokens:

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

export const CONFIG = new InjectionToken('app.config');

@Injectable({
  providedIn: 'root'
})
export class ConfigService {
  constructor(@Inject(CONFIG) private config: string[]) {}
}

// In a module
@NgModule({
  providers: [
    { provide: CONFIG, useValue: ['config1', 'config2'], multi: true }
  ]
})
export class AppModule { }
            

To optimize performance, you can use techniques like lazy loading, Ahead-of-Time (AOT) compilation, and change detection strategies:

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

@Component({
  selector: 'app-performance',
  templateUrl: './performance.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PerformanceComponent {}
            

Dynamic forms are built based on data received at runtime. Use Angular’s reactive forms to create dynamic controls:

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

@Component({
  selector: 'app-dynamic-form',
  template: \`
    <form [formGroup]="form">
      <div formArrayName="items">
        <div *ngFor="let item of items.controls; let i = index">
          <input [formControlName]="i">
        </div>
      </div>
    </form>
  \`
})
export class DynamicFormComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      items: this.fb.array([this.fb.control('')])
    });
  }

  get items() {
    return this.form.get('items') as FormArray;
  }

  addItem() {
    this.items.push(this.fb.control(''));
  }
}
            

Lazy load a module with nested routes by defining child routes in the lazy-loaded module:

const routes: Routes = [
  {
    path: 'lazy',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule),
    children: [
      { path: 'child', component: ChildComponent }
    ]
  }
];
            

NgZone helps to execute code outside Angular's change detection:

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

@Component({
  selector: 'app-ngzone',
  template: \`<p>NgZone Example</p>\`
})
export class NgZoneComponent {
  constructor(private ngZone: NgZone) {
    this.ngZone.runOutsideAngular(() => {
      // Code running outside Angular's zone
    });
  }
}
            

Angular Universal allows you to perform server-side rendering to improve performance and SEO. Install Angular Universal and configure it:

ng add @nguniversal/express-engine
// Configure server.ts and other settings
            

Handle route and query parameters in Angular components:

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

@Component({
  selector: 'app-route',
  template: \`<p>Route Parameter: {{ param }}</p>\`
})
export class RouteComponent implements OnInit {
  param: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.param = params.get('id');
    });

    this.route.queryParams.subscribe(queryParams => {
      console.log(queryParams);
    });
  }
}
            

Create custom elements with Angular and use them in other applications:

import { Component, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';
import { Injector } from '@angular/core';

@Component({
  selector: 'app-custom-element',
  template: \`<p>Custom Element</p>\`
})
export class CustomElementComponent {}

@NgModule({
  declarations: [CustomElementComponent],
  imports: [BrowserModule],
  entryComponents: [CustomElementComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    const el = createCustomElement(CustomElementComponent, { injector });
    customElements.define('custom-element', el);
  }

  ngDoBootstrap() {}
}
            

Use HttpClient for advanced HTTP operations like interceptors, retries, and request caching:

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError, retry } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get('https://api.example.com/data', {
      headers: new HttpHeaders({
        'Authorization': 'Bearer my-token'
      })
    }).pipe(
      retry(3),
      catchError(this.handleError)
    );
  }

  private handleError(error: any) {
    console.error('An error occurred', error);
    return throwError(error);
  }
}
            

Internationalization and localization involve translating your application into different languages:

ng add @angular/localize
// Use i18n attributes in templates
// Configure locales and translations
            

Renderer2 provides a way to safely interact with the DOM:

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

@Component({
  selector: 'app-renderer2',
  template: \`<p>Renderer2 Example</p>\`
})
export class Renderer2Component {
  constructor(private renderer: Renderer2, private el: ElementRef) {
    this.renderer.setStyle(this.el.nativeElement, 'color', 'blue');
  }
}
            

Use Angular's Animation API to create complex animations:

import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'app-animation',
  template: \`<div [@fadeInOut]="state">Content</div>\`,
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('1s', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate('1s', style({ opacity: 0 }))
      ])
    ])
  ]
})
export class AnimationComponent {
  state = 'in';
}
            

Optimize performance by using ChangeDetectionStrategy.OnPush:

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

@Component({
  selector: 'app-optimization',
  template: \`<p>Optimization Example</p>\`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptimizationComponent {}
            

Use @ContentChild and @ContentChildren to query and access projected content:

import { Component, ContentChild, ContentChildren, QueryList } from '@angular/core';
import { ContentComponent } from './content.component';

@Component({
  selector: 'app-parent',
  template: \`<ng-content></ng-content>\`
})
export class ParentComponent {
  @ContentChild(ContentComponent) content: ContentComponent;
  @ContentChildren(ContentComponent) contentChildren: QueryList<ContentComponent>;
}
            

Use @HostListener to listen to events on the host element and @HostBinding to bind properties:

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

@Component({
  selector: 'app-host',
  template: \`<p>Host Binding and Listener Example</p>\`
})
export class HostComponent {
  @HostBinding('class.active') isActive = true;

  @HostListener('click') onClick() {
    this.isActive = !this.isActive;
  }
}
            

NgModel enables two-way data binding in Angular forms:

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

@Component({
  selector: 'app-model',
  template: \`
    <input [(ngModel)]="value">
    <p>Value: {{ value }}</p>
  \`
})
export class ModelComponent {
  value = '';
}
            

Global error handling can be configured with HTTP interceptors:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } 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 => {
        console.error('An error occurred', error);
        return throwError(error);
      })
    );
  }
}
            

Set up a service worker to enable PWA features:

ng add @angular/pwa
// Configure ngsw-config.json for caching strategies
            

Dynamic component loading allows you to load components at runtime. Use ComponentFactoryResolver:

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-dynamic-loader',
  template: \`<ng-template #container></ng-template>\`
})
export class DynamicLoaderComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private cfr: ComponentFactoryResolver) {}

  loadComponent() {
    const factory = this.cfr.resolveComponentFactory(DynamicComponent);
    this.container.createComponent(factory);
  }
}
            

@Inject is used for dependency injection with tokens, while @Optional allows you to handle missing dependencies:

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor(@Inject('TOKEN') @Optional() private token: string) {
    if (!token) {
      console.log('No token provided');
    }
  }
}
            

@ViewChild with static or dynamic allows you to control when the view query is resolved:

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

@Component({
  selector: 'app-viewchild',
  template: \`<p #paragraph>Text</p>\`
})
export class ViewChildComponent implements AfterViewInit {
  @ViewChild('paragraph', { static: true }) paragraph;

  ngAfterViewInit() {
    console.log(this.paragraph.nativeElement.textContent);
  }
}
            

NgRx provides a way to manage state in Angular applications using Redux principles. Set up actions, reducers, and effects:

import { createAction, props } from '@ngrx/store';

export const loadItems = createAction('[Items Page] Load Items');
export const loadItemsSuccess = createAction('[Items API] Load Items Success', props<{ items: any[] }>());
export const loadItemsFailure = createAction('[Items API] Load Items Failure', props<{ error: any }>());
            

Configure lazy-loaded modules in your app's routing module:

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];
            

Create custom validators for reactive forms:

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? { 'forbiddenName': { value: control.value } } : null;
  };
}

// Usage in a form
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-custom-validation',
  template: \`
    <form [formGroup]="form">
      <input formControlName="name">
      <div *ngIf="form.controls.name.errors?.forbiddenName">
        Name is forbidden
      </div>
    </form>
  \`
})
export class CustomValidationComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', [forbiddenNameValidator(/admin/)]]
    });
  }
}
            

Use @ContentChildren to query multiple projected elements:

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { ContentComponent } from './content.component';

@Component({
  selector: 'app-parent',
  template: \`<ng-content></ng-content>\`
})
export class ParentComponent implements AfterContentInit {
  @ContentChildren(ContentComponent) contentComponents: QueryList<ContentComponent>;

  ngAfterContentInit() {
    this.contentComponents.forEach(component => {
      console.log(component.someProperty);
    });
  }
}
            

Router guards help manage navigation based on conditions like authentication:

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 isAuthenticated = false; // Replace with real authentication check
    if (!isAuthenticated) {
      this.router.navigate(['/login']);
    }
    return isAuthenticated;
  }
}
            

Control component styles encapsulation with @ViewEncapsulation:

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

@Component({
  selector: 'app-encapsulation',
  template: \`<p>Encapsulation Example</p>\`,
  styles: [\`
    p {
      color: red;
    }
  \`],
  encapsulation: ViewEncapsulation.None
})
export class EncapsulationComponent {}
            

Use @HostListener to listen to events like click or hover:

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

@Component({
  selector: 'app-host-listener',
  template: \`<p>Host Listener Example</p>\`
})
export class HostListenerComponent {
  @HostListener('click', ['$event'])
  onClick(event: Event) {
    console.log('Element clicked', event);
  }
}
            

@HostBinding allows you to bind properties like classes or styles:

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

@Component({
  selector: 'app-host-binding',
  template: \`<p>Host Binding Example</p>\`
})
export class HostBindingComponent {
  @HostBinding('class.active') isActive = true;
}
            

Use @Injectable with providedIn to control hierarchical injection:

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

@Injectable({
  providedIn: 'root' // Hierarchical injectors are created with this configuration
})
export class MyService {}
            

Factory providers allow custom instantiation of services:

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

export function myServiceFactory() {
  return new MyService();
}

@NgModule({
  providers: [
    { provide: MyService, useFactory: myServiceFactory }
  ]
})
export class AppModule {}
            

Inject values using tokens and @Inject:

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

export const MY_TOKEN = new InjectionToken<string>('MyToken');

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor(@Inject(MY_TOKEN) private token: string) {}
}
            

Use HTTP interceptors to modify requests and responses:

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer token')
    });
    return next.handle(authReq);
  }
}
            

Configure application-wide services in @NgModule:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MyService } from './my.service';

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

Access child components with @ViewChild:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: \`<app-child></app-child>\`
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  ngAfterViewInit() {
    console.log(this.childComponent.someMethod());
  }
}
            

Use ChangeDetectorRef for manual change detection:

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

@Component({
  selector: 'app-manual-detection',
  template: \`<p>Manual Detection Example</p>\`
})
export class ManualDetectionComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  triggerChangeDetection() {
    this.cdr.detectChanges();
  }
}
            

Define feature modules and configure lazy loading in @NgModule:

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)
  }
];

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

Manage hierarchical dependencies with @Injectable:

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

@Injectable({
  providedIn: 'root' // or 'platform' or 'any'
})
export class MyService {}
            

Define custom directives to extend HTML behavior:

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.removeStyle(this.el.nativeElement, 'backgroundColor');
  }
}
            

Create custom pipes to transform data in templates:

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

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}
            

Use @Input to pass data from parent to child, and @Output to emit events from child to parent:

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

@Component({
  selector: 'app-child',
  template: \`<button (click)="notify()">Notify Parent</button>\`
})
export class ChildComponent {
  @Input() data: string;
  @Output() notify = new EventEmitter<string>();

  notifyParent() {
    this.notify.emit('Message from child');
  }
}

@Component({
  selector: 'app-parent',
  template: \`<app-child [data]="parentData" (notify)="onNotify($event)"></app-child>\`
})
export class ParentComponent {
  parentData = 'Data from parent';

  onNotify(message: string) {
    console.log(message);
  }
}
            

Configure lazy-loaded modules and route guards in your routing module:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canActivate: [AuthGuard]
  }
];

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

Provide services at different levels using @NgModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyService } from './my.service';

@NgModule({
  imports: [CommonModule],
  providers: [MyService]
})
export class FeatureModule {}
            

Listen to DOM events using @HostListener:

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

@Component({
  selector: 'app-host-listener',
  template: \`<p>Click me!</p>\`
})
export class HostListenerComponent {
  @HostListener('click', ['$event'])
  onClick(event: Event) {
    console.log('Element clicked:', event);
  }
}
            

Use @ContentChild and @ContentChildren to query projected content:

import { Component, ContentChild, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { ContentComponent } from './content.component';

@Component({
  selector: 'app-container',
  template: \`<ng-content></ng-content>\`
})
export class ContainerComponent implements AfterContentInit {
  @ContentChild(ContentComponent) contentChild: ContentComponent;
  @ContentChildren(ContentComponent) contentChildren: QueryList<ContentComponent>;

  ngAfterContentInit() {
    console.log(this.contentChild);
    this.contentChildren.forEach(child => console.log(child));
  }
}
            

Load components dynamically using ComponentFactoryResolver:

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-dynamic',
  template: \`<ng-template #container></ng-template>\`
})
export class DynamicComponentLoader {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private cfr: ComponentFactoryResolver) {}

  loadComponent() {
    const factory = this.cfr.resolveComponentFactory(DynamicComponent);
    this.container.createComponent(factory);
  }
}
            

Optimize performance using ChangeDetectionStrategy.OnPush:

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

@Component({
  selector: 'app-optimization',
  template: \`<p>Change Detection Strategy</p>\`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptimizationComponent {}
            

Control change detection with NgZone:

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

@Component({
  selector: 'app-ngzone',
  template: \`<p>NgZone Example</p>\`
})
export class NgZoneComponent {
  constructor(private ngZone: NgZone) {
    this.ngZone.runOutsideAngular(() => {
      setTimeout(() => {
        this.ngZone.run(() => console.log('Change detection triggered'));
      }, 1000);
    });
  }
}
            

Make HTTP requests using HttpClient:

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

@Component({
  selector: 'app-http',
  template: \`<p>HTTP Request Example</p>\`
})
export class HttpComponent {
  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get('https://api.example.com/data');
  }
}
            

Define service providers at different levels:

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

@Injectable({
  providedIn: 'root' // Service provided at the root level
})
export class MyService {}
            

Configure third-party library providers in @NgModule:

import { NgModule } from '@angular/core';
import { SomeLibraryModule, SomeService } from 'some-library';

@NgModule({
  imports: [SomeLibraryModule],
  providers: [SomeService]
})
export class AppModule {}
            

Access route and query parameters using Router:

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

@Component({
  selector: 'app-route',
  template: \`<p>Route Example</p>\`
})
export class RouteComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      const id = params.get('id');
      console.log('Route parameter id:', id);
    });

    this.route.queryParamMap.subscribe(params => {
      const filter = params.get('filter');
      console.log('Query parameter filter:', filter);
    });
  }
}
            

Create structural directives to manipulate DOM layout:

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  constructor(private templateRef: TemplateRef<any>, private vcr: ViewContainerRef) {}

  set appUnless(condition: boolean) {
    if (!condition) {
      this.vcr.createEmbeddedView(this.templateRef);
    } else {
      this.vcr.clear();
    }
  }
}
            

Control view encapsulation with encapsulation property:

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

@Component({
  selector: 'app-encapsulation',
  template: \`<p>View Encapsulation Example</p>\`,
  encapsulation: ViewEncapsulation.None // or Emulated, Native
})
export class EncapsulationComponent {}

            

Define root and feature modules in your application:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FeatureModule } from './feature/feature.module';

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

Configure providers and imports in feature modules:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';
import { FeatureService } from './feature.service';

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule],
  providers: [FeatureService]
})
export class FeatureModule {}
            

Manage hierarchical dependencies using @Injectable:

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

@Injectable({
  providedIn: 'root' // or 'platform', 'any'
})
export class HierarchicalService {}
            

Combine ChangeDetectorRef and NgZone to control change detection:

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

@Component({
  selector: 'app-change-detection',
  template: \`<p>Change Detection Example</p>\`
})
export class ChangeDetectionComponent {
  constructor(private cdr: ChangeDetectorRef, private ngZone: NgZone) {}

  triggerChangeDetection() {
    this.ngZone.run(() => this.cdr.detectChanges());
  }
}
            

Use @Inject to specify the token for dependency injection:

import { Injectable, Inject } from '@angular/core';
import { MY_TOKEN } from './tokens';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor(@Inject(MY_TOKEN) private myValue: string) {}
}
            

Use @Optional to inject dependencies that may or may not be provided:

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

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor(@Optional() private optionalDependency?: SomeService) {}
}
            

Implement ngAfterViewInit to perform actions after the component's view has been initialized:

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

@Component({
  selector: 'app-after-view',
  template: \`<p #pElement>Content</p>\`
})
export class AfterViewComponent implements AfterViewInit {
  @ViewChild('pElement') pElement: ElementRef;

  ngAfterViewInit() {
    console.log(this.pElement.nativeElement.textContent);
  }
}
            

Use ngOnChanges to react to changes in input properties:

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

@Component({
  selector: 'app-on-changes',
  template: \`<p>{{inputProp}}</p>\`
})
export class OnChangesComponent implements OnChanges {
  @Input() inputProp: string;

  ngOnChanges(changes: SimpleChanges) {
    console.log('Changes:', changes);
  }
}
            

Implement ngDoCheck to customize change detection behavior:

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

@Component({
  selector: 'app-do-check',
  template: \`<p>Custom Change Detection</p>\`
})
export class DoCheckComponent implements DoCheck {
  ngDoCheck() {
    console.log('Custom change detection');
  }
}
            

Initialize data using ngOnInit:

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

@Component({
  selector: 'app-on-init',
  template: \`<p>Initialized Data: {{data}}</p>\`
})
export class OnInitComponent implements OnInit {
  data: string;

  ngOnInit() {
    this.data = 'Initial Data';
  }
}
            

Use ngOnDestroy to perform cleanup tasks:

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

@Component({
  selector: 'app-on-destroy',
  template: \`<p>Cleanup Example</p>\`
})
export class OnDestroyComponent implements OnDestroy {
  ngOnDestroy() {
    console.log('Cleanup tasks');
  }
}
            

Access child components or DOM elements using @ViewChild:

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

@Component({
  selector: 'app-view-child',
  template: \`<input #inputElement>\`
})
export class ViewChildComponent {
  @ViewChild('inputElement') inputElement: ElementRef;

  ngAfterViewInit() {
    this.inputElement.nativeElement.focus();
  }
}
            

Query projected content using @ContentChild:

import { Component, ContentChild, AfterContentInit } from '@angular/core';
import { ContentComponent } from './content.component';

@Component({
  selector: 'app-content-child',
  template: \`<ng-content></ng-content>\`
})
export class ContentChildComponent implements AfterContentInit {
  @ContentChild(ContentComponent) contentChild: ContentComponent;

  ngAfterContentInit() {
    console.log(this.contentChild);
  }
}
            

Query multiple elements or components using @ViewChildren and @ContentChildren:

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-view-children',
  template: \`<app-child></app-child><app-child></app-child>\`
})
export class ViewChildrenComponent implements AfterViewInit {
  @ViewChildren(ChildComponent) children: QueryList<ChildComponent>;

  ngAfterViewInit() {
    this.children.forEach(child => console.log(child));
  }
}
            

Use @HostBinding to bind properties to the host element:

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

@Directive({
  selector: '[appHostBinding]'
})
export class HostBindingDirective {
  @HostBinding('class.highlight') isHighlighted = true;
}
            

Listen to events on the host element using @HostListener:

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

@Directive({
  selector: '[appHostListener]'
})
export class HostListenerDirective {
  @HostListener('mouseenter') onMouseEnter() {
    console.log('Mouse entered');
  }
}
            

Create a custom pipe to transform data:

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

@Pipe({
  name: 'customPipe'
})
export class CustomPipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}
            

Use NgZone to control change detection:

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

@Component({
  selector: 'app-ng-zone',
  template: \`<p>NgZone Example</p>\`
})
export class NgZoneComponent {
  constructor(private ngZone: NgZone) {}

  runOutsideAngular() {
    this.ngZone.runOutsideAngular(() => {
      // Code that doesn't trigger change detection
    });
  }

  runInsideAngular() {
    this.ngZone.run(() => {
      // Code that triggers change detection
    });
  }
}
            

Use Renderer2 for DOM manipulation:

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

@Component({
  selector: 'app-renderer',
  template: \`<p>Renderer2 Example</p>\`
})
export class RendererComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngAfterViewInit() {
    this.renderer.setStyle(this.el.nativeElement.querySelector('p'), 'color', 'blue');
  }
}
            

Manually trigger change detection using ChangeDetectorRef:

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

@Component({
  selector: 'app-change-detector',
  template: \`<p>Change Detection Example</p>\`
})
export class ChangeDetectorComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  triggerChangeDetection() {
    this.cdr.detectChanges();
  }
}
            

Implement HttpInterceptor to intercept HTTP requests and responses:

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer token')
    });
    return next.handle(authReq);
  }
}