Angular v20

https://v20.angular.dev
Admin
Angular is a web framework that empowers developers to build fast, reliable applications with a...
Tokens:1,542,059
Snippets:13,400
Trust Score:9.9
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Setup and open collection in VS Code

Source: https://v20.angular.dev/tools/cli/schematics-authoring

Navigates to the collection folder, installs dependencies, builds, and opens the project in VS Code.

```bash
cd hello-worldnpm installnpm run buildcode .
```

--------------------------------

### Router testing setup with TestBed

Source: https://v20.angular.dev/api/router/testing/RouterTestingModule

Example of setting up the router for testing using TestBed.configureTestingModule with RouterModule.forRoot. This is the recommended approach instead of using the deprecated RouterTestingModule.

```typescript
beforeEach(() => {  TestBed.configureTestingModule({    imports: [      RouterModule.forRoot(        [{path: '', component: BlankCmp}, {path: 'simple', component: SimpleCmp}]      )    ]  });});
```

--------------------------------

### renderApplication usage example

Source: https://v20.angular.dev/api/platform-server/renderApplication

Usage example for renderApplication. It imports necessary modules, defines an appConfig, creates a bootstrap function that calls bootstrapApplication with the context, and then awaits renderApplication to get the rendered output string.

```typescript
import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';import { renderApplication } from '@angular/platform-server';import { ApplicationConfig } from '@angular/core';import { AppComponent } from './app.component';const appConfig: ApplicationConfig = { providers: [...] };const bootstrap = (context: BootstrapContext) =>  bootstrapApplication(AppComponent, config, context);const output = await renderApplication(bootstrap);
```

--------------------------------

### Configure initialization function with provideAppInitializer

Source: https://v20.angular.dev/api/core/provideAppInitializer

Example of configuring an initialization function using provideAppInitializer() in a bootstrapApplication call. The initializer runs in the injection context and can use inject() to get dependencies like HttpClient.

```typescript
bootstrapApplication(App, {  providers: [    provideAppInitializer(() => {      const http = inject(HttpClient);      return firstValueFrom(        http          .get("https://someUrl.com/api/user")          .pipe(tap(user => { ... }))      );    }),    provideHttpClient(),  ],});
```

--------------------------------

### app/demo/demo.ts - Angular services and components example

Source: https://v20.angular.dev/guide/testing/services

This is the full content of the demo file app/demo/demo.ts, which defines services (ValueService, MasterService), a pipe (ReversePipe), and multiple test components. It is used to illustrate Angular dependency injection, input/output signals, and component templates. The file is referenced in the guide as the source for the MasterService example.

