### Setup TestBed and Component for Testing (Angular)

Source: https://angular.dev/guide/testing/components-scenarios

Configure the testing environment in `beforeEach` to create the component fixture, get the component instance, inject the `UserAuthentication` service, and query for the welcome message element.

```TypeScript
let fixture: ComponentFixture<Welcome>;
let comp: Welcome;
let userAuth: UserAuthentication; // the TestBed injected service
let el: HTMLElement; // the DOM element with the welcome message

beforeEach(() => {
  fixture = TestBed.createComponent(Welcome);
  comp = fixture.componentInstance;

  // UserAuthentication from the root injector
  userAuth = TestBed.inject(UserAuthentication);

  //  get the "welcome" element by CSS selector (e.g., by class name)
  el = fixture.nativeElement.querySelector('.welcome');
});
```

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

### Simple NgComponentOutlet Example with HelloWorld Component

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

This example demonstrates basic dynamic component rendering by projecting the `HelloWorld` component into an `ng-container`.

```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;
}
```

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

### start

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

Starts dragging an item.

```APIDOC
## `start`

### Description
Starts dragging an item.

### Signature
```typescript
start(): void
```

### Returns
- (`void`) -
```

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

### Complete NgComponentOutlet Example with Inputs, Injector, and Content

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

This comprehensive example shows how to dynamically create a component, pass inputs, provide a custom injector, and project 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,
      ];
    });
  }
}
```

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

### started

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

Emits when the user starts dragging the item.

```APIDOC
## Event: started

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

### Type
`any`
```

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

### Install a library and its typings using npm

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

Use these commands to install a library (e.g., d3) and its corresponding TypeScript typings package for development dependencies.

```bash
npm install d3 --save
npm install @types/d3 --save-dev
```

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

### Install dependencies with npm

Source: https://angular.dev/tutorials/first-app/01-hello-world

Run this command in the project directory to install all required Node.js packages before building and serving the Angular app.

```bash
npm install
```

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

### Angular Package File Layout Example

Source: https://angular.dev/tools/libraries/angular-package-format

Illustrates the standard directory and file structure for an Angular package, using `@angular/core` as an example.

```plaintext
node_modules/@angular/core
├── README.md
├── package.json
├── fesm2022
│ ├── core.mjs
│ ├── core.mjs.map
│ ├── testing.mjs
│ └── testing.mjs.map
└── types
│ ├── core.d.ts
│ ├── testing.d.ts
```

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

### Navigate, Install Dependencies, and Open Schematics Project

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

After creating a new schematics collection, navigate into its folder, install npm dependencies, build the project, and open it in a code editor like VS Code.

```bash
cd hello-world
npm install
npm run build
code .
```

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

### Navigate with Commands using navigate

Source: https://angular.dev/api/router/Router

Shows how to navigate based on an array of commands and an optional starting point. If no starting route is provided, the navigation is absolute.

```typescript
router.navigate(['team', 33, 'user', 11], {relativeTo: route});
```

```typescript
// Navigate without updating the URL, overriding the default behavior
router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});
```

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

### onselectstart

Source: https://angular.dev/api/elements/NgElement

Event handler for when a selection is about to start.

```APIDOC
## onselectstart

### Type
`((this: GlobalEventHandlers, ev: Event) => any) | null`

### Description
Event handler for when a selection is about to start.
```

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

### Basic MenuBar Usage Example

Source: https://angular.dev/api/aria/menu/MenuBar

Illustrates how to set up a basic menu bar with multiple menu triggers and their associated menus.

```html
<div ngMenuBar>
  <button ngMenuTrigger [menu]="fileMenu">File</button>
  <button ngMenuTrigger [menu]="editMenu">Edit</button>
</div>

<div ngMenu #fileMenu="ngMenu">
  <div ngMenuItem>New</div>
  <div ngMenuItem>Open</div>
</div>

<div ngMenu #editMenu="ngMenu">
  <div ngMenuItem>Cut</div>
  <div ngMenuItem>Copy</div>
