@anglr/select 17.2.0 → 18.0.0-beta.20260805050455

package/.claude/skills/angular-developer/references/migrations.md

@@ -1,30 +1,30 @@
-# Automatic Migrations & Code Modernization
-
-When tasked with refactoring or modernizing an existing codebase, always prefer using the official automated schematics available in `@angular/core` over manual text replacement.
-
-## Discovering Migrations
-
-To view all available schematics for the installed version of the core framework, run:
-`ng generate @angular/core: --help`
-
-## Common Migration Schematics
-
-Use the following commands to apply specific syntax updates. You can scope these commands to a specific project or directory using the `--project <name>` or `--path <dir>` flags.
-
-| Feature to Modernize      | Command to Execute                                          |
-| :------------------------ | :---------------------------------------------------------- |
-| **Built-in Control Flow** | `ng generate @angular/core:control-flow`                    |
-| **Signal-based Inputs**   | `ng generate @angular/core:signal-input-migration`          |
-| **Signal Queries**        | `ng generate @angular/core:signal-queries-migration`        |
-| **Functional Outputs**    | `ng generate @angular/core:output-migration`                |
-| **`inject()` Function**   | `ng generate @angular/core:inject`                          |
-| **Self-Closing Tags**     | `ng generate @angular/core:self-closing-tag`                |
-| **Standalone**            | `ng generate @angular/core:standalone` (See workflow below) |
-
-## Specialized Workflow: Migrating to Standalone
-
-The Standalone migration is an interactive, multi-step refactoring. You **MUST** perform this in three discrete stages, verifying that the application builds and runs correctly after each stage completes:
-
-1. **Phase 1**: Run `ng generate @angular/core:standalone` and select the option to **Convert all components, directives, and pipes to standalone**.
-2. **Phase 2**: Verify the build with `ng build`. Run the command again and select **Remove unnecessary NgModule classes**.
-3. **Phase 3**: Verify the build with `ng build`. Run the final pass and select **Bootstrap the project using standalone APIs**.
+# Automatic Migrations & Code Modernization
+
+When tasked with refactoring or modernizing an existing codebase, always prefer using the official automated schematics available in `@angular/core` over manual text replacement.
+
+## Discovering Migrations
+
+To view all available schematics for the installed version of the core framework, run:
+`ng generate @angular/core: --help`
+
+## Common Migration Schematics
+
+Use the following commands to apply specific syntax updates. You can scope these commands to a specific project or directory using the `--project <name>` or `--path <dir>` flags.
+
+| Feature to Modernize      | Command to Execute                                          |
+| :------------------------ | :---------------------------------------------------------- |
+| **Built-in Control Flow** | `ng generate @angular/core:control-flow`                    |
+| **Signal-based Inputs**   | `ng generate @angular/core:signal-input-migration`          |
+| **Signal Queries**        | `ng generate @angular/core:signal-queries-migration`        |
+| **Functional Outputs**    | `ng generate @angular/core:output-migration`                |
+| **`inject()` Function**   | `ng generate @angular/core:inject`                          |
+| **Self-Closing Tags**     | `ng generate @angular/core:self-closing-tag`                |
+| **Standalone**            | `ng generate @angular/core:standalone` (See workflow below) |
+
+## Specialized Workflow: Migrating to Standalone
+
+The Standalone migration is an interactive, multi-step refactoring. You **MUST** perform this in three discrete stages, verifying that the application builds and runs correctly after each stage completes:
+
+1. **Phase 1**: Run `ng generate @angular/core:standalone` and select the option to **Convert all components, directives, and pipes to standalone**.
+2. **Phase 2**: Verify the build with `ng build`. Run the command again and select **Remove unnecessary NgModule classes**.
+3. **Phase 3**: Verify the build with `ng build`. Run the final pass and select **Bootstrap the project using standalone APIs**.

package/.claude/skills/angular-developer/references/navigate-to-routes.md

