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: \`
    

      Name:
      
      Age:
      
    
  \`
})
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: \`
Example component
\`
})
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: \`
Data: {{ data | json }}
\`
})
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 { }


  
{{ item.name }}


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: \`
    

      
      
      Submit
    
  \`
})
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: \`
Param: {{ id }}
\`
})
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: \`
NgZone example
\`
})
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: \`
    

      
      
    
  \`
})
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:

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

@Component({
  selector: 'app-content-projection',
  template: \`
    

      
    
  \`
})
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: \`
Data: {{ data | json }}
\`
})
export class ObservableComponent implements OnInit {
  data$: Observable;

  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: \`\`
})
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: \`
Lifecycle hooks example
\`
})
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: \`
    

      
      

        Name is forbidden
      
    

  \`
})
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');

@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, 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: \`
Encapsulation example
\`,
  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: \`
Change detection example
\`
})
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: \`
Renderer2 Example
\`
})
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: \`
Data: {{ data$ | async | json }}
\`
})
export class AsyncPipeComponent implements OnInit {
  data$: Observable;

  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: \`
Change Detection Strategy Example
\`,
  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: \`
Host Binding and Listener Example
\`
})
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: \`
On Changes Example
\`
})
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:

  
    
Content to render
  


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

@Component({
  selector: 'app-container',
  template: \`
    
      
Content is visible
    
    
      
Content is hidden
    
  \`
})
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, 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
Hello


// 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: \`\`
})
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: \`
{{ data }}
\`
})
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: \`
    

      
      

        Username is forbidden
      
      Submit
    

  \`
})
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: \`\`
})
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, 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: \`
Host Listener Example
\`
})
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: \`\`
})
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: \`\`
})
export class ContentQueryComponent {
  @ContentChild('contentRef') contentChild: ElementRef;
  @ContentChildren('contentRef') contentChildren: QueryList;
}
            

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, next: HttpHandler): Observable> {
    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 | Promise | 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: \`
    
    
  \`
})
export class ParentComponent {
  @ViewChild('child') child: ChildComponent;
  @ViewChildren('children') children: QueryList;
}
            

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: \`
Content
\`
})
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: \`
Lifecycle Hooks Example
\`
})
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: \`
    

      

        

          
        
      
    

  \`
})
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: \`
NgZone Example
\`
})
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: \`
Route Parameter: {{ param }}
\`
})
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: \`
Custom Element
\`
})
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: \`
Renderer2 Example
\`
})
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: \`
Content
\`,
  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: \`
Optimization Example
\`,
  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: \`\`
})
export class ParentComponent {
  @ContentChild(ContentComponent) content: ContentComponent;
  @ContentChildren(ContentComponent) contentChildren: QueryList;
}
            

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: \`
Host Binding and Listener Example
\`
})
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: \`
    
    
Value: {{ value }}

  \`
})
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, next: HttpHandler): Observable> {
    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: \`\`
})
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: \`
Text
\`
})
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: \`
    

      
      

        Name is forbidden
      
    

  \`
})
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: \`\`
})
export class ParentComponent implements AfterContentInit {
  @ContentChildren(ContentComponent) contentComponents: QueryList;

  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: \`
Encapsulation Example
\`,
  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: \`
Host Listener Example
\`
})
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: \`
Host Binding Example
\`
})
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('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, next: HttpHandler): Observable> {
    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: \`\`
})
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: \`
Manual Detection Example
\`
})
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: \`Notify Parent\`
})
export class ChildComponent {
  @Input() data: string;
  @Output() notify = new EventEmitter();

  notifyParent() {
    this.notify.emit('Message from child');
  }
}

@Component({
  selector: 'app-parent',
  template: \`\`
})
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: \`
Click me!
\`
})
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: \`\`
})
export class ContainerComponent implements AfterContentInit {
  @ContentChild(ContentComponent) contentChild: ContentComponent;
  @ContentChildren(ContentComponent) contentChildren: QueryList;

  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: \`\`
})
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: \`
Change Detection Strategy
\`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptimizationComponent {}
            

Control change detection with NgZone:

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

@Component({
  selector: 'app-ngzone',
  template: \`
NgZone Example
\`
})
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: \`
HTTP Request Example
\`
})
export class HttpComponent {
  constructor(private http: HttpClient) {}

  getData(): Observable {
    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: \`
Route Example
\`
})
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, 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: \`
View Encapsulation Example
\`,
  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: \`
Change Detection Example
\`
})
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: \`
Content
\`
})
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: \`
{{inputProp}}
\`
})
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: \`
Custom Change Detection
\`
})
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: \`
Initialized Data: {{data}}
\`
})
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: \`
Cleanup Example
\`
})
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: \`\`
})
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: \`\`
})
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: \`\`
})
export class ViewChildrenComponent implements AfterViewInit {
  @ViewChildren(ChildComponent) children: QueryList;

  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: \`
NgZone Example
\`
})
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: \`
Renderer2 Example
\`
})
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: \`
Change Detection Example
\`
})
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, next: HttpHandler): Observable> {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer token')
    });
    return next.handle(authReq);
  }
}