</div>
```

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

### Install Tailwind CSS and PostCSS Dependencies (npm)

Source: https://angular.dev/guide/tailwind

Installs Tailwind CSS and its required PostCSS peer dependencies using npm for manual setup.

```npm
npm install tailwindcss @tailwindcss/postcss postcss
```

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

### Custom Test Setup Function (Angular)

Source: https://angular.dev/guide/testing/components-basics

Define a reusable setup function to configure `TestBed` and create a component fixture, allowing for customizable test environments via parameters.

```typescript
function setup(providers?: StaticProviders[]): ComponentFixture<Banner> {
  TestBed.configureTestingModule({providers});
  return TestBed.createComponent(Banner);
}
```

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

### RouterLink Directive

Source: https://angular.dev/api/router/RouterLinkWithHref

Comprehensive guide on using the `routerLink` directive for in-app navigation, including its various inputs and examples.

```APIDOC
## `routerLink` Directive

### Description
The `routerLink` directive, when applied to an element in a template, makes that element a link that initiates navigation to a route. Navigation opens one or more routed components in one or more `<router-outlet>` locations on the page.

### Usage
Apply the `routerLink` directive to an HTML element (e.g., `<a>`) in your template to enable navigation.

### Inputs
- **routerLink** (string[] | string | UrlTree) - Required - Defines the target route. Can be a static string, an array of path segments (for dynamic links), or a `UrlTree`.
- **queryParams** (object) - Optional - An object of key-value pairs to be added as query parameters to the generated URL.
- **queryParamsHandling** ('merge' | 'preserve') - Optional - Specifies how query parameters are handled.
  - `'merge'`: Merges the given `queryParams` with the current query parameters.
  - `'preserve'`: Preserves the current query parameters, ignoring the `queryParams` input.
- **fragment** (string) - Optional - The URL fragment (hash) to be added to the generated URL.
- **preserveFragment** (boolean) - Optional - If `true`, the fragment from the current URL is preserved when navigating.
- **relativeTo** (ActivatedRoute) - Optional - Specifies the `ActivatedRoute` to which the link is relative. This is used for relative path resolution.
- **state** (object) - Optional - An object to be persisted to the browser's `History.state` property, accessible via `Router#currentNavigation`.

### Examples
#### Static Link
```html
<a routerLink="/user/bob">link to user component</a>
```

#### Dynamic Link
```html
<a [routerLink]="['/team', teamId, 'user', userName, {details: true}]">dynamic link</a>
```

#### Relative Link Paths
The first segment name can be prepended with `/`, `./`, or `../`.
- If the first segment begins with `/`, the router looks up the route from the root of the app.
- If the first segment begins with `./`, or doesn't begin with a slash, the router looks in the children of the current activated route.
- If the first segment begins with `../`, the router goes up one level in the route tree.

```html
<!-- Absolute path from root -->
<a [routerLink]="['/user/jim']">Jim</a>

<!-- Relative to current activated route's children -->
<a [routerLink]="['./profile']">Profile</a>

<!-- Up one level in the route tree -->
<a [routerLink]="['../settings']">Settings</a>
```

#### With Query Parameters and Fragment
```html
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}"
fragment="education"> link to user component
</a>
```
This example generates the link: `/user/bob?debug=true#education`.

#### Query Parameters Handling
```html
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}"
queryParamsHandling="merge"> link to user component
</a>
```

#### Preserving Navigation History
```html
<a [routerLink]="['/user/bob']" [state]="{tracingId: 123}">
  link to user component
</a>
```
The `state` value is persisted to the browser's `History.state` property. It can be retrieved using `Router#currentNavigation`.
```typescript
// Get NavigationStart events
router.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(e => {
  const navigation = router.currentNavigation();
  tracingService.trace({id: navigation.extras.state.tracingId});
});
```
```

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

### setUpPreloading()

Source: https://angular.dev/api/router/RouterPreloader

Configures the preloader to start listening to navigation events and initiate the preloading process based on the defined strategy.

```APIDOC
## setUpPreloading()

### Description
Sets up the preloading mechanism. This method typically initiates the background process where the preloader listens for navigation events and determines which lazy-loaded modules to preload according to the `PreloadingStrategy`.

### Returns
`void` - This method does not return any value.
```

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

### Basic Preloading Configuration Example

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

Illustrates how to configure a preloading strategy, specifically `PreloadAllModules`, when bootstrapping an Angular application with `provideRouter`.

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

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

### Angular Component for Drag&Drop Delay Example

Source: https://angular.dev/guide/drag-drop

This Angular component imports `CdkDrag` and configures the template and styles for a drag-and-drop element with a start delay.

```typescript
import {CdkDrag} from '@angular/cdk/drag-drop';
import {Component} from '@angular/core';

