@anglr/select 17.2.0 → 18.0.0-beta.20260805050455

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

@@ -1,117 +1,117 @@
-# Components
-
-Angular components are the fundamental building blocks of an application. Each component consists of a TypeScript class with behaviors, an HTML template, and a CSS selector.
-
-## Component Definition
-
-Use the `@Component` decorator to define a component's metadata.
-
-```ts
-@Component({
-  selector: 'app-profile',
-  template: `
-    <img src="profile.jpg" alt="Profile photo" />
-    <button (click)="save()">Save</button>
-  `,
-  styles: `
-    img {
-      border-radius: 50%;
-    }
-  `,
-})
-export class Profile {
-  save() {
-    /* ... */
-  }
-}
-```
-
-## Metadata Options
-
-- `selector`: The CSS selector that identifies this component in templates.
-- `template`: Inline HTML template (preferred for small templates).
-- `templateUrl`: Path to an external HTML file.
-- `styles`: Inline CSS styles.
-- `styleUrl` / `styleUrls`: Path(s) to external CSS file(s).
-- `imports`: Lists the components, directives, or pipes used in this component's template.
-
-## Using Components
-
-To use a component, add it to the `imports` array of the consuming component and use its selector in the template.
-
-```ts
-@Component({
-  selector: 'app-root',
-  imports: [Profile],
-  template: `<app-profile />`,
-})
-export class App {}
-```
-
-## Template Control Flow
-
-Angular uses built-in blocks for conditional rendering and loops.
-
-### Conditional Rendering (`@if`)
-
-Use `@if` to conditionally show content. You can include `@else if` and `@else` blocks.
-
-```html
-@if (user.isAdmin) {
-<admin-dashboard />
-} @else if (user.isModerator) {
-<mod-dashboard />
-} @else {
-<standard-dashboard />
-}
-```
-
-**Result aliasing**: Save the result of the expression for reuse.
-
-```html
-@if (user.settings(); as settings) {
-<p>Theme: {{ settings.theme }}</p>
-}
-```
-
-### Loops (`@for`)
-
-The `@for` block iterates over collections. The `track` expression is **required** for performance and DOM reuse.
-
-```html
-<ul>
-  @for (item of items(); track item.id; let i = $index, total = $count) {
-  <li>{{ i + 1 }}/{{ total }}: {{ item.name }}</li>
-  } @empty {
-  <li>No items to display.</li>
-  }
-</ul>
-```
-
-**Implicit Variables**: `$index`, `$count`, `$first`, `$last`, `$even`, `$odd`.
-
-### Switching Content (`@switch`)
-
-The `@switch` block renders content based on a value. It uses strict equality (`===`) and has **no fallthrough**.
-
-```html
-@switch (status()) { @case ('loading') { <app-spinner /> } @case ('error') { <app-error-msg /> }
-@case ('success') { <app-data-grid /> } @default {
-<p>Unknown status</p>
-} }
-```
-
-**Exhaustive Type Checking**: Use `@default never;` to ensure all cases of a union type are handled.
-
-```html
-@switch (state) { @case ('on') { ... } @case ('off') { ... } @default never; // Errors if a new
-state like 'standby' is added }
-```
-
-## Core Concepts
-
-- **Host Element**: The DOM element that matches the component's selector.
-- **View**: The DOM rendered by the component's template inside the host element.
-- **Standalone**: By default, components are standalone (since Angular 19, `standalone: true` is default). For older versions, `standalone: true` must be explicit or the component must be part of an `NgModule`.
-- **Component Tree**: Angular applications are structured as a tree of components, where each component can host child components.
-- **Component Naming**: Do not add suffixes the `Component` suffix for Component classes (e.g., AppComponent) unless the project has been configured to use that naming configuration.
+# Components
+
+Angular components are the fundamental building blocks of an application. Each component consists of a TypeScript class with behaviors, an HTML template, and a CSS selector.
+
+## Component Definition
+
+Use the `@Component` decorator to define a component's metadata.
+
+```ts
+@Component({
+  selector: 'app-profile',
+  template: `
+    <img src="profile.jpg" alt="Profile photo" />
+    <button (click)="save()">Save</button>
+  `,
+  styles: `
+    img {
+      border-radius: 50%;
+    }
+  `,
+})
+export class Profile {
+  save() {
+    /* ... */
+  }
+}
+```
+
+## Metadata Options
+
+- `selector`: The CSS selector that identifies this component in templates.
+- `template`: Inline HTML template (preferred for small templates).
+- `templateUrl`: Path to an external HTML file.
+- `styles`: Inline CSS styles.
+- `styleUrl` / `styleUrls`: Path(s) to external CSS file(s).
+- `imports`: Lists the components, directives, or pipes used in this component's template.
+
+## Using Components
+
+To use a component, add it to the `imports` array of the consuming component and use its selector in the template.
+
+```ts
+@Component({
+  selector: 'app-root',
+  imports: [Profile],
+  template: `<app-profile />`,
+})
+export class App {}
+```
+
+## Template Control Flow
+
+Angular uses built-in blocks for conditional rendering and loops.
+
+### Conditional Rendering (`@if`)
+
+Use `@if` to conditionally show content. You can include `@else if` and `@else` blocks.
+
+```html
+@if (user.isAdmin) {
+<admin-dashboard />
+} @else if (user.isModerator) {
+<mod-dashboard />
+} @else {
+<standard-dashboard />
+}
+```
+
+**Result aliasing**: Save the result of the expression for reuse.
+
+```html
+@if (user.settings(); as settings) {
+<p>Theme: {{ settings.theme }}</p>
+}
+```
+
+### Loops (`@for`)
+
+The `@for` block iterates over collections. The `track` expression is **required** for performance and DOM reuse.
+
+```html
+<ul>
+  @for (item of items(); track item.id; let i = $index, total = $count) {
+  <li>{{ i + 1 }}/{{ total }}: {{ item.name }}</li>
+  } @empty {
+  <li>No items to display.</li>
+  }
+</ul>
+```
+
+**Implicit Variables**: `$index`, `$count`, `$first`, `$last`, `$even`, `$odd`.
+
+### Switching Content (`@switch`)
+
+The `@switch` block renders content based on a value. It uses strict equality (`===`) and has **no fallthrough**.
+
+```html
+@switch (status()) { @case ('loading') { <app-spinner /> } @case ('error') { <app-error-msg /> }
+@case ('success') { <app-data-grid /> } @default {
+<p>Unknown status</p>
+} }
+```
+
+**Exhaustive Type Checking**: Use `@default never;` to ensure all cases of a union type are handled.
+
+```html
+@switch (state) { @case ('on') { ... } @case ('off') { ... } @default never; // Errors if a new
+state like 'standby' is added }
+```
+
+## Core Concepts
+
+- **Host Element**: The DOM element that matches the component's selector.
+- **View**: The DOM rendered by the component's template inside the host element.
+- **Standalone**: By default, components are standalone (since Angular 19, `standalone: true` is default). For older versions, `standalone: true` must be explicit or the component must be part of an `NgModule`.
+- **Component Tree**: Angular applications are structured as a tree of components, where each component can host child components.
+- **Component Naming**: Do not add suffixes the `Component` suffix for Component classes (e.g., AppComponent) unless the project has been configured to use that naming configuration.