```typescript
import {  Component,  ContentChildren,  Directive,  EventEmitter,  HostBinding,  HostListener,  inject,  Injectable,  input,  output,  OnChanges,  OnDestroy,  OnInit,  Pipe,  PipeTransform,  SimpleChanges,  signal,} from '@angular/core';import {FormsModule} from '@angular/forms';import {of} from 'rxjs';import {delay} from 'rxjs/operators';import {sharedImports} from '../shared/shared';////////// The App: Services and Components for the tests. //////////////export interface Hero {  name: string;}////////// Services ///////////////@Injectable()export class ValueService {  value = 'real value';  getValue() {    return this.value;  }  setValue(value: string) {    this.value = value;  }  getObservableValue() {    return of('observable value');  }  getPromiseValue() {    return Promise.resolve('promise value');  }  getObservableDelayValue() {    return of('observable delay value').pipe(delay(10));  }}@Injectable()export class MasterService {  public valueService = inject(ValueService);  getValue() {    return this.valueService.getValue();  }}/////////// Pipe /////////////////* * Reverse the input string. */@Pipe({name: 'reverse'})export class ReversePipe implements PipeTransform {  transform(s: string) {    let r = '';    for (let i = s.length; i; ) {      r += s[--i];    }    return r;  }}//////////// Components /////////////@Component({  selector: 'bank-account',  template: ` Bank Name: {{ bank() }} Account Id: {{ id() }} `,})export class BankAccountComponent {  bank = input('');  id = input('', {alias: 'account'});}/** A component with attributes, styles, classes, and property setting */@Component({  selector: 'bank-account-parent',  template: `    <bank-account      bank="RBC"      account="4747"      [style.width.px]="width"      [style.color]="color"      [class.closed]="isClosed"      [class.open]="!isClosed"    />  `,  imports: [BankAccountComponent],})export class BankAccountParentComponent {  width = 200;  color = 'red';  isClosed = true;}@Component({  selector: 'lightswitch-comp',  template: ` <button type="button" (click)="clicked()">Click me!</button>    <span>{{ message }}</span>`,})export class LightswitchComponent {  isOn = false;  clicked() {    this.isOn = !this.isOn;  }  get message() {    return `The light is ${this.isOn ? 'On' : 'Off'}`;  }}@Component({  selector: 'child-1',  template: '<span>Child-1({{text()}})</span>',})export class Child1Component {  text = input('Original');}@Component({  selector: 'child-2',  template: '<div>Child-2({{text()}})</div>',})export class Child2Component {  text = input('');}@Component({  selector: 'child-3',  template: '<div>Child-3({{text}})</div>',})export class Child3Component {  text = input('');}@Component({  selector: 'input-comp',  template: '<input [(ngModel)]="name">',  imports: [FormsModule],})export class InputComponent {  name = signal('John');}@Component({  selector: 'input-value-comp',  template: ` Name: <input [value]="name" /> {{ name }} `,})export class InputValueBinderComponent {  name = 'Sally'; // initial value}@Component({  selector: 'parent-comp',  imports: [Child1Component],  template: 'Parent(<child-1></child-1>)',})export class ParentComponent {}@Component({  selector: 'io-comp',  template:    '<button type="button" class="hero" (click)="click()">Original {{hero().name}}</button>',})export class IoComponent {  readonly hero = input.required<Hero>();  readonly selected = output<Hero>();  click() {    this.selected.emit(this.hero);  }}@Component({  selector: 'io-parent-comp',  template: `    @if (!selectedHero) {      <p><i>Click to select a hero</i></p>    }    @if (selectedHero) {      <p>The selected hero is {{ selectedHero.name }}</p>    }    @for (hero of heroes; track hero) {      <io-comp [hero]="hero" (selected)="onSelect($event)"> </io-comp>    }  `,  imports: [IoComponent, sharedImports],})export class IoParentComponent {  heroes: Hero[] = [{name: 'Bob'}, {name: 'Carol'}, {name: 'Ted'}, {name: 'Alice'}];  selectedHero!: Hero;  onSelect(hero: Hero) {    this.selectedHero = hero;  }}@Component({  selector: 'my-if-comp',  template: 'MyIf(@if (showMore) {<span>More</span>})',  imports: [sharedImports],})export class MyIfComponent {  showMore = false;}@Component({  selector: 'my-service-comp',  template: 'injected value: {{valueService.value}}',  providers: [ValueService],})export class TestProvidersComponent {  public valueService = inject(ValueService);}@Component({  selector: 'my-service-comp',  template: 'injected value: {{valueService.value}}',  viewProviders: [ValueService],})export class TestViewProvidersComponent {  public valueService = inject(ValueService);}@Component({  selector: 'external-template-comp',  templateUrl: 
```

--------------------------------

### Test ValueService with TestBed and async utilities

Source: https://v20.angular.dev/guide/testing/services

This is the full test file for the 'demo' TestBed example. It sets up a TestBed with ValueService in a beforeEach, then tests service methods including synchronous, promise, observable, and delayed observable values. It also demonstrates injecting a default null when a service is not provided and using fakeAsync with tick.