/**
 * @title Delay dragging
 */
@Component({
  selector: 'cdk-drag-drop-delay-example',
  templateUrl: 'app.html',
  styleUrl: 'app.css',
  imports: [CdkDrag],
})
export class CdkDragDropDelayExample {}

```

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

### Expecting and answering a GET request

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

Configures `HttpClientTestingModule` and demonstrates how to make an HTTP GET request, expect it using `expectOne`, assert its properties, flush a mock response, and verify the service's handling of the response.

```typescript
TestBed.configureTestingModule({
  providers: [ConfigService, provideHttpClientTesting()],
});

const httpTesting = TestBed.inject(HttpTestingController);

// Load `ConfigService` and request the current configuration.
const service = TestBed.inject(ConfigService);
const config$ = service.getConfig<Config>();

// `firstValueFrom` subscribes to the `Observable`, which makes the HTTP request,
// and creates a `Promise` of the response.
const configPromise = firstValueFrom(config$);

// At this point, the request is pending, and we can assert it was made
// via the `HttpTestingController`:
const req = httpTesting.expectOne('/api/config', 'Request to load the configuration');

// We can assert various properties of the request if desired.
expect(req.request.method).toBe('GET');

// Flushing the request causes it to complete, delivering the result.
req.flush(DEFAULT_CONFIG);

// We can then assert that the response was successfully delivered by the `ConfigService`:
expect(await configPromise).toEqual(DEFAULT_CONFIG);

// Finally, we can assert that no other requests were made.
httpTesting.verify()
```

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

### Configure App Initializer with provideAppInitializer

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

Example demonstrating how to use `provideAppInitializer()` within `bootstrapApplication` to fetch user data during application startup, ensuring the app waits for the data to load.

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

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

### Automated Tailwind CSS Setup with Angular CLI

Source: https://angular.dev/guide/tailwind

Integrates Tailwind CSS into an Angular project by installing dependencies and configuring build settings automatically.

```bash
ng add tailwindcss
```

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

### Configure APP_INITIALIZER in NgModule with Promise

Source: https://angular.dev/api/core/APP_INITIALIZER

This example shows how to use `APP_INITIALIZER` in an NgModule-based application with a function that returns a Promise, ensuring data is loaded before the app starts.

```typescript
 function initializeApp(): Promise<any> {
   const http = inject(HttpClient);
   return firstValueFrom(
     http
       .get("https://someUrl.com/api/user")
       .pipe(tap(user => { ... }))
   );
 }

 @NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [{
    provide: APP_INITIALIZER,
    useValue: initializeApp,
    multi: true,
   }]
  })
 export class AppModule {}
```

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

### Create New Angular Project for Manual Setup

Source: https://angular.dev/guide/tailwind

Initializes a new Angular project and navigates into its directory, a prerequisite for manual Tailwind CSS integration.

```bash
ng new my-project
cd my-project
```

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

### Component for `animate.enter` example in Angular

Source: https://angular.dev/guide/animations

This component manages the visibility state of an element using a signal and provides a toggle method to update it, demonstrating the setup for `animate.enter`.

```TypeScript
import {Component, signal} from '@angular/core';

@Component({
  selector: 'app-enter',
  templateUrl: 'enter.html',
  styleUrls: ['enter.css'],
})
export class Enter {
  isShown = signal(false);

  toggle() {
    this.isShown.update((isShown) => !isShown);
  }
}

```

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

### static create(initialUrl?: string | undefined)

Source: https://angular.dev/api/router/testing/RouterTestingHarness

Creates a new instance of `RouterTestingHarness` and initializes the router with an optional initial URL. This is the recommended way to set up the testing harness.

```APIDOC
## static create(initialUrl?: string | undefined)

### Description
Creates a new instance of `RouterTestingHarness` and initializes the router with an optional initial URL. This is the recommended way to set up the testing harness for router tests.

### Method
static method

### Parameters
#### Path Parameters
- No path parameters.

#### Query Parameters
- No query parameters.

#### Request Body
- No request body.

### Request Example
```typescript
const harness = await RouterTestingHarness.create('/initial-path');
// or
const harness = await RouterTestingHarness.create();
```

### Response
#### Success Response (Promise<RouterTestingHarness>)
- **RouterTestingHarness** (object) - An instance of the RouterTestingHarness.