package/.claude/skills/angular-developer/references/creating-services.md

@@ -1,97 +1,97 @@
-# Creating and Using Services
-
-Services in Angular are reusable pieces of code that handle data fetching, business logic, or state management that multiple components or other services need to access.
-
-## Creating a Service
-
-You can generate a service using the Angular CLI:
-
-```bash
-ng generate service my-data
-```
-
-Or you can manually create a TypeScript class and decorate it with `@Injectable()`.
-
-```ts
-import {Injectable} from '@angular/core';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class BasicDataStore {
-  private data: string[] = [];
-
-  addData(item: string): void {
-    this.data.push(item);
-  }
-
-  getData(): string[] {
-    return [...this.data];
-  }
-}
-```
-
-### The `providedIn: 'root'` Option
-
-Using `providedIn: 'root'` is the recommended approach for most services. It tells Angular to:
-
-- **Create a single instance (singleton)** for the entire application.
-- **Make it available everywhere** automatically, without needing to list it in any `providers` array.
-- **Enable tree-shaking**, meaning the service is only included in the final JavaScript bundle if it is actually injected somewhere.
-
-## Injecting a Service
-
-Once a service is created, you can inject it into components, directives, or other services using the `inject()` function.
-
-### Injecting into a Component
-
-```ts
-import {Component, inject} from '@angular/core';
-import {BasicDataStore} from './basic-data-store.service';
-
-@Component({
-  selector: 'app-example',
-  template: `
-    <div>
-      <p>Data items: {{ dataStore.getData().length }}</p>
-      <button (click)="dataStore.addData('New Item')">Add Item</button>
-    </div>
-  `,
-})
-export class Example {
-  // Inject the service as a class field
-  dataStore = inject(BasicDataStore);
-}
-```
-
-### Injecting into Another Service
-
-Services can inject other services in the exact same way.
-
-```ts
-import {Injectable, inject} from '@angular/core';
-import {AdvancedDataStore} from './advanced-data-store.service';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class BasicDataStore {
-  // Injecting another service
-  private advancedDataStore = inject(AdvancedDataStore);
-
-  private data: string[] = [];
-
-  getData(): string[] {
-    // Combine data from this service and the injected service
-    return [...this.data, ...this.advancedDataStore.getData()];
-  }
-}
-```
-
-## Advanced Service Patterns
-
-While `providedIn: 'root'` covers most scenarios, you may sometimes need:
-
-- **Component-specific instances**: If a component needs its own isolated instance of a service, provide it directly in the component's `@Component({ providers: [MyService] })` array.
-- **Factory providers**: For dynamic creation.
-- **Value providers**: For injecting configuration objects.
+# Creating and Using Services
+
+Services in Angular are reusable pieces of code that handle data fetching, business logic, or state management that multiple components or other services need to access.
+
+## Creating a Service
+
+You can generate a service using the Angular CLI:
+
+```bash
+ng generate service my-data
+```
+
+Or you can manually create a TypeScript class and decorate it with `@Injectable()`.
+
+```ts
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BasicDataStore {
+  private data: string[] = [];
+
+  addData(item: string): void {
+    this.data.push(item);
+  }
+
+  getData(): string[] {
+    return [...this.data];
+  }
+}
+```
+
+### The `providedIn: 'root'` Option
+
+Using `providedIn: 'root'` is the recommended approach for most services. It tells Angular to:
+
+- **Create a single instance (singleton)** for the entire application.
+- **Make it available everywhere** automatically, without needing to list it in any `providers` array.
+- **Enable tree-shaking**, meaning the service is only included in the final JavaScript bundle if it is actually injected somewhere.
+
+## Injecting a Service
+
+Once a service is created, you can inject it into components, directives, or other services using the `inject()` function.
+
+### Injecting into a Component
+
+```ts
+import {Component, inject} from '@angular/core';
+import {BasicDataStore} from './basic-data-store.service';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <div>
+      <p>Data items: {{ dataStore.getData().length }}</p>
+      <button (click)="dataStore.addData('New Item')">Add Item</button>
+    </div>
+  `,
+})
+export class Example {
+  // Inject the service as a class field
+  dataStore = inject(BasicDataStore);
+}
+```
+
+### Injecting into Another Service
+
+Services can inject other services in the exact same way.
+
+```ts
+import {Injectable, inject} from '@angular/core';
+import {AdvancedDataStore} from './advanced-data-store.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BasicDataStore {
+  // Injecting another service
+  private advancedDataStore = inject(AdvancedDataStore);
+
+  private data: string[] = [];
+
+  getData(): string[] {
+    // Combine data from this service and the injected service
+    return [...this.data, ...this.advancedDataStore.getData()];
+  }
+}
+```
+
+## Advanced Service Patterns
+
+While `providedIn: 'root'` covers most scenarios, you may sometimes need:
+
+- **Component-specific instances**: If a component needs its own isolated instance of a service, provide it directly in the component's `@Component({ providers: [MyService] })` array.
+- **Factory providers**: For dynamic creation.
+- **Value providers**: For injecting configuration objects.

package/.claude/skills/angular-developer/references/data-resolvers.md

@@ -1,69 +1,69 @@
-# Data Resolvers
-
-Data resolvers fetch data before a route activates, ensuring components have the necessary data upon rendering.
-
-## Creating a Resolver
-
-Implement the `ResolveFn` type.
-
-```ts
-export const userResolver: ResolveFn<User> = (route, state) => {
-  const userService = inject(UserService);
-  const id = route.paramMap.get('id')!;
-  return userService.getUser(id);
-};
-```
-
-## Configuring the Route
-
-Add the resolver under the `resolve` key.
-
-```ts
-{
-  path: 'user/:id',
-  component: UserProfile,
-  resolve: {
-    user: userResolver
-  }
-}
-```
-
-## Accessing Resolved Data
-
-### 1. Via `ActivatedRoute` (Traditional)
-
-```ts
-private route = inject(ActivatedRoute);
-data = toSignal(this.route.data);
-user = computed(() => this.data().user);
-```
-
-### 2. Via Component Inputs (Modern)
-
-Enable `withComponentInputBinding()` in `provideRouter` to pass resolved data directly to `@Input` or `input()`.
-
-```ts
-// app.config.ts
-provideRouter(routes, withComponentInputBinding());
-
-// component.ts
-user = input.required<User>();
-```
-
-## Error Handling
-
-Navigation is blocked if a resolver fails.
-
-- Use `withNavigationErrorHandler` for global handling.
-- Use `catchError` within the resolver to return a `RedirectCommand` or fallback data.
-
-```ts
-return userService
-  .get(id)
-  .pipe(catchError(() => of(new RedirectCommand(router.parseUrl('/error')))));
-```
-
-## Best Practices
-
-- **Keep it lightweight**: Fetch only critical data.
-- **Provide feedback**: Listen to router events to show a global loading bar during navigation, as the UI stays on the old page until the resolver finishes.
+# Data Resolvers
+
+Data resolvers fetch data before a route activates, ensuring components have the necessary data upon rendering.
+
+## Creating a Resolver
+
+Implement the `ResolveFn` type.
+
+```ts
+export const userResolver: ResolveFn<User> = (route, state) => {
+  const userService = inject(UserService);
+  const id = route.paramMap.get('id')!;
+  return userService.getUser(id);
+};
+```
+
+## Configuring the Route
+
+Add the resolver under the `resolve` key.
+
+```ts
+{
+  path: 'user/:id',
+  component: UserProfile,
+  resolve: {
+    user: userResolver
+  }
+}
+```
+
+## Accessing Resolved Data
+
+### 1. Via `ActivatedRoute` (Traditional)
+
+```ts
+private route = inject(ActivatedRoute);
+data = toSignal(this.route.data);
+user = computed(() => this.data().user);
+```
+
+### 2. Via Component Inputs (Modern)
+
+Enable `withComponentInputBinding()` in `provideRouter` to pass resolved data directly to `@Input` or `input()`.
+
+```ts
+// app.config.ts
+provideRouter(routes, withComponentInputBinding());
+
+// component.ts
+user = input.required<User>();
+```
+
+## Error Handling
+
+Navigation is blocked if a resolver fails.
+
+- Use `withNavigationErrorHandler` for global handling.
+- Use `catchError` within the resolver to return a `RedirectCommand` or fallback data.
+
+```ts
+return userService
+  .get(id)
+  .pipe(catchError(() => of(new RedirectCommand(router.parseUrl('/error')))));
+```
+
+## Best Practices
+
+- **Keep it lightweight**: Fetch only critical data.
+- **Provide feedback**: Listen to router events to show a global loading bar during navigation, as the UI stays on the old page until the resolver finishes.