### Bootstrap Application with runApp

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

The recommended way to start an AngularDart application using a generated ComponentFactory.

```dart
import 'package:angular/angular.dart';

import 'main.template.dart' as ng;

void main() {
    runApp(ng.RootComponentNgFactory);
}

@Component(
    selector: 'root',
    template: 'Hello World',
)
class RootComponent {}
```

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

### Async Bootstrap with runAppAsync

Source: https://context7.com/angulardart-community/angular/llms.txt

An asynchronous alternative to `runApp` that allows for initialization logic before the main component is created. Use the `beforeComponentCreated` callback for asynchronous setup.

```dart
import 'package:ngdart/angular.dart';
import 'main.template.dart' as ng;

void main() {
  runAppAsync(
    ng.AppComponentNgFactory,
    beforeComponentCreated: (Injector injector) async {
      final configService = injector.provideType<ConfigService>(ConfigService);
      await configService.loadConfiguration();
    },
    createInjector: appInjector,
  );
}
```

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

### Component Initialization and Cleanup with OnInit and OnDestroy

Source: https://context7.com/angulardart-community/angular/llms.txt

Implement OnInit for initialization logic after the first change detection and OnDestroy for cleanup before the component is destroyed. This example sets up and cancels a stream subscription.

```dart
import 'dart:async';
import 'package:ngdart/angular.dart';

@Component(
  selector: 'user-panel',
  template: 'Online users: {{count}}',
)
class UserPanelComponent implements OnInit, OnDestroy {
  StreamSubscription<int>? _onlineUserSub;
  int count = 0;

  @override
  void ngOnInit() {
    // Called after first change detection
    _onlineUserSub = onlineUsers.listen((count) => this.count = count);
  }

  @override
  void ngOnDestroy() {
    // Called before component is destroyed
    _onlineUserSub?.cancel();
  }
}
```

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

### Core Framework - runApp

Source: https://context7.com/angulardart-community/angular/llms.txt

Starts a new AngularDart application with a component factory as the root. This is the primary method for bootstrapping an AngularDart application.

```APIDOC
## Core Framework - runApp

### Description
Starts a new AngularDart application with a component factory as the root. Creates an injector with change detection and other framework internals.

### Method
`runApp`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```dart
// main.dart
import 'package:ngdart/angular.dart';
import 'main.template.dart' as ng;

@Component(
  selector: 'hello-world',
  template: 'Hello World',
)
class HelloWorldComponent {}

void main() {
  runApp(ng.HelloWorldComponentNgFactory);
}
```

### Response
None (application starts)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Build AngularDart Binary

Source: https://github.com/angulardart-community/angular/blob/master/examples/hello_world/README.md

This command builds a production-ready binary for your AngularDart application. Always run 'pub get' before building.

```bash
$ pub get
$ webdev build
```

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

### Bootstrap Application with runApp

Source: https://context7.com/angulardart-community/angular/llms.txt

Starts a new AngularDart application with a component factory as the root. Requires importing the 'angular.dart' package and the component's template.

```dart
// main.dart
import 'package:ngdart/angular.dart';
import 'main.template.dart' as ng;

@Component(
  selector: 'hello-world',
  template: 'Hello World',
)
class HelloWorldComponent {}

void main() {
  runApp(ng.HelloWorldComponentNgFactory);
}
```

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

### Type-Safe Injector API Usage

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Demonstrates the new type-safe `provide` and `provideToken` methods for injecting dependencies via the `Injector` API, replacing older dynamic `get` calls.

```dart
void example(Injector injector) {
  // Injecting "SomeType".
  // Before:
  var someType1 = injector.get(SomeType) as SomeType;

  // After:
  var someType2 = injector.provide<SomeType>();

  // Injecting "OpaqueToken<SomeType>(...)".
  // Before:
  var someToken1 = injector.get(someToken) as SomeType;

  // After:
  var someToken2 = injector.provideToken(someToken);
}
```

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

### Host Element Interaction with @HostBinding and @HostListener

Source: https://context7.com/angulardart-community/angular/llms.txt

Use @HostBinding to bind to host element properties and @HostListener to listen to host element events. This example demonstrates toggling a class and responding to click and mouseenter events.

```dart
import 'package:ngdart/angular.dart';
import 'package:web/web.dart';

@Component(
  selector: 'button-like',
  template: 'CLICK ME',
)
class ButtonLikeComponent {
  @HostBinding('attr.role')
  final String role = 'button';

  @HostBinding('class.active')
  bool isActive = false;

  @HostListener('click')
  void onClick(MouseEvent event) {
    isActive = !isActive;
    print('Button clicked!');
  }

  @HostListener('mouseenter')
  void onMouseEnter() {
    print('Mouse entered');
  }
}
```

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

### Serve AngularDart Locally with Dart2JS (Minified)

Source: https://github.com/angulardart-community/angular/blob/master/examples/hello_world/README.md

Use this command to serve your AngularDart application locally with Dart2JS, applying minification for a release build. Run 'pub get' before serving.

```bash
$ pub get
$ webdev serve --release
```

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

### Deferred component inside template

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Example of a deferred component used as a direct child of a template tag.

```html
<template [ngIf]="showComponent">
  <expensive-comp @deferred></expensive-comp>
</template>
```

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

### Serve AngularDart Locally with DDC

Source: https://github.com/angulardart-community/angular/blob/master/examples/hello_world/README.md

Use this command to serve your AngularDart application locally for debugging with the Dart Development Compiler (DDC). Ensure you have run 'pub get' first.

```bash
$ pub get
$ webdev serve
```

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

### Reacting to Input Changes with AfterChanges

Source: https://context7.com/angulardart-community/angular/llms.txt

The AfterChanges lifecycle hook is called when any data-bound @Input properties change, before view and content children are checked. This example updates a display text based on an input status.

```dart
import 'package:ngdart/angular.dart';