#### Response Example
```typescript
// harness is an instance of RouterTestingHarness
```
```

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

### init(): void

Source: https://angular.dev/api/animations/AnimationPlayer

Initializes the animation, preparing it for playback.

```APIDOC
## init(): void

### Description
Initializes the animation.

### Returns
`void`
```

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

### Bind Animation Events in Angular Template

Source: https://angular.dev/guide/legacy-animations/transition-and-triggers

This example demonstrates how to bind animation start and done events to a component method in an Angular HTML template using the `@triggerName.start` and `@triggerName.done` syntax.

```html
<div
  [@openClose]="isOpen ? 'open' : 'closed'"
  (@openClose.start)="onAnimationEvent($event)"
  (@openClose.done)="onAnimationEvent($event)"
  class="open-close-container"
>
</div>
```

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

### begin(): void

Source: https://angular.dev/api/core/RendererFactory2

A callback method invoked when the rendering process has begun.

```APIDOC
## METHOD begin

### Description
A callback invoked when rendering has begun.

### Method Signature
begin(): void

### Returns
`void`
```

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

### Subscribing to `isStable` with a recurrent task (will not stabilize)

Source: https://angular.dev/api/core/ApplicationRef

This example demonstrates that if a recurrent asynchronous task (like `interval`) is started immediately, `isStable` will never emit `true`. The application will remain unstable.

```typescript
constructor(appRef: ApplicationRef) {
  appRef.isStable.pipe(
     filter(stable => stable)
  ).subscribe(() => console.log('App is stable now');
  interval(1000).subscribe(counter => console.log(counter));
}
```

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

### Animate element height using auto-styling with style()

Source: https://angular.dev/api/animations/style

This example demonstrates using auto-styling with an asterisk (`*`) to animate an element's height from 0 to its full natural height, which is derived at animation start.

```typescript
style({ height: 0 }),
animate("1s", style({ height: "*" }))
```

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

### play(): void

Source: https://angular.dev/api/animations/AnimationPlayer

Starts or resumes the animation, triggering the `onStart()` callback.

```APIDOC
## play(): void

### Description
Runs the animation, invoking the `onStart()` callback.

### Returns
`void`
```

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

### initialNavigation()

Source: https://angular.dev/api/router/Router

Sets up the location change listener and performs the initial navigation.

```APIDOC
## Method: `initialNavigation()`

### Description
Sets up the location change listener and performs the initial navigation.

### Signature
```typescript
initialNavigation(): void
```

### Returns
(void)
```

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

### Compute Localized Weekday Names (TypeScript)

Source: https://angular.dev/guide/aria/combobox

This snippet reactively shifts the weekday names array to align with the localized starting day of the week. It uses `_dateAdapter` to get day names and the first day of the week.

```typescript
  // Shift the weekday names array reactively to align with the localized starting day of the week.
  readonly weekdays: Signal<{long: string; narrow: string}[]> = computed(() => {
    const firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek();
    const narrowWeekdays = this._dateAdapter.getDayOfWeekNames('narrow');
    const longWeekdays = this._dateAdapter.getDayOfWeekNames('long');

    const weekdays = longWeekdays.map((long, i) => {
      return {long, narrow: narrowWeekdays[i]};
    });
    return weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
  });
```

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

### Reading Static Route State with ActivatedRouteSnapshot (Angular)

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

Access the `ActivatedRouteSnapshot` via `ActivatedRoute` to get a static, non-observable view of the route's parameters, query parameters, and URL segments at a specific moment. Useful for initial state setup.

```typescript
import {ActivatedRoute, ActivatedRouteSnapshot} from '@angular/router';

@Component({
  /*...*/
})
export class UserProfile {
  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
    });
  }
}
```

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

### Applying `debounce('blur')` to a Custom Input in Angular Forms Signals

Source: https://angular.dev/guide/forms/signals/custom-controls

This example shows how to configure `debounce('blur')` for a custom input component within an Angular Forms Signals setup. The `touch` output from the custom control enables the debounce behavior.

```TypeScript
import {Component, signal} from '@angular/core';
import {debounce, form, FormField} from '@angular/forms/signals';
import {CustomInput} from './custom-input';

@Component({
  selector: 'app-root',
  imports: [CustomInput, FormField],
  template: `<app-custom-input [formField]="userForm.name" />`,
})
export class App {
  userModel = signal({name: ''});