```typescript
import {Component, DebugElement, Injectable} from '@angular/core';import {
  ComponentFixture,
  fakeAsync,
  inject,
  TestBed,
  tick,
  waitForAsync,
} from '@angular/core/testing';import {FormsModule, NgControl, NgModel} from '@angular/forms';import {By} from '@angular/platform-browser';import {addMatchers, click} from '../../testing';import {
  BankAccountComponent,
  BankAccountParentComponent,
  Child1Component,
  Child2Component,
  Child3Component,
  ExternalTemplateComponent,
  InputComponent,
  IoComponent,
  IoParentComponent,
  LightswitchComponent,
  MasterService,
  MyIfChildComponent,
  MyIfComponent,
  MyIfParentComponent,
  NeedsContentComponent,
  ParentComponent,
  ReversePipeComponent,
  ShellComponent,
  TestProvidersComponent,
  TestViewProvidersComponent,
  ValueService,
} from './demo';export class NotProvided extends ValueService {
  /* example below */
}beforeEach(addMatchers);describe('demo (with TestBed):', () => {
  ////////  Service Tests  /////////////
  describe('ValueService', () => {
    let service: ValueService;
    beforeEach(() => {
      TestBed.configureTestingModule({providers: [ValueService]});
      service = TestBed.inject(ValueService);
    });
    it('should use ValueService', () => {
      service = TestBed.inject(ValueService);
      expect(service.getValue()).toBe('real value');
    });
    it('can inject a default value when service is not provided', () => {
      expect(TestBed.inject(NotProvided, null)).toBeNull();
    });
    it('test should wait for ValueService.getPromiseValue', waitForAsync(() => {
      service.getPromiseValue().then((value) => expect(value).toBe('promise value'));
    }));
    it('test should wait for ValueService.getObservableValue', waitForAsync(() => {
      service.getObservableValue().subscribe((value) => expect(value).toBe('observable value'));
    }));
    // Must use done. See https://github.com/angular/angular/issues/10127
    it('test should wait for ValueService.getObservableDelayValue', (done: DoneFn) => {
      service.getObservableDelayValue().subscribe((value) => {
        expect(value).toBe('observable delay value');
        done();
      });
    });
    it('should allow the use of fakeAsync', fakeAsync(() => {
      let value: any;
      service.getPromiseValue().then((val: any) => (value = val));
      tick(); // Trigger JS engine cycle until all promises resolve.
    }));
  });
});
```

--------------------------------

### started

Source: https://v20.angular.dev/api/cdk/drag-drop/DragRef

Emits when the user starts dragging the item.

```APIDOC
## started

### Description
Emits when the user starts dragging the item.

### Type
`any`
```

--------------------------------

### ValueService TestBed tests with async patterns

Source: https://v20.angular.dev/guide/testing/services

Test setup for ValueService using TestBed, including async patterns with waitForAsync, fakeAsync, and done callback. It verifies service injection, default null injection, and promise/observable value resolution.

```typescript
import {Component, DebugElement, Injectable} from '@angular/core';
import {
  ComponentFixture,
  fakeAsync,
  inject,
  TestBed,
  tick,
  waitForAsync,
} from '@angular/core/testing';
import {FormsModule, NgControl, NgModel} from '@angular/forms';
import {By} from '@angular/platform-browser';
import {addMatchers, click} from '../../testing';
import {
  BankAccountComponent,
  BankAccountParentComponent,
  Child1Component,
  Child2Component,
  Child3Component,
  ExternalTemplateComponent,
  InputComponent,
  IoComponent,
  IoParentComponent,
  LightswitchComponent,
  MasterService,
  MyIfChildComponent,
  MyIfComponent,
  MyIfParentComponent,
  NeedsContentComponent,
  ParentComponent,
  ReversePipeComponent,
  ShellComponent,
  TestProvidersComponent,
  TestViewProvidersComponent,
  ValueService,
} from './demo';
export class NotProvided extends ValueService {
  /* example below */
}
beforeEach(addMatchers);
describe('demo (with TestBed):', () => {
  ////////
  // Service Tests
  /////////////
  describe('ValueService', () => {
    let service: ValueService;
    beforeEach(() => {
      TestBed.configureTestingModule({providers: [ValueService]});
      service = TestBed.inject(ValueService);
    });
    it('should use ValueService', () => {
      service = TestBed.inject(ValueService);
      expect(service.getValue()).toBe('real value');
    });
    it('can inject a default value when service is not provided', () => {
      expect(TestBed.inject(NotProvided, null)).toBeNull();
    });
    it('test should wait for ValueService.getPromiseValue', waitForAsync(() => {
      service.getPromiseValue().then((value) => expect(value).toBe('promise value'));
    }));
    it('test should wait for ValueService.getObservableValue', waitForAsync(() => {
      service.getObservableValue().subscribe((value) => expect(value).toBe('observable value'));
    }));
    // Must use done. See https://github.com/angular/angular/issues/10127
    it('test should wait for ValueService.getObservableDelayValue', (done: DoneFn) => {
      service.getObservableDelayValue().subscribe((value) => {
        expect(value).toBe('observable delay value');
        done();
      });
    });
    it('should allow the use of fakeAsync', fakeAsync(() => {
      let value: any;
      service.getPromiseValue().then((val: any) => (value = val));
      tick(); // Trigger JS engine cycle until all promises resolve.
    }));
  });
});
```