@Component(
  selector: 'status-display',
  template: '{{displayText}}',
)
class StatusDisplayComponent implements AfterChanges {
  @Input()
  String status = '';

  String displayText = '';

  @override
  void ngAfterChanges() {
    // Called when @Input properties change
    displayText = 'Current status: $status';
  }
}
```

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

### Querying View Elements with @ViewChild and @ViewChildren

Source: https://context7.com/angulardart-community/angular/llms.txt

Use @ViewChild and @ViewChildren to query for child components or elements within a component's template. This example shows how to access a single child and a list of children after the view is initialized.

```dart
import 'package:ngdart/angular.dart';

@Component(
  selector: 'child-cmp',
  template: '<p>child</p>',
)
class ChildComponent {
  void doSomething() => print('Doing something');
}

@Component(
  selector: 'parent',
  template: '''
    <child-cmp #child1></child-cmp>
    <child-cmp #child2></child-cmp>
  ''',
  directives: [ChildComponent],
)
class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent)
  ChildComponent? firstChild;

  @ViewChildren(ChildComponent)
  List<ChildComponent>? allChildren;

  @override
  void ngAfterViewInit() {
    firstChild?.doSomething();
    for (var child in allChildren ?? []) {
      child.doSomething();
    }
  }
}
```

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

### Bootstrap Legacy Applications

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Use runAppLegacy for migration purposes when reflective metadata is still required.

```dart
import 'package:angular/angular.dart';

// ignore: uri_has_not_been_generated
import 'main.template.dart' as ng;

void main() {
  runAppLegacy(
    RootComponent,
    createInjectorFromProviders: [
      ClassProvider(HelloService),
    ],
    initReflector: ng.initReflector,
  );
}
```

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

### Define Module Configuration

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Demonstrates the legacy list-based provider configuration and the modern typed Module syntax for dependency injection.

```dart
const commonModule = [
  httpModule,
  ClassProvider(AuthService, useClass: OAuthService),
  FactoryProvider.forToken(xsrfToken, useFactory: readXsrfToken),
];
```

```dart
const httpModule = Module( /* ... Configuration ... */);

const commonModule = Module(
  include: [httpModule],
  provide: [
    ClassProvider(AuthService, useClass: OAuthService),
    FactoryProvider.forToken(xsrfToken, useFactory: readXsrfToken),
  ],
);
```

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

### Core Framework - runAppAsync

Source: https://context7.com/angulardart-community/angular/llms.txt

An asynchronous alternative to `runApp` that supports initialization logic before the main component is created.

```APIDOC
## Core Framework - runAppAsync

### Description
Asynchronous alternative to `runApp` that supports initialization before component creation.

### Method
`runAppAsync`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```dart
import 'package:ngdart/angular.dart';
import 'main.template.dart' as ng;

void main() {
  runAppAsync(
    ng.AppComponentNgFactory,
    beforeComponentCreated: (Injector injector) async {
      final configService = injector.provideType<ConfigService>(ConfigService);
      await configService.loadConfiguration();
    },
    createInjector: appInjector,
  );
}
```

### Response
None (application starts)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Set up prerequisite data using Injector before component creation

Source: https://github.com/angulardart-community/angular/blob/master/ngtest/CHANGELOG.md

Demonstrates using the Injector within `beforeComponentCreated` to set up prerequisite data for testing from Dependency Injection before a component is loaded.

```dart
final fixture = await testBed.create(
  beforeComponentCreated: (i) {
    var dataLayer = i.get(ComplexDataLayer) as ComplexDataLayer;
    dataLayer.setUpMockDataForTesting();
  },
);
```

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

### Bootstrap with InjectorFactory

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Configuring top-level services during application bootstrap using a generated InjectorFactory.

```dart
import 'package:angular/angular.dart';

import 'main.template.dart' as ng;

void main() {
  runApp(ng.RootComponentNgFactory, createInjector: rootInjector);
}

class HelloService {
  void sayHello() => print('Hello!');
}

@GenerateInjector([
   ClassProvider(HelloService),
])
final InjectorFactory rootInjector = ng.rootInjector$Injector;
```

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

### Core Framework - runApp with Dependency Injection

Source: https://context7.com/angulardart-community/angular/llms.txt

Bootstraps an AngularDart application with custom providers using `@GenerateInjector` for compile-time dependency injection.

```APIDOC
## Core Framework - runApp with Dependency Injection

### Description
Bootstraps application with custom providers using `@GenerateInjector` for compile-time dependency injection.

### Method
`runApp` with `createInjector`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```dart
import 'package:ngdart/angular.dart';
import 'main.template.dart' as ng;

class HelloService {
  void sayHello() => print('Hello World!');
}

@Component(
  selector: 'hello-world',
  template: '',
)
class HelloWorldComponent {
  HelloWorldComponent(HelloService service) {
    service.sayHello();
  }
}

@GenerateInjector([
  ClassProvider(HelloService),
])
final InjectorFactory helloInjector = ng.helloInjector$Injector;

void main() {
  runApp(ng.HelloWorldComponentNgFactory, createInjector: helloInjector);
}
```

### Response
None (application starts)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Querying Projected Content with @ContentChild and @ContentChildren

Source: https://context7.com/angulardart-community/angular/llms.txt

Use @ContentChild and @ContentChildren to query for child components projected via the <ng-content> tag. This example demonstrates finding TabComponents projected into a TabPanelComponent.

```dart
import 'package:ngdart/angular.dart';