  userForm = form(this.userModel, (schemaPath) => {
    debounce(schemaPath.name, 'blur');
  });
}
```

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

### constructor

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

Initializes a new instance of the PlatformRef class.

```APIDOC
## constructor

### Description
Initializes a new instance of the PlatformRef class.

### Signature
`constructor(_injector: Injector): PlatformRef`

### Parameters
- **_injector** (`Injector`) - The injector to be used by the platform.

### Returns
`PlatformRef` - A new instance of the PlatformRef.
```

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

### Validate Date Range with value and valueOf() in Signal Forms

Source: https://angular.dev/guide/forms/signals/cross-field-logic

Use `value()` to get the current field's signal value and `valueOf()` to access another field's raw value for cross-field validation, such as ensuring an end date is after a start date.

```TypeScript
import {Component, signal} from '@angular/core';
import {form, validate} from '@angular/forms/signals';

@Component({
  /* ... */
})
export class EventForm {
  eventModel = signal({
    startDate: new Date('2026-06-01'),
    endDate: new Date('2026-06-05')
  });

  eventForm = form(this.eventModel, (schemaPath) => {
    validate(schemaPath.endDate, ({value, valueOf}) => {
      if (value() <= valueOf(schemaPath.startDate)) {
        return {
          kind: 'invalidDateRange',
          message: 'End date must be after start date'
        };
      }

      return null;
    });
  });
}
```

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

### Run a Generated Schematic

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

Execute the `hello-world` schematic from the current directory, assuming it has no required options.

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

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

### Testing Angular ARIA Accordion with Component Harnesses

Source: https://angular.dev/guide/aria/accordion

This example demonstrates how to use Angular Aria's component harnesses to test accordion components within a component test. It shows how to load the accordion group harness, get individual accordions, and verify their expanded state.

```typescript
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {AccordionGroupHarness} from '@angular/aria/accordion/testing';
import {MyAccordionComponent} from './my-accordion'; // Your component

describe('MyAccordionComponent', () => {
  let fixture: ComponentFixture<MyAccordionComponent>;
  let loader: HarnessLoader;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      imports: [MyAccordionComponent],
    });

    fixture = TestBed.createComponent(MyAccordionComponent);
    await fixture.whenStable();
    loader = TestbedHarnessEnvironment.loader(fixture);
  });

  it('should allow expanding panels', async () => {
    // Load the accordion group harness
    const group = await loader.getHarness(AccordionGroupHarness);

    // Get all individual accordions (items) in the group
    const accordions = await group.getAccordions();
    expect(accordions.length).toBe(3);

    // Verify initial state (first expanded, others collapsed)
    expect(await accordions[0].isExpanded()).toBe(true);
    expect(await accordions[1].isExpanded()).toBe(false);

    // Expand the second panel
    await accordions[1].expand();

    // Verify updated state
    expect(await accordions[1].isExpanded()).toBe(true);
    // If multiExpandable is false, the first one should now be collapsed
    expect(await accordions[0].isExpanded()).toBe(false);
  });
});
```

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

### Basic Usage of renderApplication (TypeScript)

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

Shows how to import `renderApplication` and `bootstrapApplication`, configure an `ApplicationConfig`, and then call `renderApplication` to get the serialized HTML output.

```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);
```

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

### provideNoopAnimations()

Source: https://angular.dev/api/platform-browser/animations/provideNoopAnimations

Returns the set of dependency-injection providers to disable animations in an application. See animations guide to learn more about animations in Angular. This function is useful when you want to bootstrap an application using the `bootstrapApplication` function, but you need to disable animations (for example, when running tests). It is deprecated since v20.2; use `animate.enter` or `animate.leave` instead.

```APIDOC
## provideNoopAnimations()

### Description
Returns the set of dependency-injection providers to disable animations in an application. This function is useful when you want to bootstrap an application using the `bootstrapApplication` function, but you need to disable animations (for example, when running tests).

### Signature
```typescript
function provideNoopAnimations(): Provider[];
```

### Parameters
This function takes no parameters.

### Returns
- `Provider[]` - An array of dependency-injection providers to disable animations.

### Deprecation
Deprecated since v20.2. Use `animate.enter` or `animate.leave` instead. Intent to remove in v23.