--------------------------------

### Test ValueService with TestBed and fakeAsync

Source: https://v20.angular.dev/guide/testing/services

Provides the full test setup for the demo TestBed, including imports, a NotProvided service class, and a suite of ValueService tests covering synchronous, promise, observable, and fakeAsync patterns. The fakeAsync test uses tick() to flush promises.

```typescript
import {Component, DebugElement, Injectable} from '@angular/core';import {  ComponentFixture,  fakeAsync,  inject,  TestBed,  tick,  waitForAsync,} from '@angular/core/testing';import {FormsModule, NgControl, NgModel} from '@angular/forms';import {By} from '@angular/platform-browser';import {addMatchers, click} from '../../testing';import {  BankAccountComponent,  BankAccountParentComponent,  Child1Component,  Child2Component,  Child3Component,  ExternalTemplateComponent,  InputComponent,  IoComponent,  IoParentComponent,  LightswitchComponent,  MasterService,  MyIfChildComponent,  MyIfComponent,  MyIfParentComponent,  NeedsContentComponent,  ParentComponent,  ReversePipeComponent,  ShellComponent,  TestProvidersComponent,  TestViewProvidersComponent,  ValueService,} from './demo';export class NotProvided extends ValueService {  /* example below */}beforeEach(addMatchers);describe('demo (with TestBed):', () => {  ////////  Service Tests  /////////////  describe('ValueService', () => {    let service: ValueService;    beforeEach(() => {      TestBed.configureTestingModule({providers: [ValueService]});      service = TestBed.inject(ValueService);    });    it('should use ValueService', () => {      service = TestBed.inject(ValueService);      expect(service.getValue()).toBe('real value');    });    it('can inject a default value when service is not provided', () => {      expect(TestBed.inject(NotProvided, null)).toBeNull();    });    it('test should wait for ValueService.getPromiseValue', waitForAsync(() => {      service.getPromiseValue().then((value) => expect(value).toBe('promise value'));    }));    it('test should wait for ValueService.getObservableValue', waitForAsync(() => {      service.getObservableValue().subscribe((value) => expect(value).toBe('observable value'));    }));    // Must use done. See https://github.com/angular/angular/issues/10127    it('test should wait for ValueService.getObservableDelayValue', (done: DoneFn) => {      service.getObservableDelayValue().subscribe((value) => {        expect(value).toBe('observable delay value');        done();      });    });    it('should allow the use of fakeAsync', fakeAsync(() => {      let value: any;      service.getPromiseValue().then((val: any) => (value = val));      tick(); // Trigger JS engine cycle until all promises resolve.
```

--------------------------------

### Override component providers in TestBed and verify injector hierarchy

Source: https://v20.angular.dev/guide/testing/services

Configures TestBed with a real ValueService, then overrides it per component: TestComponent gets an empty object via useValue, TestProvidersComponent gets FakeValueService via useClass. Verifies that TestBed.inject() returns the TestBed-level provider while each component's injector returns its own override.

