@anglr/select 16.0.3 → 16.0.4-beta.20260511085948

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

@@ -0,0 +1,106 @@
+# Angular CLI MCP Server
+
+The Angular CLI includes a Model Context Protocol (MCP) server that enables AI assistants (like Cursor, Gemini CLI, JetBrains AI, etc.) to interact directly with the Angular CLI. It provides tools for project analysis, guided migrations, and running builds/tests.
+
+## Available Tools (Default)
+
+When the MCP server is enabled, AI agents have access to the following tools:
+
+| Name                        | Description                                                                                               |
+| :-------------------------- | :-------------------------------------------------------------------------------------------------------- |
+| `ai_tutor`                  | Launches an interactive AI-powered Angular tutor.                                                         |
+| `get_best_practices`        | Retrieves the Angular Best Practices Guide (crucial for standalone components, typed forms, etc.).        |
+| `list_projects`             | Lists all applications and libraries in the workspace by reading `angular.json`.                          |
+| `onpush_zoneless_migration` | Analyzes code and provides a plan to migrate it to `OnPush` change detection (prerequisite for zoneless). |
+| `search_documentation`      | Searches the official documentation at `https://angular.dev`.                                             |
+
+## Experimental Tools
+
+Some tools must be enabled explicitly using the `--experimental-tool` (or `-E`) flag.
+
+| Name                       | Description                                                           |
+| :------------------------- | :-------------------------------------------------------------------- |
+| `build`                    | Performs a one-off build using `ng build`.                            |
+| `devserver.start`          | Asynchronously starts a dev server (`ng serve`). Returns immediately. |
+| `devserver.stop`           | Stops the dev server.                                                 |
+| `devserver.wait_for_build` | Returns the logs of the most recent build in a running dev server.    |
+| `e2e`                      | Executes end-to-end tests.                                            |
+| `test`                     | Runs the project's unit tests.                                        |
+
+## Configuration
+
+To use the MCP server, you configure your host environment (IDE or CLI) to run `npx @angular/cli mcp`.
+
+### Antigravity IDE
+
+Create a file named `.antigravity/mcp.json` in your project's root:
+
+```json
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+### Gemini CLI
+
+Create `.gemini/settings.json` in the project root:
+
+```json
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+### Cursor
+
+Create `.cursor/mcp.json` in the project root (or globally at `~/.cursor/mcp.json`):
+
+```json
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+### VS Code
+
+Create `.vscode/mcp.json`:
+
+```json
+{
+  "servers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}
+```
+
+## Command Options
+
+You can pass arguments to the MCP server in the `args` array of your configuration:
+
+- `--read-only`: Only registers tools that do not modify the project.
+- `--local-only`: Only registers tools that do not require an internet connection.
+- `--experimental-tool` (`-E`): Enables specific experimental tools (e.g., `-E build`, `-E devserver`).
+
+Example for read-only mode with experimental tools enabled:
+
+```json
+"args": ["-y", "@angular/cli", "mcp", "--read-only", "-E", "build", "-E", "test"]
+```

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

@@ -0,0 +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**.

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

@@ -0,0 +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`).

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