@Component(selector: 'tab-comp', template: 'I am a Tab!')
class TabComponent {}

@Component(
  selector: 'tab-panel',
  template: '<ng-content></ng-content>',
)
class TabPanelComponent implements AfterContentInit {
  @ContentChildren(TabComponent)
  List<TabComponent>? tabs;

  @override
  void ngAfterContentInit() {
    print('Found ${tabs?.length ?? 0} tabs');
  }
}

// Usage:
// <tab-panel>
//   <tab-comp></tab-comp>
//   <tab-comp></tab-comp>
// </tab-panel>
```

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

### Configure NgTestBed with Mock Services

Source: https://context7.com/angulardart-community/angular/llms.txt

Set up NgTestBed with mock services and custom providers for dependency injection in tests. This is useful for isolating components and controlling their dependencies.

```dart
import 'package:ngdart/angular.dart';
import 'package:ngtest/ngtest.dart';
import 'package:test/test.dart';
import 'package:mockito/mockito.dart';

import 'user_profile.template.dart' as ng;

abstract class UserService {
  Future<User> getUser(int id);
}

class MockUserService extends Mock implements UserService {}

@Component(
  selector: 'user-profile',
  template: '''
    <div *ngIf="user != null">
      <h1>{{user.name}}</h1>
      <p>{{user.email}}</p>
    </div>
    <div *ngIf="loading">Loading...</div>
  ''',
)
class UserProfileComponent implements OnInit {
  final UserService _userService;
  User? user;
  bool loading = true;

  UserProfileComponent(this._userService);

  @override
  void ngOnInit() async {
    user = await _userService.getUser(1);
    loading = false;
  }
}

void main() {
  group('UserProfileComponent', () {
    late MockUserService mockUserService;
    late NgTestBed<UserProfileComponent> testBed;

    setUp(() {
      mockUserService = MockUserService();

      testBed = NgTestBed(
        ng.UserProfileComponentNgFactory,
        rootInjector: (parent) => Injector.map({
          UserService: mockUserService,
        }, parent),
      );
    });

    tearDown(disposeAnyRunningTest);

    test('should display user data', () async {
      // Setup mock
      when(mockUserService.getUser(1)).thenAnswer(
        (_) async => User(name: 'John', email: 'john@example.com'),
      );

      // Create fixture (triggers ngOnInit)
      final fixture = await testBed.create();

      // Wait for async operations
      await fixture.update();

      expect(fixture.text, contains('John'));
      expect(fixture.text, contains('john@example.com'));
      verify(mockUserService.getUser(1)).called(1);
    });

    test('should show loading state initially', () async {
      // Delay response
      when(mockUserService.getUser(1)).thenAnswer(
        (_) => Future.delayed(Duration(seconds: 1),
          () => User(name: 'John', email: 'john@example.com')),
      );

      final fixture = await testBed.create();

      // Check loading state before async completes
      expect(fixture.text, contains('Loading...'));
    });
  });
}

class User {
  final String name;
  final String email;
  User({required this.name, required this.email});
}

```

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

### Running Tests with build_runner

Source: https://github.com/angulardart-community/angular/blob/master/ngtest/README.md

Command to execute tests using Chrome and Dartdevc.

```bash
pub run build_runner test -- -p chrome
```

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

### Configure Provider with single argument

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Use the Provider constructor or provide function with a single argument to provide an instance of the class.

```dart
const Provider(Foo)
// or
provide(Foo)
```

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

### Encapsulating providers with Module

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Use Module to group collections of providers for cleaner configuration.

```dart
const httpModule = [ /* Other providers and/or modules. */ ];
```

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

### Use Module in ReflectiveInjector

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Shows how to use a Module with ReflectiveInjector. Note that this approach is discouraged for new code due to performance impacts.

```dart
// Using ReflectiveInjector is strongly not recommended for new code
// due to adverse effects on code-size and runtime performance.
final injector = ReflectiveInjector.resolveAndCreate([
  commonModule,
]);
```

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

### Displaying list length and item iteration

Source: https://github.com/angulardart-community/angular/blob/master/ngast/test/ast_cli_tester_source.html

Use interpolation to show collection size and iterate over items using the asterisk syntax.

```html
Showing {{items.length}} items:
===============================

*   {{x}} : {{item.trim()}}
```

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

### Handle Event Bindings in Templates

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Event bindings now support only single statements. Use method binding for complex logic.

```html
<!-- Bind method named "handleClick" (both equivalent) -->
<button (click)="handleClick"></button>
<button (click)="handleClick($event)"></button>

<!-- Execute a single statement -->
<button (click)="isPopupVisible = true"></button>
```

```html
<!-- Execute multiple statements -->
<button (click)="isPopupVisible = true; $event.stopPropagation()"></button>
```

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

### Configure FakeTimeNgZoneStabilizer with custom maxIterations

Source: https://github.com/angulardart-community/angular/blob/master/ngtest/CHANGELOG.md

Allows configuring a higher threshold for FakeTimeNgZoneStabilizer to elapse pending timers, useful in advanced test cases.

```dart
NgZoneStabilizer allow100InsteadOf10() {
  return FakeTimeNgZoneStabilizer(timerZone, ngZone, maxIterations: 100);
}
```

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

### Bootstrap Application with Dependency Injection

Source: https://context7.com/angulardart-community/angular/llms.txt

Bootstraps an AngularDart application with custom providers using `@GenerateInjector` for compile-time dependency injection. Ensure the service is provided in the injector factory.

```dart
import 'package:ngdart/angular.dart';
import 'main.template.dart' as ng;

class HelloService {
  void sayHello() => print('Hello World!');
}