```typescript
TestBed.configureTestingModule({
  imports: [TestProvidersComponent],
  providers: [ValueService],
})
  .overrideComponent(TestComponent, {
    set: {providers: [{provide: ValueService, useValue: {}}]},
  })
  .overrideComponent(TestProvidersComponent, {
    set: {providers: [{provide: ValueService, useClass: FakeValueService}]},
  })
  .createComponent(TestComponent);
let testBedProvider!: ValueService;
// `inject` uses TestBed's injector
inject([ValueService], (s: ValueService) => (testBedProvider = s))();
const tcProvider = fixture.debugElement.injector.get(ValueService) as ValueService;
const tpcProvider = fixture.debugElement.children[0].injector.get(
  ValueService,
) as FakeValueService;
expect(testBedProvider).withContext('testBed/tc not same providers').not.toBe(tcProvider);
expect(testBedProvider).withContext('testBed/tpc not same providers').not.toBe(tpcProvider);
expect(testBedProvider instanceof ValueService)
  .withContext('testBedProvider is ValueService')
  .toBe(true);
expect(tcProvider)
  .withContext('tcProvider is {}')
  .toEqual({} as ValueService);
expect(tpcProvider instanceof FakeValueService)
  .withContext('tpcProvider is FakeValueService')
  .toBe(true);
```

--------------------------------

### Start MCP server with ng mcp

Source: https://v20.angular.dev/ai/mcp

Starts the Angular CLI MCP server from the terminal. Displays setup instructions when run interactively.

```bash
ng mcp
```

--------------------------------

### Rendered DOM for class binding example

Source: https://v20.angular.dev/guide/templates/binding

Rendered DOM output for the previous class binding example. The button only gets the `highlighted` class because `embiggened` is false.

```html
<ul class="full-width outlined"> ... </ul>
<section class="expandable elevated"> ... </section>
<button class="highlighted"> ... </button>
```

--------------------------------

### Install Angular CLI globally

Source: https://v20.angular.dev/cli/completion

Installs the Angular CLI globally so that the autocompletion script can find and execute the ng command. Use this if you get 'command not found: ng'.

```bash
npm install -g @angular/cli
```

--------------------------------

### Simple NgComponentOutlet example

Source: https://v20.angular.dev/api/common/NgComponentOutlet

A simple example with a HelloWorld component and a host component that uses NgComponentOutlet to render it.

```TypeScript
@Component({  selector: 'hello-world',  template: 'Hello World!',})export class HelloWorld {}@Component({  selector: 'ng-component-outlet-simple-example',  imports: [NgComponentOutlet],  template: `<ng-container *ngComponentOutlet="HelloWorld"></ng-container>`,})export class NgComponentOutletSimpleExample {  // This field is necessary to expose HelloWorld to the template.  HelloWorld = HelloWorld;}
```

--------------------------------

### Development server startup output

Source: https://v20.angular.dev/context/llm-files/llms-full.txt

Expected output when the development server starts successfully, including the local URL.

```text
Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
```

--------------------------------

### HTTP Request Example: searchHeroes

Source: https://v20.angular.dev/api/common/http/HttpClient

Performs a GET request using HttpClient.request with HttpParams. The example shows how to construct parameters from a string and pass them with the request. Note the responseType is set to 'json'.

```typescript
 // GET heroes whose name contains search termsearchHeroes(term: string): observable<Hero[]>{ const params = new HttpParams({fromString: 'name=term'});   return this.httpClient.request('GET', this.heroesUrl, {responseType:'json', params});}
```

--------------------------------

### Set up TestBed with provideHttpClient and provideHttpClientTesting

Source: https://v20.angular.dev/guide/http/testing

Configure TestBed with provideHttpClient() before provideHttpClientTesting() to use the test backend. Inject HttpTestingController to interact with the test backend.

```typescript
TestBed.configureTestingModule({
  providers: [
    // ... other test providers
    provideHttpClient(),
    provideHttpClientTesting(),
  ],
});
const httpTesting = TestBed.inject(HttpTestingController);
```

--------------------------------

### Build with multiple configurations

Source: https://v20.angular.dev/tools/cli/environments

Builds the project with multiple configurations specified as a comma-separated list. Configurations are applied in order, and conflicting options use the value from the last configuration.

```bash
ng build --configuration debug,production,customer-facing
```

--------------------------------

### AppComponent with injected services

Source: https://v20.angular.dev/guide/di/hierarchical-dependency-injection

Injects FlowerService and AnimalService into the AppComponent. This is the starting point for the hierarchical dependency injection example.

```typescript
export class AppComponent {
    public flower = inject(FlowerService);
    public animal = inject(AnimalService);
}
```