@@ -0,0 +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`).

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

@@ -0,0 +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.

package/.claude/skills/angular-developer/references/rendering-strategies.md

@@ -0,0 +1,44 @@
+# Rendering Strategies
+
+Angular supports multiple rendering strategies to optimize for SEO, performance, and interactivity.
+
+## 1. Client-Side Rendering (CSR)
+
+**Default Strategy.** Content is rendered entirely in the browser.
+
+- **Use case**: Interactive dashboards, internal tools.
+- **Pros**: Simplest to configure, low server cost.
+- **Cons**: Poor SEO, slower initial content visibility (must wait for JS).
+
+## 2. Static Site Generation (SSG / Prerendering)
+
+Content is pre-rendered into static HTML files at **build time**.
+
+- **Use case**: Marketing pages, blogs, documentation.
+- **Pros**: Fastest initial load, excellent SEO, CDN-friendly.
+- **Cons**: Requires rebuild for content updates, not for user-specific data.
+
+## 3. Server-Side Rendering (SSR)
+
+Content is rendered on the server for the **initial request**. Subsequent navigations happen client-side (SPA style).
+
+- **Use case**: E-commerce product pages, news sites, personalized dynamic content.
+- **Pros**: Excellent SEO, fast initial content visibility.
+- **Cons**: Requires a server (Node.js), higher server cost/latency.
+
+## Hydration
+
+Hydration is the process of making server-rendered HTML interactive in the browser.
+
+- **Full Hydration**: The entire app becomes interactive at once.
+- **Incremental Hydration**: (Advanced) Parts become interactive as needed using `@defer` blocks.
+- **Event Replay**: Captures and replays user events that happened before hydration finished.
+
+## Decision Matrix
+
+| Requirement                     | Strategy             |
+| :------------------------------ | :------------------- |
+| **SEO + Static Content**        | SSG                  |
+| **SEO + Dynamic Content**       | SSR                  |
+| **No SEO + High Interactivity** | CSR                  |
+| **Mixed**                       | Hybrid (Route-based) |

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

@@ -0,0 +1,77 @@
+# Async Reactivity with `resource`
+
+> [!IMPORTANT]
+> The `resource` API is currently experimental in Angular.
+
+A `Resource` incorporates asynchronous data fetching into Angular's signal-based reactivity. It executes an async loader function whenever its dependencies change, exposing the status and result as synchronous signals.
+
+## Basic Usage
+
+The `resource` function accepts an options object with two main properties:
+
+1. `params`: A reactive computation (like `computed`). When signals read here change, the resource re-fetches.
+2. `loader`: An async function that fetches data based on the parameters.
+
+```ts
+import { Component, resource, signal, computed } from '@angular/core';
+
+@Component({...})
+export class UserProfile {
+  userId = signal('123');
+
+  userResource = resource({
+    // Reactively tracking userId
+    params: () => ({ id: this.userId() }),
+
+    // Executes whenever params change
+    loader: async ({ params, abortSignal }) => {
+      const response = await fetch(`/api/users/${params.id}`, { signal: abortSignal });
+      if (!response.ok) throw new Error('Network error');
+      return response.json();
+    }
+  });
+
+  // Use the resource value in computed signals
+  userName = computed(() => {
+    if (this.userResource.hasValue()) {
+      return this.userResource.value()?.name;
+    } else {
+      return 'Loading...';
+    }
+  });
+}
+```
+
+## Aborting Requests
+
+If the `params` signal changes while a previous loader is still running, the `Resource` will attempt to abort the outstanding request using the provided `abortSignal`. **Always pass `abortSignal` to your `fetch` calls.**
+
+## Reloading Data
+
+You can imperatively force the resource to re-run the loader without the params changing by calling `.reload()`.
+
+```ts
+this.userResource.reload();
+```
+
+## Resource Status Signals
+
+The `Resource` object provides several signals to read its current state:
+
+- `value()`: The resolved data, or `undefined`.
+- `hasValue()`: Type-guard boolean. `true` if a value exists.
+- `isLoading()`: Boolean indicating if the loader is currently running.
+- `error()`: The error thrown by the loader, or `undefined`.
+- `status()`: A string constant representing the exact state (`'idle'`, `'loading'`, `'resolved'`, `'error'`, `'reloading'`, `'local'`).
+
+## Local Mutation
+
+You can optimistically update the resource's value directly. This changes the status to `'local'`.
+
+```ts
+this.userResource.value.set({name: 'Optimistic Update'});
+```
+
+## Reactive Data Fetching with `httpResource`
+
+If you are using Angular's `HttpClient`, prefer using `httpResource`. It is a specialized wrapper that leverages the Angular HTTP stack (including interceptors) while providing the same signal-based resource API.

package/.claude/skills/angular-developer/references/route-animations.md

@@ -0,0 +1,56 @@
+# Route Transition Animations
+
+Angular Router supports the browser's **View Transitions API** for smooth visual transitions between routes.
+
+## Enabling View Transitions
+
+Add `withViewTransitions()` to your router configuration.
+
+```ts
+provideRouter(routes, withViewTransitions());
+```
+
+This is a **progressive enhancement**. In browsers that don't support the API, the router will still work but without the transition animation.
+
+## How it Works
+
+1. Browser takes a screenshot of the old state.
+2. Router updates the DOM (activates new component).
+3. Browser takes a screenshot of the new state.
+4. Browser animates between the two states.
+
+## Customizing with CSS
+
+Transitions are customized in **global CSS files** (not component-scoped CSS).
+
+Use the `::view-transition-old()` and `::view-transition-new()` pseudo-elements.
+
+```css
+/* Example: Cross-fade + Slide */
+::view-transition-old(root) {
+  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
+}
+::view-transition-new(root) {
+  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
+}
+```
+
+## Advanced Control
+
+Use `onViewTransitionCreated` to skip transitions or customize behavior based on the navigation context.
+
+```ts
+withViewTransitions({
+  onViewTransitionCreated: ({transition, from, to}) => {
+    // Skip animation for specific routes
+    if (to.url === '/no-animation') {
+      transition.skipTransition();
+    }
+  },
+});
+```
+
+## Best Practices
+
+- **Global Styles**: Always define transition animations in `styles.css` to avoid view encapsulation issues.
+- **View Transition Names**: Assign unique `view-transition-name` to elements that should transition smoothly across routes (e.g., a header image).

package/.claude/skills/angular-developer/references/route-guards.md

@@ -0,0 +1,52 @@
+# Route Guards
+
+Route guards control whether a user can navigate to or leave a route.
+
+## Types of Guards
+
+- **`CanActivate`**: Can the user access this route? (e.g., Auth check).
+- **`CanActivateChild`**: Can the user access children of this route?
+- **`CanDeactivate`**: Can the user leave this route? (e.g., Unsaved changes).
+- **`CanMatch`**: Should this route even be considered for matching? (e.g., Feature flags). If it returns `false`, the router continues checking other routes.
+
+## Creating a Guard
+
+Guards are typically functional since Angular 15.
+
+```ts
+export const authGuard: CanActivateFn = (route, state) => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  if (authService.isLoggedIn()) {
+    return true;
+  }
+
+  // Redirect to login
+  return router.parseUrl('/login');
+};
+```
+
+## Applying Guards
+
+Add them to the route configuration as an array. They execute in order.
+
+```ts
+{
+  path: 'admin',
+  component: Admin,
+  canActivate: [authGuard],
+  canActivateChild: [adminChildGuard],
+  canDeactivate: [unsavedChangesGuard]
+}
+```
+
+## Return Values
+
+- `boolean`: `true` to allow, `false` to block.
+- `UrlTree` or `RedirectCommand`: Redirect to a different route.
+- `Observable` or `Promise`: Resolves to the above types.
+
+## Security Note
+
+**Client-side guards are NOT a substitute for server-side security.** Always verify permissions on the server.

package/.claude/skills/angular-developer/references/router-lifecycle.md

@@ -0,0 +1,45 @@
+# Router Lifecycle and Events
+
+Angular Router emits events through the `Router.events` observable, allowing you to track the navigation lifecycle from start to finish.
+
+## Common Router Events (Chronological)
+
+1. **`NavigationStart`**: Navigation begins.
+2. **`RoutesRecognized`**: Router matches the URL to a route.
+3. **`GuardsCheckStart` / `End`**: Evaluation of `canActivate`, `canMatch`, etc.
+4. **`ResolveStart` / `End`**: Data resolution phase (fetching data via resolvers).
+5. **`NavigationEnd`**: Navigation completed successfully.
+6. **`NavigationCancel`**: Navigation canceled (e.g., guard returned `false`).
+7. **`NavigationError`**: Navigation failed (e.g., error in resolver).
+
+## Subscribing to Events
+
+Inject the `Router` and filter the `events` observable.
+
+```ts
+import {Router, NavigationStart, NavigationEnd} from '@angular/router';
+
+export class MyService {
+  private router = inject(Router);
+
+  constructor() {
+    this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe((event) => {
+      console.log('Navigated to:', event.url);
+    });
+  }
+}
+```
+
+## Debugging
+
+Enable detailed console logging of all routing events during application bootstrap.
+
+```ts
+provideRouter(routes, withDebugTracing());
+```
+
+## Common Use Cases
+
+- **Loading Indicators**: Show a spinner when `NavigationStart` fires and hide it on `NavigationEnd`/`Cancel`/`Error`.
+- **Analytics**: Track page views by listening for `NavigationEnd`.
+- **Scroll Management**: Respond to `Scroll` events for custom scroll behavior.