Title
+//Main content
+// +//No items found
+} + + +@switch (status()) { + @case ('pending') { Pending } + @case ('active') { Active } + @default { Unknown } +} +``` + +## Class and Style Bindings + +Do NOT use `ngClass` or `ngStyle`. Use direct bindings: + +```html + +Single class
+Class string
+
+
+Styled text
+With unit
+```
+
+## Images
+
+Use `NgOptimizedImage` for static images:
+
+```typescript
+import { NgOptimizedImage } from '@angular/common';
+
+@Component({
+ imports: [NgOptimizedImage],
+ template: `
+
+ @for (image of images(); track image.id) {
+
+ `,
+})
+export class Gallery {
+ images = input.required
+ @for (tab of tabs(); track tab.label()) {
+
+ }
+
+
+
+ `,
+})
+export class Tabs {
+ // Query all projected Tab children
+ tabs = contentChildren(Tab);
+
+ // Query single projected element
+ header = contentChild('tabHeader');
+
+ activeTab = signalLoading chart...
+ } @loading (minimum 500ms) {
+ Failed to load chart
+ } + `, +}) +export class Dashboard { + chartData = input.required
+
+ } @else {
+ Something went wrong
+ +
+
+ `,
+})
+export class Tabs {}
+```
+
+## Dynamic Providers
+
+### Feature Flags
+
+```typescript
+export const FEATURE_FLAGS = new InjectionTokenHighlighted text
+// Usage:Default yellow highlight
+``` + +### Using host Property + +Prefer `host` over `@HostBinding`/`@HostListener`: + +```typescript +@Directive({ + selector: '[appTooltip]', + host: { + '(mouseenter)': 'show()', + '(mouseleave)': 'hide()', + '[attr.aria-describedby]': 'tooltipId', + }, +}) +export class Tooltip { + text = input.required...
+```
+
+### Keyboard Shortcuts
+
+```typescript
+@Directive({
+ selector: '[appShortcut]',
+ host: {
+ '(document:keydown)': 'onKeydown($event)',
+ },
+})
+export class Shortcut {
+ key = input.required
+//
+```
+
+### Lazy Render Directive
+
+Defer rendering until condition is met (one-time):
+
+```typescript
+@Directive({
+ selector: '[appLazyRender]',
+})
+export class LazyRender {
+ private templateRef = inject(TemplateRefModal content
+//
+//
+```
+
+### Template Outlet with Context
+
+```typescript
+interface TemplateContext{{ i }}: {{ item.name }}
+//
+// @for (item of items(); track item.id) {
+//
+```
+
+## Resize Observer
+
+```typescript
+@Directive({
+ selector: '[appResize]',
+})
+export class Resize implements OnDestroy {
+ private el = inject(ElementRef{{ item.name }}
+// }
+//
+// Loading...
+//
+//
+// Size: {{ resize.width() }}x{{ resize.height() }}
+//
+```
+
+## Drag and Drop
+
+```typescript
+@Directive({
+ selector: '[appDraggable]',
+ host: {
+ 'draggable': 'true',
+ '[class.dragging]': 'isDragging()',
+ '(dragstart)': 'onDragStart($event)',
+ '(dragend)': 'onDragEnd($event)',
+ },
+})
+export class Draggable {
+ data = inputDrag me
+// Drop here
+```
+
+## Permission Directive
+
+```typescript
+@Directive({
+ selector: '[appHasPermission]',
+})
+export class HasPermission {
+ private templateRef = inject(TemplateRefEdit & Delete
+```
+
+## Export Directive Reference
+
+```typescript
+@Directive({
+ selector: '[appToggle]',
+ exportAs: 'appToggle',
+})
+export class Toggle {
+ isOpen = signal(false);
+
+ toggle() {
+ this.isOpen.update(v => !v);
+ }
+
+ open() {
+ this.isOpen.set(true);
+ }
+
+ close() {
+ this.isOpen.set(false);
+ }
+}
+
+// Usage:
+//
+//
+// @if (toggle.isOpen()) {
+//
+```
diff --git a/skills/angular-forms/SKILL.md b/skills/angular-forms/SKILL.md
new file mode 100644
index 0000000..f97d54a
--- /dev/null
+++ b/skills/angular-forms/SKILL.md
@@ -0,0 +1,446 @@
+---
+name: angular-forms
+description: >-
+ Build signal-based forms in Angular v21+ using the new Signal Forms API. Use
+ for form creation with automatic two-way binding, schema-based validation,
+ field state management, and dynamic forms. Triggers on form implementation,
+ adding validation, creating multi-step forms, or building forms with
+ conditional fields. Signal Forms are experimental but recommended for new
+ Angular projects. Don't use for template-driven forms without signals or
+ third-party form libraries like Formly or ngx-formly.
+metadata:
+ category: development
+ source:
+ repository: 'https://github.com/analogjs/angular-skills'
+ path: skills/angular-forms
+---
+
+# Angular Signal Forms
+
+Build type-safe, reactive forms using Angular's Signal Forms API. Signal Forms provide automatic two-way binding, schema-based validation, and reactive field state.
+
+**Note:** Signal Forms are experimental in Angular v21. For production apps requiring stability, see [references/form-patterns.md](references/form-patterns.md) for Reactive Forms patterns.
+
+## Basic Setup
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { form, FormField, required, email } from '@angular/forms/signals';
+
+interface LoginData {
+ email: string;
+ password: string;
+}
+
+@Component({
+ selector: 'app-login',
+ imports: [FormField],
+ template: `
+
+ `,
+})
+export class Login {
+ // Form model - a writable signal
+ loginModel = signalContent
+// }
+//
+
+
+
+
+ }
+
+ `,
+})
+export class Order {
+ orderModel = signal-
+ @for (error of form.email().errors(); track error) {
+
- {{ error.message }} + } +
+ @if (form.controls.email.errors?.['required']) {
+ Email is required
+ }
+ @if (form.controls.email.errors?.['email']) {
+ Invalid email format
+ }
+
+ }
+ `,
+})
+export class Form {
+ // Helper for cleaner templates
+ hasError(controlName: string, errorKey: string): boolean {
+ const control = this.form.get(controlName);
+ return control?.hasError(errorKey) && control?.touched || false;
+ }
+}
+```
+
+## Form Submission Pattern
+
+```typescript
+@Component({
+ template: `
+
+ `,
+})
+export class Form {
+ isSubmitting = false;
+
+ async onSubmit() {
+ if (this.form.invalid) {
+ this.form.markAllAsTouched();
+ return;
+ }
+
+ this.isSubmitting = true;
+ try {
+ await this.api.submit(this.form.getRawValue());
+ this.form.reset();
+ } catch (error) {
+ // Handle error
+ } finally {
+ this.isSubmitting = false;
+ }
+ }
+}
+```
diff --git a/skills/angular-forms/references/formvalueControl-patterns.md b/skills/angular-forms/references/formvalueControl-patterns.md
new file mode 100644
index 0000000..ef9f4af
--- /dev/null
+++ b/skills/angular-forms/references/formvalueControl-patterns.md
@@ -0,0 +1,110 @@
+# Angular Signal Forms - ( FormValueControl )
+
+## Table of Contents
+- [Signal Form FormValueControl](#formValueControl)
+
+## Signal Forms FormValueControl
+
+``` typescript
+
+interface Rating {
+ rating : number
+}
+
+import { form, FormField, FormValueControl, ValidationError, WithOptionalField } from '@angular/forms/signals';
+import { MatIconModule } from '@angular/material/icon';
+import { MatError } from '@angular/material/form-field';
+
+
+@Component({
+ selector: 'app-rating',
+ imports : [MatIconModule,MatError],
+ template: `
+
+ `,
+ styles: ``,
+})
+export class Rating implements FormValueControlLoading...
+ } @else if (userResource.error()) { +Error: {{ userResource.error()?.message }}
+ + } @else if (userResource.hasValue()) { +{{ userResource.value().name }}
+{{ userResource.value().email }}
+ } + `, +}) +export class UserProfile { + userId = signal('123'); + + // Reactive HTTP resource - refetches when userId changes + userResource = httpResource
+
+ }
+ `,
+})
+export class UserCmpt {
+ userResource = httpResource{{ getErrorMessage(error) }}
+ +Enter a search term
+ } + @case ('loading') { +-
+ @for (user of usersResource.value().data; track user.id) {
+
- {{ user.name }} + } +
+
+
+ Page {{ page() }} of {{ usersResource.value().totalPages }}
+
+
+
+ }
+ `,
+})
+export class UsersList {
+ page = signal(1);
+ pageSize = signal(10);
+
+ usersResource = httpResource-
+ @for (user of allUsers(); track user.id) {
+
- {{ user.name }} + } +
User {{ id() }}
+ `, +}) +export class UserDetail { + // Route param as signal input + id = input.requiredProducts
+
+ @for (tab of tabs; track tab.path) {
+
+ {{ tab.label }}
+
+ }
+
+
+
+ `,
+})
+export class TabsLayout {
+ tabs = [
+ { path: './', label: 'Overview', exact: true },
+ { path: 'details', label: 'Details', exact: false },
+ { path: 'settings', label: 'Settings', exact: false },
+ ];
+}
+
+// Routes
+{
+ path: 'account',
+ component: TabsLayout,
+ children: [
+ { path: '', component: AccountOverview },
+ { path: 'details', component: AccountDetails },
+ { path: 'settings', component: AccountSettings },
+ ],
+}
+```
+
+## Modal Routes
+
+Using auxiliary outlets for modals:
+
+```typescript
+// Routes
+export const routes: Routes = [
+ { path: 'products', component: ProductList },
+ { path: 'product-modal/:id', component: ProductModal, outlet: 'modal' },
+];
+
+// App template
+@Component({
+ template: `
+
+
+ `,
+ animations: [
+ trigger('routeAnimations', [
+ transition('HomePage <=> AboutPage', [
+ style({ position: 'relative' }),
+ query(':enter, :leave', [
+ style({
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ }),
+ ]),
+ query(':enter', [style({ left: '-100%' })]),
+ query(':leave', animateChild()),
+ group([
+ query(':leave', [animate('300ms ease-out', style({ left: '100%' }))]),
+ query(':enter', [animate('300ms ease-out', style({ left: '0%' }))]),
+ ]),
+ ]),
+ ]),
+ ],
+})
+export class AppMain {
+ getRouteAnimationData() {
+ return this.route.firstChild?.snapshot.data['animation'];
+ }
+}
+```
+
+## Scroll Position Restoration
+
+```typescript
+// app.config.ts
+import {
+ provideRouter,
+ withInMemoryScrolling,
+ withRouterConfig
+} from '@angular/router';
+
+provideRouter(
+ routes,
+ withInMemoryScrolling({
+ scrollPositionRestoration: 'enabled', // or 'top'
+ anchorScrolling: 'enabled',
+ }),
+ withRouterConfig({
+ onSameUrlNavigation: 'reload',
+ })
+)
+```
diff --git a/skills/angular-signals/SKILL.md b/skills/angular-signals/SKILL.md
new file mode 100644
index 0000000..b61e7b4
--- /dev/null
+++ b/skills/angular-signals/SKILL.md
@@ -0,0 +1,312 @@
+---
+name: angular-signals
+description: >-
+ Implement signal-based reactive state management in Angular v20+. Use for
+ creating reactive state with signal(), derived state with computed(),
+ dependent state with linkedSignal(), and side effects with effect(). Triggers
+ on state management questions, converting from BehaviorSubject/Observable
+ patterns to signals, or implementing reactive data flows.
+metadata:
+ category: development
+ source:
+ repository: 'https://github.com/analogjs/angular-skills'
+ path: skills/angular-signals
+---
+
+# Angular Signals
+
+Signals are Angular's reactive primitive for state management. They provide synchronous, fine-grained reactivity.
+
+## Core Signal APIs
+
+### signal() - Writable State
+
+```typescript
+import { signal } from '@angular/core';
+
+// Create writable signal
+const count = signal(0);
+
+// Read value
+console.log(count()); // 0
+
+// Set new value
+count.set(5);
+
+// Update based on current value
+count.update(c => c + 1);
+
+// With explicit type
+const user = signal-
+ @for (todo of filteredTodos(); track todo.id) {
+
- + {{ todo.text }} + + + } +
{{ remaining() }} remaining
+ `, +}) +export class TodoList { + // State + todos = signalLoading comments...
+ }
+
+
+ @defer (hydrate on interaction) {
+ Current time: {{ currentTime }}
`, +}) +export class Time { + // BAD: Different value on server and client + currentTime = new Date().toLocaleTimeString(); +} + +// Solution: Use afterNextRender or skip SSR +@Component({ + template: `Current time: {{ currentTime() }}
`, +}) +export class Time { + currentTime = signal(''); + + constructor() { + afterNextRender(() => { + this.currentTime.set(new Date().toLocaleTimeString()); + }); + } +} +``` + +### Skip Hydration for Dynamic Content + +```typescript +@Component({ + template: ` + +
+
+ `,
+})
+export class Page {}
+```
+
+### Debug Hydration Issues
+
+```typescript
+// Enable hydration debugging in development
+import { provideClientHydration, withNoDomReuse } from '@angular/platform-browser';
+
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideClientHydration(
+ // Disable DOM reuse to see hydration errors clearly
+ ...(isDevMode() ? [withNoDomReuse()] : [])
+ ),
+ ],
+};
+```
+
+## SEO Optimization
+
+### Meta Tags Service
+
+```typescript
+import { Injectable, inject } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { DOCUMENT } from '@angular/common';
+
+@Injectable({ providedIn: 'root' })
+export class Seo {
+ private meta = inject(Meta);
+ private title = inject(Title);
+ private document = inject(DOCUMENT);
+
+ updateMetaTags(config: {
+ title: string;
+ description: string;
+ image?: string;
+ url?: string;
+ type?: string;
+ }) {
+ // Basic meta
+ this.title.setTitle(config.title);
+ this.meta.updateTag({ name: 'description', content: config.description });
+
+ // Open Graph
+ this.meta.updateTag({ property: 'og:title', content: config.title });
+ this.meta.updateTag({ property: 'og:description', content: config.description });
+ this.meta.updateTag({ property: 'og:type', content: config.type || 'website' });
+
+ if (config.image) {
+ this.meta.updateTag({ property: 'og:image', content: config.image });
+ }
+
+ if (config.url) {
+ this.meta.updateTag({ property: 'og:url', content: config.url });
+ this.updateCanonicalUrl(config.url);
+ }
+
+ // Twitter Card
+ this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
+ this.meta.updateTag({ name: 'twitter:title', content: config.title });
+ this.meta.updateTag({ name: 'twitter:description', content: config.description });
+
+ if (config.image) {
+ this.meta.updateTag({ name: 'twitter:image', content: config.image });
+ }
+ }
+
+ private updateCanonicalUrl(url: string) {
+ let link: HTMLLinkElement | null = this.document.querySelector('link[rel="canonical"]');
+
+ if (!link) {
+ link = this.document.createElement('link');
+ link.setAttribute('rel', 'canonical');
+ this.document.head.appendChild(link);
+ }
+
+ link.setAttribute('href', url);
+ }
+
+ setJsonLd(data: object) {
+ let script: HTMLScriptElement | null = this.document.querySelector('script[type="application/ld+json"]');
+
+ if (!script) {
+ script = this.document.createElement('script');
+ script.type = 'application/ld+json';
+ this.document.head.appendChild(script);
+ }
+
+ script.textContent = JSON.stringify(data);
+ }
+}
+
+// Usage in component
+@Component({...})
+export class Product {
+ private seo = inject(Seo);
+ product = input.requiredWelcome
'); + expect(html).toContain(''); + }); + + it('should render product page with data', async () => { + const html = await renderApplication(App, { + appId: 'my-app', + providers: config.providers, + url: '/products/123', + }); + + expect(html).toContain('Product Name'); + expect(html).not.toContain('Loading...'); + }); +}); +``` + +### Test Hydration + +```typescript +import { TestBed } from '@angular/core/testing'; +import { provideClientHydration } from '@angular/platform-browser'; + +describe('Hydration', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [provideClientHydration()], + }); + }); + + it('should hydrate without errors', () => { + const fixture = TestBed.createComponent(App); + fixture.detectChanges(); + + // No hydration mismatch errors should be thrown + expect(fixture.componentInstance).toBeTruthy(); + }); +}); +``` diff --git a/skills/angular-testing/SKILL.md b/skills/angular-testing/SKILL.md new file mode 100644 index 0000000..1137fde --- /dev/null +++ b/skills/angular-testing/SKILL.md @@ -0,0 +1,469 @@ +--- +name: angular-testing +description: >- + Write unit and integration tests for Angular v20+ applications using Vitest or + Jasmine with TestBed and modern testing patterns. Use for testing components + with signals, OnPush change detection, services with inject(), and HTTP + interactions. Triggers on test creation, testing signal-based components, + mocking dependencies, or setting up test infrastructure. Don't use for E2E + testing with Cypress or Playwright, or for testing non-Angular + JavaScript/TypeScript code. +metadata: + category: development + source: + repository: 'https://github.com/analogjs/angular-skills' + path: skills/angular-testing +--- + +# Angular Testing + +Test Angular v20+ applications with Vitest (recommended) or Jasmine, focusing on signal-based components and modern patterns. + +## Vitest Setup (Angular v20+) + +Angular v20+ has native Vitest support through the `@angular/build` package. + +```bash +npm install -D vitest jsdom +``` + +Configure in angular.json: + +```json +{ + "projects": { + "your-app": { + "architect": { + "test": { + "builder": "@angular/build:unit-test", + "options": { + "tsConfig": "tsconfig.spec.json", + "buildTarget": "your-app:build" + } + } + } + } + } +} +``` + +Run tests: + +```bash +ng test # Run tests +ng test --watch # Watch mode +ng test --code-coverage # With coverage +``` + +For Vitest migration from Jasmine and advanced configuration, see [references/vitest-migration.md](references/vitest-migration.md). + +## Basic Component Test + +```typescript +import { describe, it, expect, beforeEach } from 'vitest'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { Counter } from './counter.component'; + +describe('Counter', () => { + let component: Counter; + let fixture: ComponentFixture-
+ @for (todo of filteredTodos(); track todo.id) {
+
- {{ todo.text }} + } +
{{ remaining() }} remaining
+ `, +}) +export class TodoList { + todos = signal{{ item().name }}
`,
+})
+export class ItemCmpt {
+ item = input.requiredLoading...
+ } @else if (userResource.hasValue()) { +{{ userResource.value().name }}
+ } + `, +}) +export class UserCmpt { + userId = signal('1'); + userResource = httpResourceTest
`, + }) + class Test {} + + it('should apply background color', () => { + const fixture = TestBed.createComponent(Test); + fixture.detectChanges(); + + const p = fixture.nativeElement.querySelector('p'); + expect(p.style.backgroundColor).toBe('lightblue'); + }); +}); +``` + +### Structural Directive + +```typescript +@Directive({ + selector: '[appIf]', +}) +export class If { + private templateRef = inject(TemplateRef); + private viewContainer = inject(ViewContainerRef); + + condition = input.requiredVisible
`, + }) + class TestCmpt { + show = signal(false); + } + + it('should show content when condition is true', () => { + const fixture = TestBed.createComponent(Test); + fixture.detectChanges(); + + expect(fixture.nativeElement.querySelector('p')).toBeNull(); + + fixture.componentInstance.show.set(true); + fixture.detectChanges(); + + expect(fixture.nativeElement.querySelector('p')).toBeTruthy(); + }); +}); +``` + +## Testing Pipes + +```typescript +@Pipe({ name: 'truncate' }) +export class Truncate implements PipeTransform { + transform(value: string, length: number = 50): string { + if (value.length <= length) return value; + return value.substring(0, length) + '...'; + } +} + +describe('Truncate', () => { + let pipe: Truncate; + + beforeEach(() => { + pipe = new Truncate(); + }); + + it('should not truncate short strings', () => { + expect(pipe.transform('Hello', 10)).toBe('Hello'); + }); + + it('should truncate long strings', () => { + expect(pipe.transform('Hello World', 5)).toBe('Hello...'); + }); + + it('should use default length', () => { + const longString = 'a'.repeat(60); + const result = pipe.transform(longString); + expect(result.length).toBe(53); // 50 + '...' + }); +}); +``` + +## E2E Testing Setup + +### Playwright Configuration + +```typescript +// playwright.config.ts +import { defineConfig } from '@playwright/test'; + +export default defineConfig({ + testDir: './e2e', + fullyParallel: true, + forbidOnly: !!process.env.CI, + retries: process.env.CI ? 2 : 0, + workers: process.env.CI ? 1 : undefined, + reporter: 'html', + use: { + baseURL: 'http://localhost:4200', + trace: 'on-first-retry', + }, + webServer: { + command: 'npm run start', + url: 'http://localhost:4200', + reuseExistingServer: !process.env.CI, + }, +}); +``` + +### E2E Test Example + +```typescript +// e2e/login.spec.ts +import { test, expect } from '@playwright/test'; + +test.describe('Login', () => { + test('should login successfully', async ({ page }) => { + await page.goto('/login'); + + await page.fill('input[name="email"]', 'test@example.com'); + await page.fill('input[name="password"]', 'password123'); + await page.click('button[type="submit"]'); + + await expect(page).toHaveURL('/dashboard'); + await expect(page.locator('h1')).toContainText('Welcome'); + }); + + test('should show error for invalid credentials', async ({ page }) => { + await page.goto('/login'); + + await page.fill('input[name="email"]', 'wrong@example.com'); + await page.fill('input[name="password"]', 'wrongpassword'); + await page.click('button[type="submit"]'); + + await expect(page.locator('.error')).toBeVisible(); + await expect(page.locator('.error')).toContainText('Invalid credentials'); + }); +}); +``` + +## Test Utilities + +### Custom Test Helpers + +```typescript +// test-utils.ts +export function setSignalInput- } +/> +``` + +Use render props when the parent needs to provide data or state to the child. + +Use children when composing static structure. + +--- + +## 4. React 19 APIs + +**Impact: MEDIUM** + +React 19+ only. Don't use `forwardRef`; use `use()` instead of `useContext()`. + +### 4.1 React 19 API Changes + +**Impact: MEDIUM (cleaner component definitions and context usage)** + +> **⚠️ React 19+ only.** Skip this if you're on React 18 or earlier. + +In React 19, `ref` is now a regular prop (no `forwardRef` wrapper needed), and `use()` replaces `useContext()`. + +**Incorrect: forwardRef in React 19** + +```tsx +const ComposerInput = forwardRef