@@ -1,69 +1,69 @@
-# Navigate to Routes
-
-Angular provides both declarative and programmatic ways to navigate between routes.
-
-## Declarative Navigation (`RouterLink`)
-
-Use the `RouterLink` directive on anchor elements.
-
-```ts
-import {RouterLink, RouterLinkActive} from '@angular/router';
-
-@Component({
-  imports: [RouterLink, RouterLinkActive],
-  template: `
-    <nav>
-      <a routerLink="/dashboard" routerLinkActive="active-link">Dashboard</a>
-      <a [routerLink]="['/user', userId]">Profile</a>
-    </nav>
-  `,
-})
-export class Nav {
-  userId = '123';
-}
-```
-
-- **Absolute Paths**: Start with `/` (e.g., `/settings`).
-- **Relative Paths**: No leading `/`. Use `../` to go up a level.
-
-## Programmatic Navigation (`Router`)
-
-Inject the `Router` service to navigate via TypeScript code.
-
-### `router.navigate()`
-
-Uses an array of commands.
-
-```ts
-private router = inject(Router);
-private route = inject(ActivatedRoute);
-
-// Standard navigation
-this.router.navigate(['/profile']);
-
-// With parameters
-this.router.navigate(['/search'], {
-  queryParams: { q: 'angular' },
-  fragment: 'results'
-});
-
-// Relative navigation
-this.router.navigate(['edit'], { relativeTo: this.route });
-```
-
-### `router.navigateByUrl()`
-
-Uses a string path. Ideal for absolute navigation or full URLs.
-
-```ts
-this.router.navigateByUrl('/products/123?view=details');
-
-// Replace current entry in history
-this.router.navigateByUrl('/login', {replaceUrl: true});
-```
-
-## URL Parameters
-
-- **Route Params**: Part of the path (e.g., `/user/123`).
-- **Query Params**: After the `?` (e.g., `/search?q=query`).
-- **Matrix Params**: Scoped to a segment (e.g., `/products;category=books`).
+# Navigate to Routes
+
+Angular provides both declarative and programmatic ways to navigate between routes.
+
+## Declarative Navigation (`RouterLink`)
+
+Use the `RouterLink` directive on anchor elements.
+
+```ts
+import {RouterLink, RouterLinkActive} from '@angular/router';
+
+@Component({
+  imports: [RouterLink, RouterLinkActive],
+  template: `
+    <nav>
+      <a routerLink="/dashboard" routerLinkActive="active-link">Dashboard</a>
+      <a [routerLink]="['/user', userId]">Profile</a>
+    </nav>
+  `,
+})
+export class Nav {
+  userId = '123';
+}
+```
+
+- **Absolute Paths**: Start with `/` (e.g., `/settings`).
+- **Relative Paths**: No leading `/`. Use `../` to go up a level.
+
+## Programmatic Navigation (`Router`)
+
+Inject the `Router` service to navigate via TypeScript code.
+
+### `router.navigate()`
+
+Uses an array of commands.
+
+```ts
+private router = inject(Router);
+private route = inject(ActivatedRoute);
+
+// Standard navigation
+this.router.navigate(['/profile']);
+
+// With parameters
+this.router.navigate(['/search'], {
+  queryParams: { q: 'angular' },
+  fragment: 'results'
+});
+
+// Relative navigation
+this.router.navigate(['edit'], { relativeTo: this.route });
+```
+
+### `router.navigateByUrl()`
+
+Uses a string path. Ideal for absolute navigation or full URLs.
+
+```ts
+this.router.navigateByUrl('/products/123?view=details');
+
+// Replace current entry in history
+this.router.navigateByUrl('/login', {replaceUrl: true});
+```
+
+## URL Parameters
+
+- **Route Params**: Part of the path (e.g., `/user/123`).
+- **Query Params**: After the `?` (e.g., `/search?q=query`).
+- **Matrix Params**: Scoped to a segment (e.g., `/products;category=books`).

package/.claude/skills/angular-developer/references/outputs.md