### Usage Example
```typescript
bootstrapApplication(RootComponent, {
  providers: [
    provideNoopAnimations()
  ]
});
```
```

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

### listen(target: any, eventName: string, callback: (event: any) => boolean | void, options?: ListenerOptions | undefined): () => void

Source: https://angular.dev/api/core/Renderer2

Implement this callback to start an event listener.

```APIDOC
## listen

### Description
Implement this callback to start an event listener.

### Signature
listen(target: any, eventName: string, callback: (event: any) => boolean | void, options?: ListenerOptions | undefined): () => void

### Parameters
- **target** (any) - The context in which to listen for events. Can be the entire window or document, the body of the document, or a specific DOM element.
- **eventName** (string) - The event to listen for.
- **callback** ((event: any) => boolean | void) - A handler function to invoke when the event occurs.
- **options** (ListenerOptions | undefined) - Options that configure how the event listener is bound.

### Returns
() => void - An "unlisten" function for disposing of this handler.
```

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

### Correct Multi-Provider for ENVIRONMENT_INITIALIZER

Source: https://angular.dev/errors/NG0209

This example shows how to correctly provide `ENVIRONMENT_INITIALIZER` using `multi: true`, ensuring the value is treated as part of an array of providers.

```typescript
{provide: ENVIRONMENT_INITIALIZER, multi: true, useValue: () => {...}}
```

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

### ontouchstart

Source: https://angular.dev/api/elements/NgElement

Event handler for when a touch point is placed on the touch surface.

```APIDOC
## ontouchstart

### Type
`((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined`

### Description
Event handler for when a touch point is placed on the touch surface.
```

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

### Install Angular CLI globally with sudo on Unix-like systems

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

On Unix-like systems, if you encounter permission errors during global installation, use `sudo` to run the npm install command as the root user.

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

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

### get Method

Source: https://angular.dev/api/forms/AbstractControl

Gets a descendant control by path. The path can be a string or an array of path segments.

```APIDOC
## get

### Description
Gets a descendant control by path. The path can be a string or an array of path segments.

### Signature
```typescript
get<P extends string | readonly (string | number)[]>(path: P): AbstractControl<ɵGetProperty<TRawValue, P>, ɵGetProperty<TRawValue, P>, any> | null
get<P extends string | Array<string | number>>(path: P): AbstractControl<ɵGetProperty<TRawValue, P>, ɵGetProperty<TRawValue, P>, any> | null
```

### Parameters
- **path** (string | (string | number)[]) - Required - The path to the descendant control

### Returns
- (AbstractControl | null) - The descendant control, or null if not found
```

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

### constructor(_doc: any): Meta

Source: https://angular.dev/api/platform-browser/Meta

Constructs a new Meta service instance.

```APIDOC
## CONSTRUCTOR Meta\n\n### Description\nConstructs a new Meta service instance.\n\n### Parameters\n- **_doc** (any) - Description not provided in source.\n\n### Returns\n- **Meta** - The new Meta service instance.
```

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

### Example Route Configuration for Relative Navigation

Source: https://angular.dev/api/router/UrlCreationOptions

Illustrates a sample route configuration with a parent route and two child routes, used to demonstrate relative navigation.

```TypeScript
[{
  path: 'parent',
  component: ParentComponent,
  children: [{
    path: 'list',
    component: ListComponent
  },{
    path: 'child',
    component: ChildComponent
  }]
}]
```

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

### navigate

Source: https://angular.dev/api/router/Router

Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.

```APIDOC
## Method: `navigate`

### Description
Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.

### Signature
`navigate(commands: readonly any[], extras?: NavigationExtras): Promise<boolean>`

### Parameters
- **commands** (`readonly any[]`) - Required - An array of URL fragments with which to construct the target URL. If the path is static, can be the literal URL string. For a dynamic path, pass an array of path segments, followed by the parameters for each segment. The fragments are applied to the current URL or the one provided in the `relativeTo` property of the options object, if supplied.
- **extras** (`NavigationExtras`) - Optional - An options object that determines how the URL should be constructed or interpreted.

### Returns
`Promise<boolean>` - A Promise that resolves to `true` when navigation succeeds, or `false` when navigation fails. The Promise is rejected when an error occurs if `resolveNavigationPromiseOnError` is not `true`.

### Usage Examples
```typescript
router.navigate(['team', 33, 'user', 11], {relativeTo: route});

// Navigate without updating the URL, overriding the default behavior
router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});
```
```

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

### Install Bootstrap 4 and Dependencies

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

Use npm to install Bootstrap 4, jQuery, and Popper.js as project dependencies.

```bash
  npm install jquery --save
  npm install popper.js --save
  npm install bootstrap --save
