Angular 20 Standalone Component Skill

Angular 20 Standalone Component Skill

This skill helps create Angular 20 components following modern patterns and project standards.

Core Principles

Modern Angular 20 Patterns

• Standalone Components: 100% standalone, zero NgModules
• Signals: Use signal(), computed(), effect() for state
• New Syntax: input(), output(), @if, @for, @switch
• inject(): Function-based dependency injection
• OnPush: Change detection strategy for performance

Architecture Integration

• Presentation Layer: Components handle UI only
• Service Integration: Inject services for business logic
• No Direct Repository: Never inject repositories directly
• Event-Driven: Use EventBus for cross-module communication

Component Template

import { Component, signal, computed, effect, input, output, inject, ChangeDetectionStrategy } from '@angular/core';
import { SHARED_IMPORTS } from '@shared';
import { YourService } from '@core/services/your.service';

@Component({
  selector: 'app-your-component',
  standalone: true,
  imports: [SHARED_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="component-container">
      @if (loading()) {
        <nz-spin nzSimple />
      } @else if (hasError()) {
        <nz-alert 
          nzType="error" 
          [nzMessage]="errorMessage()!"
          nzShowIcon