@@ -1,86 +1,86 @@
-# Outputs (Custom Events)
-
-Outputs allow a child component to emit custom events that a parent component can listen to. Angular recommends using the new `output()` function for modern applications.
-
-## Function-based outputs
-
-Declare outputs using the `output()` function. This returns an `OutputEmitterRef`.
-
-```ts
-import {Component, output} from '@angular/core';
-
-@Component({
-  selector: 'custom-slider',
-  template: `<button (click)="changeValue(50)">Set to 50</button>`,
-})
-export class CustomSlider {
-  // Output without event data
-  panelClosed = output<void>();
-
-  // Output with event data (number)
-  valueChanged = output<number>();
-
-  changeValue(newValue: number) {
-    this.valueChanged.emit(newValue);
-  }
-}
-```
-
-### Usage in Template
-
-Bind to the output event using parentheses `()`. If the event emits data, access it using the special `$event` variable.
-
-```html
-<custom-slider (panelClosed)="savePanelState()" (valueChanged)="logValue($event)" />
-```
-
-## Configuration Options
-
-The `output` function accepts a config object to specify an alias.
-
-```ts
-@Component({...})
-export class CustomSlider {
-  // The event is named 'valueChanged' in the template,
-  // but accessed as 'changed' in the component class.
-  changed = output<number>({ alias: 'valueChanged' });
-}
-```
-
-## Programmatic Subscription
-
-When creating components dynamically, you can subscribe to outputs programmatically:
-
-```ts
-const componentRef = viewContainerRef.createComponent(CustomSlider);
-
-const subscription = componentRef.instance.valueChanged.subscribe((val) => {
-  console.log('Value changed:', val);
-});
-
-// Clean up manually if needed (Angular cleans up destroyed components automatically)
-subscription.unsubscribe();
-```
-
-## Decorator-based Outputs (@Output)
-
-The legacy API uses the `@Output()` decorator with an `EventEmitter`. It remains supported but is not recommended for new code.
-
-```ts
-import { Component, Output, EventEmitter } from '@angular/core';
-
-@Component({...})
-export class LegacyExample {
-  @Output() valueChanged = new EventEmitter<number>();
-
-  // With alias
-  @Output('customEventName') changed = new EventEmitter<void>();
-}
-```
-
-## Best Practices
-
-- **Prefer `output()`**: Use the function-based `output()` instead of `@Output()` and `EventEmitter`.
-- **Naming**: Use `camelCase` for output names. Avoid prefixing with `on` (e.g., use `valueChanged` instead of `onValueChanged`).
-- **No DOM Bubbling**: Angular custom events do not bubble up the DOM tree like native events.
-- **Avoid Collisions**: Do not choose names that collide with native DOM events (like `click` or `submit`).
+# Outputs (Custom Events)
+
+Outputs allow a child component to emit custom events that a parent component can listen to. Angular recommends using the new `output()` function for modern applications.
+
+## Function-based outputs
+
+Declare outputs using the `output()` function. This returns an `OutputEmitterRef`.
+
+```ts
+import {Component, output} from '@angular/core';
+
+@Component({
+  selector: 'custom-slider',
+  template: `<button (click)="changeValue(50)">Set to 50</button>`,
+})
+export class CustomSlider {
+  // Output without event data
+  panelClosed = output<void>();
+
+  // Output with event data (number)
+  valueChanged = output<number>();
+
+  changeValue(newValue: number) {
+    this.valueChanged.emit(newValue);
+  }
+}
+```
+
+### Usage in Template
+
+Bind to the output event using parentheses `()`. If the event emits data, access it using the special `$event` variable.
+
+```html
+<custom-slider (panelClosed)="savePanelState()" (valueChanged)="logValue($event)" />
+```
+
+## Configuration Options
+
+The `output` function accepts a config object to specify an alias.
+
+```ts
+@Component({...})
+export class CustomSlider {
+  // The event is named 'valueChanged' in the template,
+  // but accessed as 'changed' in the component class.
+  changed = output<number>({ alias: 'valueChanged' });
+}
+```
+
+## Programmatic Subscription
+
+When creating components dynamically, you can subscribe to outputs programmatically:
+
+```ts
+const componentRef = viewContainerRef.createComponent(CustomSlider);
+
+const subscription = componentRef.instance.valueChanged.subscribe((val) => {
+  console.log('Value changed:', val);
+});
+
+// Clean up manually if needed (Angular cleans up destroyed components automatically)
+subscription.unsubscribe();
+```
+
+## Decorator-based Outputs (@Output)
+
+The legacy API uses the `@Output()` decorator with an `EventEmitter`. It remains supported but is not recommended for new code.
+
+```ts
+import { Component, Output, EventEmitter } from '@angular/core';
+
+@Component({...})
+export class LegacyExample {
+  @Output() valueChanged = new EventEmitter<number>();
+
+  // With alias
+  @Output('customEventName') changed = new EventEmitter<void>();
+}
+```
+
+## Best Practices
+
+- **Prefer `output()`**: Use the function-based `output()` instead of `@Output()` and `EventEmitter`.
+- **Naming**: Use `camelCase` for output names. Avoid prefixing with `on` (e.g., use `valueChanged` instead of `onValueChanged`).
+- **No DOM Bubbling**: Angular custom events do not bubble up the DOM tree like native events.
+- **Avoid Collisions**: Do not choose names that collide with native DOM events (like `click` or `submit`).

