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<string>();
  readonly status = input<string>('active');

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

  // 4. Signals for reactive state
  readonly items = signal<Entity[]>([]);
  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<number>();

// 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<Entity>();
readonly closed = output<void>();

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

View Queries (not @ViewChild)

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

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

Control Flow (not *ngIf/*ngFor)

@if (loading()) {
  <app-spinner />
} @else if (error()) {
  <app-error [message]="error()" />
} @else {
  @for (item of items(); track item.id) {
    <app-item [data]="item" (click)="onSelect(item)" />
  } @empty {
    <p>No items found</p>
  }
}

@switch (status()) {
  @case ('active') { <span class="badge-active">Active</span> }
  @case ('inactive') { <span class="badge-inactive">Inactive</span> }
  @default { <span>Unknown</span> }
}