@Component(
  selector: 'hello-world',
  template: '',
)
class HelloWorldComponent {
  HelloWorldComponent(HelloService service) {
    service.sayHello();
  }
}

@GenerateInjector([
  ClassProvider(HelloService),
])
final InjectorFactory helloInjector = ng.helloInjector$Injector;

void main() {
  runApp(ng.HelloWorldComponentNgFactory, createInjector: helloInjector);
}
```

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

### Apply Form Validation with Validators

Source: https://context7.com/angulardart-community/angular/llms.txt

Demonstrates built-in validator usage, validator composition, and the creation of custom validation functions. Includes a helper for checking control errors.

```dart
import 'package:ngforms/ngforms.dart';

// Using built-in validators
final requiredControl = Control<String>('', Validators.required);
final minLengthControl = Control<String>('', Validators.minLength(3));
final maxLengthControl = Control<String>('', Validators.maxLength(50));
final patternControl = Control<String>('', Validators.pattern(r'^\d{5}$'));

// Composing multiple validators
final emailControl = Control<String>('', Validators.compose([
  Validators.required,
  Validators.pattern(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$'),
]));

// Custom validator function
Map<String, dynamic>? passwordStrengthValidator(AbstractControl control) {
  final value = control.value as String? ?? '';
  if (value.isEmpty) return null;

  final hasUppercase = value.contains(RegExp(r'[A-Z]'));
  final hasLowercase = value.contains(RegExp(r'[a-z]'));
  final hasDigit = value.contains(RegExp(r'[0-9]'));
  final hasSpecial = value.contains(RegExp(r'[!@#$%^&*]'));

  if (!hasUppercase || !hasLowercase || !hasDigit || !hasSpecial) {
    return {
      'passwordStrength': {
        'hasUppercase': hasUppercase,
        'hasLowercase': hasLowercase,
        'hasDigit': hasDigit,
        'hasSpecial': hasSpecial,
      }
    };
  }
  return null;
}

final passwordControl = Control<String>('', Validators.compose([
  Validators.required,
  Validators.minLength(8),
  passwordStrengthValidator,
]));

// Check validation errors
void checkErrors(Control control) {
  if (control.hasError('required')) {
    print('Field is required');
  }
  if (control.hasError('minlength')) {
    final error = control.getError('minlength');
    print('Minimum length: ${error['requiredLength']}, actual: ${error['actualLength']}');
  }
}
```

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

### Configure angular_test arguments

Source: https://github.com/angulardart-community/angular/blob/master/ngtest/CHANGELOG.md

Pass arguments to the underlying test or serve processes using the --serve-arg and --test-arg flags.

```bash
$ pub run angular_test --serve-arg=port=1234
```

```bash
$ pub run angular_test --test-arg=--tags=aot
```

```bash
$ pub run angular_test --test-arg=--platform=content-shell
```

```bash
$ pub run angular_test --serve-arg=web-compiler=dartdevc
```

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

### Template Attribute Syntax Replacement

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Shows the transition from the legacy 'template' attribute syntax to modern alternatives. The 'template' attribute is removed and should be replaced by either the '*' micro-syntax or a '<template>' element.

```html
<!-- Before -->

  <div template="ngFor let item of items; trackBy: trackById; let i=index">
    {{i}}: {{item}}
  </div>
```

```html
<!-- After -->

<!-- * micro-syntax -->
<div *ngFor="let item of items; trackBy: trackById; let i=index">
  {{i}}: {{item}}
</div>

<!-- <template> element -->
<template
    ngFor
    let-item
    [ngForOf]="items"
    [ngForTrackBy]="trackById"
    let-i="index">
  <div>
    {{i}}: {{item}}
  </div>
</template>
```

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

### Enable Experimental Analyzer Compiler

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Use this flag in your pubspec.yaml to enable the experimental new compiler that utilizes the Dart analyzer for metadata. This flag will be default in version 4.0. Ensure you discontinue use of platform_* options when enabling this.

```yaml
transformers:
    angular2/transform/codegen:
        use_analyzer: true
```

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

### Query component instances in NgTestFixture

Source: https://github.com/angulardart-community/angular/blob/master/ngtest/CHANGELOG.md

Use queryAll to interact with or run expectations against child component instances within a fixture.

```dart
// Assert we have 3 instances of <child>.
await fixture.queryAll(
  (el) => el.componentInstance is ChildComponent,
  (children) {
    expect(children, hasLength(3));
  },
);
```

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

### Configuring pubspec.yaml for ngtest

Source: https://github.com/angulardart-community/angular/blob/master/ngtest/README.md

Required development dependencies for running ngtest.

```yaml
# Use the latest versions if possible.
dev_dependencies:
  build_runner: ^2.0.0
  build_test: ^2.0.0
  build_web_compilers: ^3.0.0
```

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

### ViewChildren and ContentChildren with List

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Demonstrates the updated usage of @ViewChildren and @ContentChildren, which now return a plain List instead of a QueryList. The list is replaced with a new instance when children change.

```dart
class Comp {
  @ViewChildren(ChildComponent)
  set viewChildren(List<ChildComponent> viewChildren) {
    // ...
  }

  // Can also be a simple field.
  @ContentChildren(ChildComponent)
  List<ChildComponent> contentChildren;
}
```

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

### Create and Use Pipes

Source: https://context7.com/angulardart-community/angular/llms.txt

Define custom pipes for data transformation and register them in the component's pipes array.

```dart
import 'package:ngdart/angular.dart';

@Pipe('truncate')
class TruncatePipe {
  String transform(String value, [int limit = 50, String trail = '...']) {
    return value.length > limit
        ? '${value.substring(0, limit)}$trail'
        : value;
  }
}

@Pipe('exponential', pure: true)
class ExponentialStrengthPipe {
  num transform(num value, num exponent) {
    return pow(value, exponent);
  }
}

@Component(
  selector: 'app',
  template: '''
    <!-- Built-in pipes -->
    <p>{{name | uppercase}}</p>
    <p>{{name | lowercase}}</p>
    <p>{{price | number:'1.2-2'}}</p>
    <p>{{birthday | date:'fullDate'}}</p>

    <!-- Custom pipes -->
    <p>{{description | truncate:100:'...'}}</p>
    <p>{{baseValue | exponential:power}}</p>

    <!-- Async pipe for streams/futures -->
    <p>{{asyncValue | async}}</p>
  ''',
  pipes: [TruncatePipe, ExponentialStrengthPipe, AsyncPipe],
)
class AppComponent {
  String name = 'Hello World';
  num price = 1234.5678;
  DateTime birthday = DateTime(1990, 5, 15);
  String description = 'A very long description...';
  num baseValue = 2;
  num power = 10;
  Stream<String> asyncValue = Stream.value('Loaded!');
}
```

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

### Use Module in GenerateInjector

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Shows how to integrate a defined Module into the @GenerateInjector annotation.

```dart
@GenerateInjector.fromModules([
  commonModule,
])
final InjectorFactory exampleFromModule = ng.exampleFromModule$Injector;
```

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

### Define Routes with RouteDefinition

Source: https://context7.com/angulardart-community/angular/llms.txt

Configures application routes including parameters, lazy loading, and redirects within a component.

```dart
import 'package:ngdart/angular.dart';
import 'package:ngrouter/ngrouter.dart';

// Import component factories
import 'home.template.dart' as home;
import 'users.template.dart' as users;
import 'user_detail.template.dart' deferred as user_detail;

@Component(
  selector: 'app',
  template: '''
    <nav>
      <a routerLink="/home" routerLinkActive="active">Home</a>
      <a routerLink="/users" routerLinkActive="active">Users</a>
    </nav>
    <router-outlet [routes]="routes"></router-outlet>
  ''',
  directives: [RouterOutlet, RouterLink, RouterLinkActive],
)
class AppComponent {
  final List<RouteDefinition> routes = [
    // Simple route
    RouteDefinition(
      path: 'home',
      component: home.HomeComponentNgFactory,
      useAsDefault: true,
    ),

    // Route with parameter
    RouteDefinition(
      path: 'users/:id',
      component: users.UserDetailComponentNgFactory,
    ),

    // Lazy-loaded route
    RouteDefinition.defer(
      path: 'admin',
      loader: () async {
        await user_detail.loadLibrary();
        return user_detail.AdminComponentNgFactory;
      },
    ),

    // Redirect route
    RouteDefinition.redirect(
      path: 'profile',
      redirectTo: 'users/me',
    ),

    // Catch-all redirect
    RouteDefinition.redirect(
      path: '.+',
      redirectTo: 'home',
    ),
  ];
}
```

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

### Using ValueProvider with typed tokens

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Utilize ValueProvider.forToken to specify provider types via inference.

```dart
@Component(
  providers: [
    // This is now a Provider<String>.
    ValueProvider.forToken(downloadUrl, 'https://a-site.com/file.zip'),
  ],
)
class Example {}
```

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

### Bind Event Handlers at Initialization

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Ensure event handlers are defined before initialization, as they are bound at that time.

```dart
@Component(
    selector: 'my-component',
    template: '<div (click)="clickHandler($event)"></div>')
class MyComponent {
  Function clickHandler;
}
```

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

### Components - @Component

Source: https://context7.com/angulardart-community/angular/llms.txt

Defines a reusable UI building block with a selector, template, styles, and encapsulated behavior. Supports input properties and change detection strategies.

```APIDOC
## Components - @Component

### Description
Declares a reusable UI building block with a template, styles, and encapsulated behavior.

### Method
`@Component` decorator

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```dart
import 'package:ngdart/angular.dart';

@Component(
  selector: 'bank-account',
  template: '''
    Bank Name: {{bankName}}
    Account Id: {{id}}
  ''',
  styles: ['.active { color: green; }'],
  changeDetection: ChangeDetectionStrategy.onPush,
)
class BankAccountComponent {
  @Input()
  String bankName = '';

  @Input('account-id')
  String id = '';
}

@Component(
  selector: 'app',
  template: '''
    <bank-account bank-name="RBC" account-id="4747"></bank-account>
  ''',
  directives: [BankAccountComponent],
)
class AppComponent {}
```

### Response
None (component definition)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Implement @Injectable and Constructor Injection

Source: https://context7.com/angulardart-community/angular/llms.txt

Marks a class as injectable and uses constructor parameters to resolve dependencies. Ensure the class is provided in the component's providers list.

```dart
import 'package:ngdart/angular.dart';

@Injectable()
class UserService {
  final HttpClient _http;
  final Logger _logger;

  // Dependencies injected via constructor
  UserService(this._http, this._logger);

  Future<User> getUser(int id) async {
    _logger.log('Fetching user $id');
    return await _http.get('/users/$id');
  }
}

@Component(
  selector: 'user-profile',
  template: '{{user?.name}}',
  providers: [ClassProvider(UserService)],
)
class UserProfileComponent implements OnInit {
  final UserService _userService;
  User? user;

  UserProfileComponent(this._userService);

  @override
  void ngOnInit() async {
    user = await _userService.getUser(1);
  }
}
```

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

### Use ComponentLoader for runtime creation

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

ComponentLoader provides an imperative API for creating components at runtime within directives, components, or services.

```dart
// An `ExampleComponent`s generated code, including a `ComponentFactory`.
import 'example.template.dart' as ng;

class AdBannerComponent implements AfterViewInit {
  final ComponentLoader _loader;

  AdBannerComponent(this._loader);

  @override
  ngAfterViewInit() {
    final component = _loader.loadDetached(ng.ExampleComponentNgFactory);
    // Do something with this reference.
  }
}
```

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

### Component Testing with NgTestBed

Source: https://context7.com/angulardart-community/angular/llms.txt

NgTestBed creates an isolated environment for testing AngularDart components. Use it to create fixtures, update component state, and assert on rendered output.

```dart
import 'package:ngdart/angular.dart';
import 'package:ngtest/ngtest.dart';
import 'package:test/test.dart';

import 'hello_world.template.dart' as ng;

@Component(
  selector: 'hello-world',
  template: 'Hello {{name}}',
)
class HelloWorldComponent {
  String name = 'World';
}

void main() {
  group('HelloWorldComponent', () {
    // Always dispose tests in tearDown
    tearDown(disposeAnyRunningTest);

    test('should render default greeting', () async {
      // Create test bed with component factory
      final testBed = NgTestBed(ng.HelloWorldComponentNgFactory);

      // Create fixture
      final fixture = await testBed.create();

      // Assert on rendered text
      expect(fixture.text, contains('Hello World'));
    });

    test('should update greeting when name changes', () async {
      final testBed = NgTestBed(ng.HelloWorldComponentNgFactory);
      final fixture = await testBed.create();

      // Update component and wait for change detection
      await fixture.update((component) {
        component.name = 'Angular';
      });

      expect(fixture.text, contains('Hello Angular'));
    });

    test('should access component instance', () async {
      final testBed = NgTestBed(ng.HelloWorldComponentNgFactory);
      final fixture = await testBed.create();

      // Read-only access to component instance
      expect(fixture.assertOnlyInstance.name, equals('World'));
    });
  });
}

```

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

### Load dynamic components with generic types

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Use the generated create{Type}Factory function to specify generic type arguments when loading components dynamically.

```dart
import 'foo_component.template.dart' as foo;

void loadFooComponent(ViewContainerRef viewContainerRef) {
  // BAD: Not possible to specify generic type arguments on component.
  final componentRef =
      viewContainerRef.createComponent(foo.FooComponentNgFactory);
}
```

```dart
import 'foo_component.template.dart' as foo;

void loadFooComponent(ViewContainerRef viewContainerRef) {
  // GOOD: Type arguments on function are forwarded to underlying component.
  final componentRef = viewContainerRef.createComponent(
      foo.createFooComponentFactory<String, int>());
}
```

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

### Implement Router Lifecycle Guards and Hooks

Source: https://context7.com/angulardart-community/angular/llms.txt

Controls navigation flow and component state using lifecycle interfaces like CanActivate, CanDeactivate, and OnActivate.

```dart
import 'package:ngdart/angular.dart';
import 'package:ngrouter/ngrouter.dart';

@Component(
  selector: 'edit-form',
  template: '...',
)
class EditFormComponent
    implements CanActivate, CanDeactivate, CanNavigate, OnActivate, OnDeactivate {

  bool hasUnsavedChanges = false;
  late String userId;

  // Called when navigating TO this component
  @override
  Future<bool> canActivate(RouterState? current, RouterState next) async {
    // Check if user has permission
    final userId = next.parameters['id'];
    return await _authService.canEditUser(userId);
  }

  // Called when navigating AWAY (after resolving next route)
  @override
  Future<bool> canDeactivate(RouterState current, RouterState next) async {
    // Allow if same route with different params
    return current.parameters['id'] != next.parameters['id'];
  }

  // Called immediately when navigation starts (before route resolution)
  @override
  Future<bool> canNavigate() async {
    if (hasUnsavedChanges) {
      return await _confirmDialog.show('Discard unsaved changes?');
    }
    return true;
  }

  // Called after component is activated
  @override
  void onActivate(RouterState? previous, RouterState current) {
    userId = current.parameters['id'] ?? '';
    _loadUser(userId);
  }

  // Called before component is deactivated
  @override
  void onDeactivate(RouterState current, RouterState next) {
    _saveState();
  }
}

// Reusable component
@Component(
  selector: 'user-list',
  template: '...',
)
class UserListComponent extends CanReuse implements OnActivate {
  List<User> users = [];

  // Component instance is cached and reused
  @override
  Future<bool> canReuse(RouterState current, RouterState next) async => true;

  @override
  void onActivate(RouterState? previous, RouterState current) {
    // Called each time route activates, even when reusing instance
    _refreshUsers();
  }
}
```

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

### Run tests with build_runner

Source: https://github.com/angulardart-community/angular/blob/master/ngtest/CHANGELOG.md

Use build_runner to execute tests as a replacement for the removed pub run angular_test command.

```bash
$ pub run build_runner test
```

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

### Set custom PageLoader factory

Source: https://github.com/angulardart-community/angular/blob/master/ngtest/CHANGELOG.md

Configure a custom PageLoader factory on the NgTestBed instance.

```dart
testBed = testBed.setPageLoader(
  (element) => new CustomPageLoader(...),
);
```

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

### Testing an AngularDart Component

Source: https://github.com/angulardart-community/angular/blob/master/ngtest/README.md

Demonstrates a basic test case using NgTestBed to render and update a component.

```dart
// Assume this is 'my_test.dart'.
import 'my_test.template.dart' as ng;

void main() {
  tearDown(disposeAnyRunningTest);

  test('should render "Hello World"', () async {
    final testBed = new NgTestBed<HelloWorldComponent>();
    final testFixture = await testBed.create();
    expect(testFixture.text, 'Hello World');
    await testFixture.update((c) => c.name = 'Universe');
    expect(testFixture.text, 'Hello Universe');
  });
}

@Component(selector: 'test', template: 'Hello {{name}}')
class HelloWorldComponent {
  String name = 'World';
}
```

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

### Using tokens as annotations

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Inject tokens directly by using them as annotations instead of using @Inject.

```dart
class Example {
  Example(@DownloadUrl() String url, @UsPresidents() List<String> names) {
    // url == 'https://a-site.com/file.zip'
    // names == ['George', 'Abe']
  }
}
```

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

### Template Navigation with RouterLink and RouterLinkActive

Source: https://context7.com/angulardart-community/angular/llms.txt

Use routerLink for declarative navigation and routerLinkActive to apply CSS classes to active links. Supports parameters and query parameters.

```dart
import 'package:ngdart/angular.dart';
import 'package:ngrouter/ngrouter.dart';

@Component(
  selector: 'nav-menu',
  template: '''
    <nav>
      <!-- Simple link -->
      <a routerLink="/home">Home</a>

      <!-- Link with active class -->
      <a routerLink="/users" routerLinkActive="active">Users</a>

      <!-- Link with parameters -->
      <a [routerLink]="'/users/' + userId">User Profile</a>

      <!-- Link with query parameters -->
      <a routerLink="/search"
         [queryParams]="{'q': searchTerm, 'page': '1'}">
        Search
      </a>

      <!-- Dynamic navigation -->
      <a *ngFor="let item of menuItems"
         [routerLink]="item.path"
         routerLinkActive="selected">
        {{item.label}}
      </a>
    </nav>
  ''',
  styles: ['''
    .active { font-weight: bold; color: blue; }
    .selected { background-color: #eee; }
  '''],
  directives: [RouterLink, RouterLinkActive, NgFor],
)
class NavMenuComponent {
  String userId = '123';
  String searchTerm = 'angular';

  List<MenuItem> menuItems = [
    MenuItem('/home', 'Home'),
    MenuItem('/about', 'About'),
    MenuItem('/contact', 'Contact'),
  ];
}

class MenuItem {
  final String path;
  final String label;
  MenuItem(this.path, this.label);
}

```

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

### Micro Syntax for Binding Primary Input - AngularDart

Source: https://github.com/angulardart-community/angular/blob/master/ngast/CHANGELOG.md

Demonstrates the updated micro syntax for binding to the primary input, allowing additional input or let bindings. This change enhances flexibility in template syntax.

```html
<template [foo]="expr1" [fooContext]="expr2">
  <div></div>
</template>
```

```html
<div *foo="expr1; context: expr2"></div>
```

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

### Navigate Programmatically with Router

Source: https://context7.com/angulardart-community/angular/llms.txt

Uses the Router service to trigger navigation, handle query parameters, and process navigation results.

```dart
import 'package:ngdart/angular.dart';
import 'package:ngrouter/ngrouter.dart';

@Component(
  selector: 'navigation',
  template: '''
    <button (click)="goHome()">Home</button>
    <button (click)="goToUser(42)">User 42</button>
    <button (click)="goToSearch()">Search</button>
  ''',
)
class NavigationComponent implements OnInit {
  final Router _router;

  NavigationComponent(this._router);

  @override
  void ngOnInit() {
    // Listen to route changes
    _router.onRouteActivated.listen((RouterState newState) {
      print('Navigated to: ${newState.path}');
      print('Parameters: ${newState.parameters}');
      print('Query params: ${newState.queryParameters}');
    });
  }

  void goHome() {
    _router.navigate('/home');
  }

  void goToUser(int id) {
    _router.navigate('/users/$id');
  }

  void goToSearch() {
    _router.navigate('/search', NavigationParams(
      queryParameters: {'q': 'angular', 'page': '1'},
      fragment: 'results',
    ));
  }

  Future<void> navigateWithResult() async {
    final result = await _router.navigate('/checkout');
    switch (result) {
      case NavigationResult.success:
        print('Navigation successful');
        break;
      case NavigationResult.blockedByGuard:
        print('Navigation blocked by guard');
        break;
      case NavigationResult.invalidRoute:
        print('Invalid route');
        break;
    }
  }
}
```

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

### Migrate Component View Bindings

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Replace viewBindings with viewProviders in the @Component annotation.

```dart
@Component(viewBindings: const [])
```

```dart
@Component(viewProviders: const [])
```

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

### Automatic HostListener Event Parameter Inference

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

The `const ['$event']` parameter for `@HostListener()` can be omitted if the bound method has a single argument, allowing automatic inference.

```dart
class Comp {
  @HostListener('click')
  void onClick(MouseEvent e) {}
}
```

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

### Define UI Building Block with @Component

Source: https://context7.com/angulardart-community/angular/llms.txt

Declares a reusable UI building block with a selector, template, styles, and change detection strategy. Use `@Input()` to define properties that can be passed from a parent component.

```dart
import 'package:ngdart/angular.dart';

@Component(
  selector: 'bank-account',
  template: '''
    Bank Name: {{bankName}}
    Account Id: {{id}}
  ''',
  styles: ['.active { color: green; }'],
  changeDetection: ChangeDetectionStrategy.onPush,
)
class BankAccountComponent {
  @Input()
  String bankName = '';

  @Input('account-id')
  String id = '';
}

@Component(
  selector: 'app',
  template: '''
    <bank-account bank-name="RBC" account-id="4747"></bank-account>
  ''',
  directives: [BankAccountComponent],
)
class AppComponent {}
```

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

### Creating scoped custom tokens

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Extend OpaqueToken or MultiToken to create unique, scoped token names.

```dart
class DownloadUrl extends OpaqueToken<String> {
  const DownloadUrl();
}

class UsPresidents extends MultiToken<String> {
  const UsPresidents();
}

class Example {
  providers: const [
    ValueProvider.forToken(DownloadUrl(), 'https://a-site.com/file.zip'),
    ValueProvider.forToken(UsPresidents(), 'George'),
    ValueProvider.forToken(UsPresidents(), 'Abe'),
  ],
}
```

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

### Inherit component metadata

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Annotations like @Input and @Output are now inherited through super types.

```dart
class BaseComponent {
  @Input()
  String name;
}

// Also has an input called "name" now!
@Component(selector: 'comp')
class ConcreteComponent extends BaseComponent {}
```

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

### Static @HostBinding Inheritance in AngularDart

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Demonstrates how static members with @HostBinding are not inherited, while instance members are. This ensures correct behavior when extending classes with host bindings.

```dart
class Base {
  @HostBinding('title')
  static const hostTitle = 'Hello';

  @HostBinding('class')
  final hostClass = 'fancy';
}

// Will have DOM of <fancy-button class="fancy"> but *not* title="Hello".
@Component(
  selector: 'fancy-button',
  template: '...',
)
class FancyButton extends Base {}

```

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

### DI Provider Types - ClassProvider, ValueProvider, FactoryProvider, ExistingProvider in Dart

Source: https://context7.com/angulardart-community/angular/llms.txt

Configures the injector with different provider types for dependency injection. Includes service interfaces, implementations, tokens, and factory functions.

```dart
import 'package:ngdart/angular.dart';
import 'main.template.dart' as ng;

// Service interfaces and implementations
abstract class Logger {
  void log(String message);
}

class ConsoleLogger implements Logger {
  @override
  void log(String message) => print('[LOG] $message');
}

class CachedService extends Service {
  // Cached implementation
}

// Token for non-class values
const apiUrl = OpaqueToken<String>('apiUrl');
const maxRetries = OpaqueToken<int>('maxRetries');

// Factory function
Logger createLogger(bool isProduction) {
  return isProduction ? ProductionLogger() : ConsoleLogger();
}

@GenerateInjector([
  // Class provider - provide class by type
  ClassProvider(Service),

  // Class provider with different implementation
  ClassProvider(Service, useClass: CachedService),

  // Value provider - provide constant values
  ValueProvider.forToken(apiUrl, 'https://api.example.com'),
  ValueProvider.forToken(maxRetries, 3),

  // Factory provider - create instance via function
  FactoryProvider(Logger, createLogger, deps: [isProductionToken]),

  // Existing provider - alias to another token
  ExistingProvider(Logger, ConsoleLogger),
])
final InjectorFactory appInjector = ng.appInjector$Injector;

void main() {
  runApp(ng.AppComponentNgFactory, createInjector: appInjector);
}
```

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

### Use deferred loading

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Apply the @deferred directive to components to enable compile-time deferred loading.

```dart
import 'package:angular2/angular2.dart';
import 'expensive_comp.dart' show ExpensiveComp;

@Component(
  selector: 'my-comp',
  directives: const [ExpensiveComp],
  template: r'''
    <expensive-comp @deferred></expensive-comp>
  ''',
)
class MyComp {}
```

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

### Using @deferred with nested templates

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

Demonstrates the correct usage of the @deferred directive within a nested template structure. Ensure that DI bindings are handled correctly within nested views when using @deferred.

```html
<template [ngIf]="someCondition">
  <expensive-comp @deferred></expensive-comp>
</template>
```

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

### Component Communication - @Input and @Output

Source: https://context7.com/angulardart-community/angular/llms.txt

Enables parent-child component communication. `@Input` properties allow data to flow down from parent to child, while `@Output` properties (using `StreamController`) allow events to flow up from child to parent.

```APIDOC
## Component Communication - @Input and @Output

### Description
Declares data-bound input properties and event-bound output properties for parent-child communication.

### Method
`@Input` and `@Output` decorators

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```dart
import 'dart:async';
import 'package:ngdart/angular.dart';

@Component(
  selector: 'counter',
  template: '''
    <button (click)="increment()">+</button>
    <span>{{count}}</span>
    <button (click)="decrement()">-</button>
  ''',
)
class CounterComponent {
  @Input()
  int count = 0;

  final _countChange = StreamController<int>();

  @Output()
  Stream<int> get countChange => _countChange.stream;

  void increment() {
    count++;
    _countChange.add(count);
  }

  void decrement() {
    count--;
    _countChange.add(count);
  }
}

// Parent usage:
// <counter [count]="myCount" (countChange)="onCountChange($event)"></counter>
```

### Response
None (component definition)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Update Pipe Definitions

Source: https://github.com/angulardart-community/angular/blob/master/ngdart/CHANGELOG.md

The name parameter is now required for all @Pipe definitions.

```dart
@Pipe(name: 'uppercase')
```

```dart
@Pipe('uppercase')
```

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

### Apply Injection Modifiers

Source: https://context7.com/angulardart-community/angular/llms.txt

Control dependency resolution behavior using @Optional, @Self, @SkipSelf, and @Host decorators.

```dart
import 'package:ngdart/angular.dart';

@Component(
  selector: 'child',
  template: '...',
)
class ChildComponent {
  ChildComponent(
    // Optional - returns null if not found
    @Optional() OptionalService? optional,

    // Self - only look in component's own injector
    @Self() LocalService local,

    // SkipSelf - skip component's injector, look at parents
    @SkipSelf() ParentService parent,

    // Host - look up to host component's injector
    @Host() HostService host,
  );
}
```