```

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

### Create New Angular Project

Source: https://angular.dev/guide/routing/routing-with-urlmatcher

Use the Angular CLI to initialize a new Angular application with routing enabled and CSS stylesheet format.

```bash
ng new angular-custom-route-match
```

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

### Install Custom Builder Package

Source: https://angular.dev/tools/cli/cli-builder

Install a custom builder package from npm to make it available for use in your Angular project.

```bash
npm install @example/copy-file
```

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

### constructor(_platformLocation: PlatformLocation, _baseHref?: string | undefined): HashLocationStrategy

Source: https://angular.dev/api/common/HashLocationStrategy

Initializes a new instance of `HashLocationStrategy`.

```APIDOC
## constructor(_platformLocation: PlatformLocation, _baseHref?: string | undefined): HashLocationStrategy

### Description
Initializes a new instance of `HashLocationStrategy`.

### Method Signature
`constructor(_platformLocation: PlatformLocation, _baseHref?: string | undefined): HashLocationStrategy`

### Parameters
- **_platformLocation** (`PlatformLocation`) - Required - The platform-specific location service.
- **_baseHref** (`string | undefined`) - Optional - The base href for the application.

### Returns
`HashLocationStrategy` - A new instance of `HashLocationStrategy`.
```

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

### HTML5 PushState URL Example

Source: https://angular.dev/guide/routing/common-router-tasks

An example of a 'natural' URL using HTML5 pushState, which is the default `PathLocationStrategy` for the Angular router.

```plaintext
localhost:3002/crisis-center
```

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

### Implementing a Context Menu

Source: https://angular.dev/guide/aria/menu

Demonstrates how to display a context menu at the cursor's position in response to a right-click event.

```html
Right-click inside this area to open the context menu.
```

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

### Using provideEnvironmentInitializer with createEnvironmentInjector

Source: https://angular.dev/api/core/provideEnvironmentInitializer

This example demonstrates how to configure an initialization function using `provideEnvironmentInitializer` within `createEnvironmentInjector` to log a message upon environment initialization.

```typescript
createEnvironmentInjector(
  [
    provideEnvironmentInitializer(() => {
      console.log('environment initialized');
    }),
  ],
  parentInjector
);
```

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

### Install Schematics CLI Globally

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

Install the Schematics command-line tool globally to enable the `schematics` executable for creating and managing schematics.

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

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

### Usage Examples for createUrlTreeFromSnapshot

Source: https://angular.dev/api/router/createUrlTreeFromSnapshot

Illustrates various ways to construct URL trees using `createUrlTreeFromSnapshot`, including absolute paths, matrix parameters, collapsed segments, outlets, and relative navigation.

```typescript
// create /team/33/user/11
createUrlTreeFromSnapshot(snapshot, ['/team', 33, 'user', 11]);

// create /team/33;expand=true/user/11
createUrlTreeFromSnapshot(snapshot, ['/team', 33, {expand: true}, 'user', 11]);

// you can collapse static segments like this (this works only with the first passed-in value):
createUrlTreeFromSnapshot(snapshot, ['/team/33/user', userId]);

// If the first segment can contain slashes, and you do not want the router to split it,
// you can do the following:
createUrlTreeFromSnapshot(snapshot, [{segmentPath: '/one/two'}]);

// create /team/33/(user/11//right:chat)
createUrlTreeFromSnapshot(snapshot, ['/team', 33, {outlets: {primary: 'user/11', right:
'chat'}}], null, null);

// remove the right secondary node
createUrlTreeFromSnapshot(snapshot, ['/team', 33, {outlets: {primary: 'user/11', right: null}}]);

// For the examples below, assume the current URL is for the `/team/33/user/11` and the
`ActivatedRouteSnapshot` points to `user/11`:

// navigate to /team/33/user/11/details
createUrlTreeFromSnapshot(snapshot, ['details']);

// navigate to /team/33/user/22
createUrlTreeFromSnapshot(snapshot, ['../22']);