--------------------------------

### Build with production configuration

Source: https://v20.angular.dev/ecosystem/service-workers/app-shell

Builds the application using the production configuration. Use this for a production build.

```bash
ng build
```

--------------------------------

### Example of JQuery plugin usage

Source: https://v20.angular.dev/tools/libraries/using-libraries

Shows a script that extends a library, such as a JQuery plugin, which may not be included in the installed typings.

```javascript
$('.test').myPlugin();
```

--------------------------------

### provideAppInitializer

Source: https://v20.angular.dev/api/core/provideAppInitializer

Documentation for the provideAppInitializer function, including its signature, parameters, return type, and usage example.

```APIDOC
## provideAppInitializer

### Description
Provides a function that is executed during application initialization. The function runs in the injection context and can return a Promise or Observable to delay initialization until it completes.

### Signature
```typescript
function provideAppInitializer(initializerFn: () => any): EnvironmentProviders;
```

### Parameters
- **initializerFn** (`() => any`) - Required - A function that is executed during app initialization. It may return a Promise or Observable; initialization waits for its completion.

### Returns
- **EnvironmentProviders** - The provider configuration to be included in the application's providers array.

### Usage Example
```typescript
bootstrapApplication(App, {
  providers: [
    provideAppInitializer(() => {
      const http = inject(HttpClient);
      return firstValueFrom(
        http
          .get("https://someUrl.com/api/user")
          .pipe(tap(user => { ... }))
      );
    }),
    provideHttpClient(),
  ],
});
```

### Notes
- The initializer runs in the injection context.
- This replaces the deprecated `APP_INITIALIZER` token.
```

--------------------------------

### Generate Home component and serve app

Source: https://v20.angular.dev/tutorials/first-app/02-Home

Run these commands in the Terminal pane of your IDE. First, generate a new Home component in the first-app directory. Then, build and serve the app locally; leave ng serve running for subsequent steps.

```bash
ng generate component home
```

```bash
ng serve
```

--------------------------------

### After: Valid selector 'app-comp'

Source: https://v20.angular.dev/errors/NG2009

This example shows the corrected selector that meets custom element requirements: lowercase, contains a hyphen, and starts with a letter.

```typescript
@Component({  selector: 'app-comp',  encapsulation: ViewEncapsulation.ShadowDom…})
```

--------------------------------

### Complete NgComponentOutlet example with inputs, injector, and content

Source: https://v20.angular.dev/api/common/NgComponentOutlet

A more complete example showing a component with inputs, custom injector, and projected content using NgComponentOutlet.

```TypeScript
@Injectable()export class Greeter {  suffix = '!';}@Component({  selector: 'complete-component',  template: `{{ label() }}: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`,})export class CompleteComponent {  label = input.required<string>();  constructor(public greeter: Greeter) {}}@Component({  selector: 'ng-component-outlet-complete-example',  imports: [NgComponentOutlet],  template: ` <ng-template #ahoj>Ahoj</ng-template>    <ng-template #svet>Svet</ng-template>    <ng-container      *ngComponentOutlet="        CompleteComponent;        inputs: myInputs;        injector: myInjector;        content: myContent      "    ></ng-container>`,})export class NgComponentOutletCompleteExample {  // This field is necessary to expose CompleteComponent to the template.  CompleteComponent = CompleteComponent;  myInputs = {'label': 'Complete'};  myInjector: Injector;  ahojTemplateRef = viewChild.required<TemplateRef<any>>('ahoj');  svetTemplateRef = viewChild.required<TemplateRef<any>>('svet');  myContent?: any[][];  constructor(    injector: Injector,    private vcr: ViewContainerRef,  ) {    this.myInjector = Injector.create({      providers: [{provide: Greeter, deps: []}],      parent: injector,    });    effect(() => {      this.myContent = [        this.vcr.createEmbeddedView(this.ahojTemplateRef()).rootNodes,        this.vcr.createEmbeddedView(this.svetTemplateRef()).rootNodes,      ];    });  }}
```

--------------------------------

### Using @ViewChildren to get a QueryList

Source: https://v20.angular.dev/api/core/QueryList

Example of using @ViewChildren to obtain a QueryList of child components. The QueryList is updated automatically when the application state changes.

```typescript
@Component({...})class Container {  @ViewChildren(Item) items:QueryList<Item>;}
```

--------------------------------

### Basic usage of withPreloading with PreloadAllModules

Source: https://v20.angular.dev/api/router/withPreloading

Example showing how to configure preloading by passing withPreloading(PreloadAllModules) to provideRouter in bootstrapApplication.

```typescript
const appRoutes: Routes = [];bootstrapApplication(AppComponent,  {    providers: [      provideRouter(appRoutes, withPreloading(PreloadAllModules))    ]  });
```

--------------------------------

### Logger substitution with useClass

Source: https://v20.angular.dev/guide/di/defining-dependency-providers

Practical example of substituting implementations with `useClass`. The component provides `UserService` because `EvenBetterLogger` needs it, and injects `Logger` to get the `EvenBetterLogger` instance.

```typescript
import { Injectable, Component, inject } from '@angular/core';

