Angular Component

Angular Component Patterns

Component Declaration

Components are standalone by default in Angular 17+. Do NOT set standalone: true.

@Component({
  selector: 'app-entity-list',
  imports: [CommonModule, RouterModule],
  templateUrl: './entity-list.component.html',
  styleUrl: './entity-list.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EntityListComponent {
  // 1. Injected dependencies
  private readonly service = inject(EntityService);
  private readonly router = inject(Router);

  // 2. Signal inputs
  readonly entityId = input.required();
  readonly status = input('active');

  // 3. Signal outputs
  readonly selected = output();

  // 4. Signals for reactive state
  readonly items = signal([]);
  readonly loading = signal(false);

  // 5. Computed values
  readonly filteredItems = computed(() =>
    this.items().filter(i => this.status() === 'all' || i.status === this.status())
  );
}

Signal Inputs (not @Input)

// Required input
readonly entityId = input.required();

// Optional with default
readonly pageSize = input(20);

// Transform
readonly id = input(0, { transform: numberAttribute });

// Alias
readonly label = input('', { alias: 'buttonLabel' });

Signal Outputs (not @Output)

readonly selected = output();
readonly closed = output();

// Emit
this.selected.emit(entity);
this.closed.emit();

View Queries (not @ViewChild)

readonly nameInput = viewChild>('nameInput');
readonly items = viewChildren(ItemComponent);

// Usage
this.nameInput()?.nativeElement.focus();

Control Flow (not ngIf/ngFor)

@if (loading()) {
  
} @else if (error()) {
  
} @else {
  @for (item of items(); track item.id) {
    
  } @empty {
    No items found
  }
}

@switch (status()) {
  @case ('active') { Active }
  @case ('inactive') { Inactive }
  @default { Unknown }
}

inject() Function (not constructor injection)

// Always use inject()
private readonly http = inject(HttpClient);
private readonly destroyRef = inject(DestroyRef);
private readonly route = inject(ActivatedRoute);
private readonly modalControl = inject(ModalControl, { optional: true });

Host Metadata

@Component({
  host: {
    class: 'page-content',
    '[class.is-loading]': 'loading()',
    '(window:resize)': 'onResize($event)',
  },
})

Import Order

1. @angular/*
2. Third-party libraries (rxjs, etc.)
3. Project aliases (@app/*)
4. Relative imports

Key Rules

• Always ChangeDetectionStrategy.OnPush
• Always inject(), never constructor injection
• Signal inputs: input() / input.required(), not @Input()
• Signal outputs: output(), not @Output() / EventEmitter
• Native control flow: @if/@for/@switch, not *ngIf/*ngFor
• Separate template and style files (except very simple components)

For page component patterns, see [references/component-patterns.md](references/component-patterns.md).

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: cuongtl1992
• Source: cuongtl1992/vibe-skills
• License: MIT

Install and usage instructions live in the source repository linked above.