analogjs/angular-skills
10 skills61.1k installs5.9k starsGitHub
Install
npx skills add https://github.com/analogjs/angular-skillsSkills in this repo
1Angular ComponentCreate modern Angular standalone components following v20 best practices Use for building UI components with signal-based inputs outputs OnPush change detection host bindings content projection and lifecycle hooks Triggers on component creation refactoring class-based inputs to signals adding host bindings or implementing accessible interactive components name angular-component description Create modern Angular standalone components following v20 best practices Use for building UI components with signal-based inputs outputs OnPush change detection host bindings content projection and lifecycle hooks Triggers on component creation refactoring class-based inputs to signals adding host bindings or implementing accessible interactive components Angular Component Create standalone components for Angular v20 Components are standalone by default do NOT set standalone true Component Structure typescript import Component ChangeDetectionStrategy input output computed from angular core Component selector app-user-card changeDetection ChangeDetectionStrategy OnPush host class user-card class active isActive click handleClick template img src avatarUrl alt name avatar h2 name h2 if showEmail p.10.1kinstalls2Angular SignalsThe angular-signals skill teaches signal-based reactive state management for Angular v20 and later. Agents guide creation of writable state with signal, derived state with computed, dependent resets with linkedSignal, and side effects with effect inside injection contexts including cleanup handlers. Examples cover component state patterns such as filtered todos, service stores with readonly public signals, custom equality functions, and untracked reads. RxJS interop sections document toSignal for observables and HTTP streams plus toObservable with debounce and switchMap for search. The skill contrasts synchronous fine-grained reactivity against BehaviorSubject patterns and shows auth service state with computed isAuthenticated. Advanced resource patterns are referenced in signal-patterns.md. Triggers include state management questions, migrations from BehaviorSubject or Observable patterns, and reactive data flow implementation. Use when building Angular components or services that need computed derivatives, linked selections, or observable bridges.7.6kinstalls3Angular FormsBuild 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 f --- 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. --- # 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.6.5kinstalls4Angular RoutingImplement routing in Angular v20 applications with lazy loading functional guards resolvers and route parameters Use for navigation setup protected routes route-based data loading and nested routing Triggers on route configuration adding authentication guards implementing lazy loading or reading route parameters with signals name angular-routing description Implement routing in Angular v20 applications with lazy loading functional guards resolvers and route parameters Use for navigation setup protected routes route-based data loading and nested routing Triggers on route configuration adding authentication guards implementing lazy loading or reading route parameters with signals Angular Routing Configure routing in Angular v20 with lazy loading functional guards and signal-based route parameters Basic Setup typescript app routes ts import Routes from angular router export const routes Routes path redirectTo home pathMatch full path home component Home path about component About path component NotFound app config ts import ApplicationConfig from angular core import provideRouter from angular router import routes from app routes export const appConfig ApplicationConfig providers prov.6.3kinstalls5Angular HttpImplement HTTP data fetching in Angular v20 using resource httpResource and HttpClient Use for API calls data loading with signals request response handling and interceptors Triggers on data fetching API integration loading states error handling or converting Observable-based HTTP to signal-based patterns name angular-http description Implement HTTP data fetching in Angular v20 using resource httpResource and HttpClient Use for API calls data loading with signals request response handling and interceptors Triggers on data fetching API integration loading states error handling or converting Observable-based HTTP to signal-based patterns Angular HTTP Data Fetching Fetch data in Angular using signal-based resource httpResource and the traditional HttpClient httpResource Signal-Based HTTP httpResource wraps HttpClient with signal-based state management typescript import Component signal from angular core import httpResource from angular common http interface User id number name string email string Component selector app-user-profile template if userResource isLoading p Loading p else if userResource error p Error userResource error message p button click userResource reload Retry butt.6kinstalls6Angular TestingThis skill guides unit and integration testing for Angular v20+ applications using Vitest (recommended) or Jasmine with TestBed and modern patterns. It documents native Vitest support through @angular/build:unit-test in angular.json, install steps for vitest and jsdom, and ng test commands for watch mode and code coverage. Coverage spans signal-based components with computed values and template assertions, OnPush components requiring setInput and detectChanges, injectable services with signal state, HTTP testing via provideHttpClient and HttpTestingController with afterEach verify, and Vitest vi.fn mocks for dependencies including signal-based auth services. Input and output testing uses componentRef.setInput, detectChanges, and output subscriptions. Async patterns cover fakeAsync with tick and flush plus waitForAsync with whenStable. httpResource loading states are tested by flushing mock responses. Agents invoke on test creation, signal component tests, dependency mocking, or test infrastructure setup. Excludes E2E with Cypress or Playwright and non-Angular JavaScript testing.5.5kinstalls7Angular DiThe angular-di skill teaches dependency injection in Angular v20 and later using inject(), injection tokens, and provider configuration. Agents guide service architecture with providedIn root singletons, component-scoped instances, and route-level providers shared across child routes. Coverage spans InjectionToken creation for API_URL, APP_CONFIG, WINDOW, and LOCAL_STORAGE, plus provider types useClass, useValue, useFactory, useExisting, and multi providers for validators and HTTP interceptors. Injection options document optional, self, skipSelf, and host lookups when resolving parent or local injectors. App initializers use provideAppInitializer for async config loads and session checks before bootstrap completes. Advanced APIs include createEnvironmentInjector, runInInjectionContext, and factory tokens with providedIn root. Examples show HttpClient injection in components, signal-backed User services, conditional loggers, factory providers with deps, and VALIDATORS arrays. Triggers include service creation, provider setup, token configuration, and DI hierarchy questions. Use when configuring injectable services, scoping dependencies, or replacing constructor injection with injec.5.3kinstalls8Angular DirectivesAngular-directives teaches custom directive patterns for Angular v20 and later, covering attribute directives that modify element behavior and appearance, structural directives for portals and overlays, and host directives for composing reusable behaviors across components. Attribute examples include highlight styling with signal inputs and effects, tooltip overlays with ARIA attributes, button class and style manipulation via the host object, click-outside detection, and keyboard shortcut bindings with modifier keys. The skill explicitly directs agents to use native @if, @for, and @switch for control flow instead of custom structural directives. Structural patterns cover portal rendering into alternate DOM locations, lazy one-time render when conditions become true, and template outlet with context for custom lists. Host directives compose focusable, disableable, hoverable, ripple, and elevation behaviors on components through hostDirectives with input and output forwarding. Documentation prefers the host property over deprecated HostBinding and HostListener decorators throughout.5.3kinstalls9Angular Toolingangular-tooling documents Angular CLI workflows for Angular v20 plus projects from scaffolding through production builds. Agents create standalone apps with ng new, generate components services directives pipes guards interceptors and other schematics, run ng serve with port host SSL and production configuration options, build development and production bundles with budget and hashing settings, execute unit tests with coverage and headless CI flags, lint with optional fix, configure angular.json architect sections and environment file replacements, add Angular Material PWA SSR and localize packages, update core CLI packages, analyze bundle stats with esbuild-visualizer, and manage persistent CLI cache. The skill explicitly excludes Nx workspace commands, custom Webpack setups, and non-Angular build systems like standalone Vite or direct esbuild. Project structure covers src app routes, public assets, and dist browser output paths. Path alias generation supports feature and shared folder conventions.4.9kinstalls10Angular SsrThe angular-ssr skill Implement server-side rendering and hydration in Angular v20+ using @angular/ssr. Use for SSR setup, hydration strategies, prerendering static pages, and handling browser-only APIs. Triggers on SSR configuration, fixing hydration mismatches, prerendering routes, or making code SSR-compatible. Implement server-side rendering, hydration, and prerendering in Angular v20+. This adds: - @angular/ssr package - server.ts - Express server - src/main.server.ts - Server bootstrap - src/app/app.config.server.ts - Server providers - Updates angular.json with SSR configuration `` src/ ├── app/ │ ├── app.config.ts Browser config │ ├── app.config.server.ts Server config │ └── app.routes.ts ├── main.ts Browser bootstrap ├── main.server.ts Server bootstrap server.ts Express server `` ```typescript import { ApplicationConfig, mergeApplicationConfig } from '@angular/core'; import { provideServerRendering } from '@angular/platform-server'; import { provideServerRoutesConfig } from '@angular/ssr'; import { appConfig } from './app.config'; import { serverRoutes } from './app.routes.server';3.6kinstalls