package/.claude/skills/angular-developer/references/reactive-forms.md

@@ -1,122 +1,122 @@
-# Reactive Forms
-
-Reactive forms provide a model-driven approach to handling form inputs. They are built around observable streams and provide synchronous access to the data model, making them more scalable and testable than template-driven forms.
-
-## Core Classes
-
-Reactive forms are built using these fundamental classes from `@angular/forms`:
-
-- `FormControl`: Manages the value and validity of an individual input.
-- `FormGroup`: Manages a group of controls (an object-like structure).
-- `FormArray`: Manages a numerically indexed array of controls.
-- `FormBuilder`: A service that provides factory methods for creating control instances.
-
-## Setup
-
-Import `ReactiveFormsModule` into your component.
-
-```ts
-import {Component, inject} from '@angular/core';
-import {ReactiveFormsModule, FormGroup, FormControl, Validators, FormBuilder} from '@angular/forms';
-
-@Component({
-  selector: 'app-profile-editor',
-  imports: [ReactiveFormsModule],
-  templateUrl: './profile-editor.component.html',
-})
-export class ProfileEditor {
-  private fb = inject(FormBuilder);
-
-  // Using FormBuilder for concise definition
-  profileForm = this.fb.group({
-    firstName: ['', Validators.required],
-    lastName: [''],
-    address: this.fb.group({
-      street: [''],
-      city: [''],
-    }),
-    aliases: this.fb.array([this.fb.control('')]),
-  });
-
-  onSubmit() {
-    console.warn(this.profileForm.value);
-  }
-}
-```
-
-## Template Binding
-
-Use directives to bind the model to the view:
-
-- `[formGroup]`: Binds a `FormGroup` to a `<form>` or `<div>`.
-- `formControlName`: Binds a named control within a group to an input.
-- `formGroupName`: Binds a nested `FormGroup`.
-- `formArrayName`: Binds a nested `FormArray`.
-- `[formControl]`: Binds a standalone `FormControl`.
-
-```html
-<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
-  <input type="text" formControlName="firstName" />
-
-  <div formGroupName="address">
-    <input type="text" formControlName="street" />
-  </div>
-
-  <div formArrayName="aliases">
-    @for (alias of aliases.controls; track $index) {
-    <input type="text" [formControlName]="$index" />
-    }
-  </div>
-
-  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
-</form>
-```
-
-## Accessing Controls
-
-Use getters for easy access to controls, especially for `FormArray`.
-
-```ts
-get aliases() {
-  return this.profileForm.get('aliases') as FormArray;
-}
-
-addAlias() {
-  this.aliases.push(this.fb.control(''));
-}
-```
-
-## Updating Values
-
-- `patchValue()`: Updates only the specified properties. Fails silently on structural mismatches.
-- `setValue()`: Replaces the entire model. Strictly enforces the form structure.
-
-```ts
-updateProfile() {
-  this.profileForm.patchValue({
-    firstName: 'Nancy',
-    address: { street: '123 Drew Street' }
-  });
-}
-```
-
-## Unified Change Events
-
-Modern Angular (v18+) provides a single `events` observable on all controls to track value, status, pristine, touched, reset, and submit events.
-
-```ts
-import {ValueChangeEvent, StatusChangeEvent} from '@angular/forms';
-
-this.profileForm.events.subscribe((event) => {
-  if (event instanceof ValueChangeEvent) {
-    console.log('New value:', event.value);
-  }
-});
-```
-
-## Manual State Management
-
-- `markAsTouched()` / `markAllAsTouched()`: Useful for showing validation errors on submit.
-- `markAsDirty()` / `markAsPristine()`: Tracks if the value has been modified.
-- `updateValueAndValidity()`: Manually triggers recalculation of value and status.
-- Options `{ emitEvent: false }` or `{ onlySelf: true }` can be passed to most methods to control propagation.
+# Reactive Forms
+
+Reactive forms provide a model-driven approach to handling form inputs. They are built around observable streams and provide synchronous access to the data model, making them more scalable and testable than template-driven forms.
+
+## Core Classes
+
+Reactive forms are built using these fundamental classes from `@angular/forms`:
+
+- `FormControl`: Manages the value and validity of an individual input.
+- `FormGroup`: Manages a group of controls (an object-like structure).
+- `FormArray`: Manages a numerically indexed array of controls.
+- `FormBuilder`: A service that provides factory methods for creating control instances.
+
+## Setup
+
+Import `ReactiveFormsModule` into your component.
+
+```ts
+import {Component, inject} from '@angular/core';
+import {ReactiveFormsModule, FormGroup, FormControl, Validators, FormBuilder} from '@angular/forms';
+
+@Component({
+  selector: 'app-profile-editor',
+  imports: [ReactiveFormsModule],
+  templateUrl: './profile-editor.component.html',
+})
+export class ProfileEditor {
+  private fb = inject(FormBuilder);
+
+  // Using FormBuilder for concise definition
+  profileForm = this.fb.group({
+    firstName: ['', Validators.required],
+    lastName: [''],
+    address: this.fb.group({
+      street: [''],
+      city: [''],
+    }),
+    aliases: this.fb.array([this.fb.control('')]),
+  });
+
+  onSubmit() {
+    console.warn(this.profileForm.value);
+  }
+}
+```
+
+## Template Binding
+
+Use directives to bind the model to the view:
+
+- `[formGroup]`: Binds a `FormGroup` to a `<form>` or `<div>`.
+- `formControlName`: Binds a named control within a group to an input.
+- `formGroupName`: Binds a nested `FormGroup`.
+- `formArrayName`: Binds a nested `FormArray`.
+- `[formControl]`: Binds a standalone `FormControl`.
+
+```html
+<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
+  <input type="text" formControlName="firstName" />
+
+  <div formGroupName="address">
+    <input type="text" formControlName="street" />
+  </div>
+
+  <div formArrayName="aliases">
+    @for (alias of aliases.controls; track $index) {
+    <input type="text" [formControlName]="$index" />
+    }
+  </div>
+
+  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
+</form>
+```
+
+## Accessing Controls
+
+Use getters for easy access to controls, especially for `FormArray`.
+
+```ts
+get aliases() {
+  return this.profileForm.get('aliases') as FormArray;
+}
+
+addAlias() {
+  this.aliases.push(this.fb.control(''));
+}
+```
+
+## Updating Values
+
+- `patchValue()`: Updates only the specified properties. Fails silently on structural mismatches.
+- `setValue()`: Replaces the entire model. Strictly enforces the form structure.
+
+```ts
+updateProfile() {
+  this.profileForm.patchValue({
+    firstName: 'Nancy',
+    address: { street: '123 Drew Street' }
+  });
+}
+```
+
+## Unified Change Events
+
+Modern Angular (v18+) provides a single `events` observable on all controls to track value, status, pristine, touched, reset, and submit events.
+
+```ts
+import {ValueChangeEvent, StatusChangeEvent} from '@angular/forms';
+
+this.profileForm.events.subscribe((event) => {
+  if (event instanceof ValueChangeEvent) {
+    console.log('New value:', event.value);
+  }
+});
+```
+
+## Manual State Management
+
+- `markAsTouched()` / `markAllAsTouched()`: Useful for showing validation errors on submit.
+- `markAsDirty()` / `markAsPristine()`: Tracks if the value has been modified.
+- `updateValueAndValidity()`: Manually triggers recalculation of value and status.
+- Options `{ emitEvent: false }` or `{ onlySelf: true }` can be passed to most methods to control propagation.