// navigate to /team/44/user/22
createUrlTreeFromSnapshot(snapshot, ['../../team/44/user/22']);
```

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

### Install TypeScript for Angular Language Service

Source: https://angular.dev/tools/language-service

Installs the latest version of TypeScript as a development dependency, which is a prerequisite for the Angular Language Service.

```bash
npm install --save-dev typescript
```

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

### Install Vitest Coverage Package with npm

Source: https://angular.dev/guide/testing/code-coverage

Install the `@vitest/coverage-v8` package as a development dependency to enable code coverage reporting with Vitest.

```npm
npm install --save-dev @vitest/coverage-v8
```

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

### Nginx Configuration for Multi-Locale Deployment

Source: https://angular.dev/guide/i18n/deploy

This Nginx configuration example demonstrates how to detect the browser's preferred language using the `Accept-Language` header, redirect to the appropriate locale subdirectory, and fall back to a default language if no preference is defined.

```nginx
http {
    # Browser preferred language detection (does NOT require
    # AcceptLanguageModule)
    map $http_accept_language $accept_language {
        ~*^de de;
        ~*^fr fr;
        ~*^en "";
    }
    # ...
}

server {
    listen 80;
    server_name localhost;
    root /www/data;

    # Fallback to default language if no preference defined by browser
    if ($accept_language ~ "^$") {
        set $accept_language "fr";
    }

    # Redirect "/" to Angular application in the preferred language of the browser
    rewrite ^/$ /$accept_language permanent;

    # Everything under the Angular application is always redirected to Angular in the
    # correct language
    location ~ ^/(fr|de|$) {
        if ($accept_language = "") {
            try_files $uri /index.html?$args;
        }
        try_files $uri /$1/index.html?$args;
    }
    # ...
}
```

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

### onStart(fn: () => void): void

Source: https://angular.dev/api/animations/AnimationPlayer

Registers a callback function to be invoked when the animation starts.

```APIDOC
## onStart(fn: () => void): void

### Description
Provides a callback to invoke when the animation starts.

### Parameters
- **fn** (`() => void`) - The callback function.

### Returns
`void`
```

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

### Example of naming an interpolation placeholder in HTML

Source: https://angular.dev/guide/i18n/prepare

An example demonstrating how to name the `username` interpolation placeholder within a paragraph for translation context.

```html
<p i18n>Hello, {{ username //i18n(ph="name") }}!</p>
```

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

### Start the Angular development server with npm

Source: https://angular.dev/installation

Execute this command within your project directory to compile and serve the Angular application locally for development.

```npm
npm start
```

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

### ng add @angular/pwa example

Source: https://angular.dev/cli/add

Example of adding the Angular PWA package to configure a project for Progressive Web App support.

```bash
ng add @angular/pwa
```

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

### beforeStarted

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

Emits as the drag sequence is being prepared.

```APIDOC
## Event: beforeStarted

### Description
Emits as the drag sequence is being prepared.

### Type
`any`
```

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

### Install Angular Language Service Package

Source: https://angular.dev/tools/language-service

Installs the Angular Language Service package as a development dependency in the project's node_modules directory.

```bash
npm install --save-dev @angular/language-service
```

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

### setUpLocationSync

Source: https://angular.dev/api/router/upgrade/setUpLocationSync

Sets up a location change listener to trigger `history.pushState`. Works around the problem that `onPopState` does not trigger `history.pushState`. Must be called _after_ calling `UpgradeModule.bootstrap`.

```APIDOC
## function setUpLocationSync

### Description
Sets up a location change listener to trigger `history.pushState`. Works around the problem that `onPopState` does not trigger `history.pushState`. Must be called _after_ calling `UpgradeModule.bootstrap`.

### Function Signature
```
function setUpLocationSync(
  ngUpgrade: UpgradeModule,
  urlType?: 'path' | 'hash',
): void;
```

### Parameters
- **ngUpgrade** (`UpgradeModule`) - Required - The upgrade NgModule.
- **urlType** (`"path" | "hash"`) - Optional - The location strategy.

### Returns
`void`
```

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

### Install Karma and Jasmine Packages with npm

Source: https://angular.dev/guide/testing/karma

Install the required development dependencies for Karma and Jasmine in an existing Angular project using npm.

```npm
npm install --save-dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine
```

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

### Basic Server Rendering Setup with provideServerRendering

Source: https://angular.dev/api/platform-server/provideServerRendering

Illustrates how to integrate `provideServerRendering` into an Angular application's bootstrap process to enable server-side rendering.

```typescript
bootstrapApplication(AppComponent, {
  providers: [provideServerRendering()]
});
```