// Base logger
@Injectable()
export class Logger {
  log(message: string) {
    console.log(message);
  }
}

// Enhanced logger with timestamp
@Injectable()
export class BetterLogger extends Logger {
  override log(message: string) {
    super.log(`[${new Date().toISOString()}] ${message}`);
  }
}

// Logger that includes user context
@Injectable()
export class EvenBetterLogger extends Logger {
  private userService = inject(UserService);
  override log(message: string) {
    const name = this.userService.user.name;
    super.log(`Message to ${name}: ${message}`);
  }
}

// In your component
@Component({
  selector: 'app-example',
  providers: [
    UserService, // EvenBetterLogger needs this
    { provide: Logger, useClass: EvenBetterLogger }
  ]
})
export class ExampleComponent {
  private logger = inject(Logger); // Gets EvenBetterLogger instance
}
```

--------------------------------

### Build with development configuration

Source: https://v20.angular.dev/ecosystem/service-workers/app-shell

Builds the application using the development configuration. Use this to verify the app shell output.

```bash
ng build --configuration=development
```

--------------------------------

### Run hello-world schematic

Source: https://v20.angular.dev/tools/cli/schematics-authoring

Runs the generated 'hello-world' schematic from the current directory.

```bash
schematics .:hello-world
```

--------------------------------

### Access route snapshot properties

Source: https://v20.angular.dev/guide/routing/read-route-state

Access route parameters and other route information from the snapshot. The example shows how to get the 'id' parameter and log the URL, params, and queryParams from the snapshot.

```typescript
import { ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';@Component({ ... })export class UserProfileComponent {  readonly userId: string;  private route = inject(ActivatedRoute);  constructor() {    // Example URL: https://www.angular.dev/users/123?role=admin&status=active#contact    // Access route parameters from snapshot    this.userId = this.route.snapshot.paramMap.get('id');    // Access multiple route elements    const snapshot = this.route.snapshot;    console.log({      url: snapshot.url,           // https://www.angular.dev      // Route parameters object: {id: '123'}      params: snapshot.params,      // Query parameters object: {role: 'admin', status: 'active'}      queryParams: snapshot.queryParams,  // Query parameters    });  }}
```

--------------------------------

### ChildComponent viewProviders with AnimalService

Source: https://v20.angular.dev/guide/di/hierarchical-dependency-injection

Configures the ChildComponent with a viewProviders array that provides AnimalService with the dog emoji value. This setup is used in examples demonstrating skipSelf and host injection modifiers.

```typescript
@Component({
  selector: 'app-child',
  …
  viewProviders: [
    { provide: AnimalService, useValue: { emoji: '🐶' } },
  ],
})
```

--------------------------------

### Create and enter Angular workspace with ng new

Source: https://v20.angular.dev/tools/cli/setup-local

Creates a new Angular workspace and starter app named my-app, then navigates into the new directory. The CLI installs npm packages and dependencies, which can take a few minutes.

```bash
ng new my-app
```

```bash
cd my-app
```

--------------------------------

### Accessing router state root and traversing route tree

Source: https://v20.angular.dev/api/router/RouterState

Example component that uses Router to get the RouterState, then accesses the root ActivatedRoute and its first child to read route parameters.

```typescript
@Component({templateUrl:'template.html'})class MyComponent {  constructor(router: Router) {    const state: RouterState = router.routerState;    const root: ActivatedRoute = state.root;    const child = root.firstChild;    const id: Observable<string> = child.params.map(p => p.id);    //...  }}
```

--------------------------------

### Install Vitest and jsdom

Source: https://v20.angular.dev/guide/testing/unit-tests

Run this command to install the required packages for the experimental unit testing system.

```bash
npm install vitest jsdom --save-dev
```

--------------------------------

### SlicePipe string examples

Source: https://v20.angular.dev/api/common/SlicePipe

Component showcasing SlicePipe on strings with various start and end index combinations, including positive, negative, and out-of-range values. The expected outputs are indicated in the template comments.

```typescript
@Component({  selector: 'slice-string-pipe',  imports: [SlicePipe],  template: `<div>    <p>{{ str }}[0:4]: '{{ str | slice: 0 : 4 }}' - output is expected to be 'abcd'</p>    <p>{{ str }}[4:0]: '{{ str | slice: 4 : 0 }}' - output is expected to be ''</p>    <p>{{ str }}[-4]: '{{ str | slice: -4 }}' - output is expected to be 'ghij'</p>    <p>{{ str }}[-4:-2]: '{{ str | slice: -4 : -2 }}' - output is expected to be 'gh'</p>    <p>{{ str }}[-100]: '{{ str | slice: -100 }}' - output is expected to be 'abcdefghij'</p>    <p>{{ str }}[100]: '{{ str | slice: 100 }}' - output is expected to be ''</p>  </div>`,})export class SlicePipeStringComponent {  str: string = 'abcdefghij';}
```

--------------------------------

### Simple Example: bootstrapModule with platformBrowser

Source: https://v20.angular.dev/api/core/PlatformRef

Shows how to bootstrap an Angular module using platformBrowser().bootstrapModule(). The module must be decorated with @NgModule and import BrowserModule.

```typescript
@NgModule({
  imports: [BrowserModule]
})
class MyModule {}
let moduleRef = platformBrowser().bootstrapModule(MyModule);
```

--------------------------------

### SubmitButton component with input transform

Source: https://v20.angular.dev/tools/cli/template-typecheck

Defines a custom button component with a required input named 'disabled' that uses the booleanAttribute transform to coerce bound values to boolean. This is the starting example for the input setter coercion discussion.

```typescript
@Component({
  selector: 'submit-button',
  template: `
    <div class="wrapper">
      <button [disabled]="disabled">Submit</button>
    </div>
  `,
})
class SubmitButton {
  disabled = input.required({transform: booleanAttribute });
}
```

--------------------------------

### Schema with x-prompt for name and useColor

Source: https://v20.angular.dev/tools/cli/schematics-authoring

Example schema for a 'Hello World' schematic that prompts for a name and whether to use color. The name prompt uses input type (string), and useColor uses confirmation type (boolean).

```json
{"properties": {"name": {"type": "string","minLength": 1,"default": "world","x-prompt": "What is your name?"},"useColor": {"type": "boolean","x-prompt": "Would you like the response in color?"}}}
```

--------------------------------

### ActivationStart

Source: https://v20.angular.dev/api/router/ActivationStart

Documentation for the ActivationStart class, an event triggered at the start of the activation part of the Resolve phase of routing.

```APIDOC
## ActivationStart

### Description
An event triggered at the start of the activation part of the Resolve phase of routing.

### Class
ActivationStart

### Constructor
`constructor(snapshot: ActivatedRouteSnapshot): ActivationStart`

#### Parameters
- **snapshot** (`ActivatedRouteSnapshot`) - The snapshot of the activated route.

#### Returns
- `ActivationStart`

### Properties
- **type** (`EventType.ActivationStart`) - The event type.
- **snapshot** (`ActivatedRouteSnapshot`) - The snapshot of the activated route.

### Methods
#### toString()
Returns a string representation of the event.

##### Returns
- `string`
```
Tokens:
Raw