Angular Component

Angular Component

Create standalone components for Angular v20+. Components are standalone by default—do NOT set standalone: true.

Component Structure

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>{{ email() }}</p>
    }
  `,
  styles: `
    :host {
      display: block;
    }
    :host.active {
      border: 2px solid blue;
    }
  `,
})
export class UserCard {
  // Required input
  name = input.required<string>();

  // Optional input with default
  email = input<string>("");
  showEmail = input(false);

  // Input with transform
  isActive = input(false, { transform: booleanAttribute });

  // Computed from inputs
  avatarUrl = computed(() => `https://api.example.com/avatar/${this.name()}`);

  // Output
  selected = output<string>();

  handleClick() {
    this.selected.emit(this.name());
  }
}

Signal Inputs

// Required - must be provided by parent
name = input.required<string>();

// Optional with default value
count = input(0);

// Optional without default (undefined allowed)
label = input<string>();

// With alias for template binding
size = input("medium", { alias: "buttonSize" });

// With transform function
disabled = input(false, { transform: booleanAttribute });
value = input(0, { transform: numberAttribute });

Signal Outputs

import { output, outputFromObservable } from "@angular/core";

// Basic output
clicked = output<void>();
selected = output<Item>();

// With alias
valueChange = output<number>({ alias: "change" });

// From Observable (for RxJS interop)
scroll$ = new Subject<number>();
scrolled = outputFromObservable(this.scroll$);

// Emit values
this.clicked.emit();
this.selected.emit(item);

Host Bindings

Use the host object in @Component—do NOT use @HostBinding or @HostListener decorators.

@Component({
  selector: "app-button",
  host: {
    // Static attributes
    role: "button",

    // Dynamic class bindings
    "[class.primary]": 'variant() === "primary"',
    "[class.disabled]": "disabled()",

    // Dynamic style bindings
    "[style.--btn-color]": "color()",

    // Attribute bindings
    "[attr.aria-disabled]": "disabled()",
    "[attr.tabindex]": "disabled() ? -1 : 0",

    // Event listeners
    "(click)": "onClick($event)",
    "(keydown.enter)": "onClick($event)",
    "(keydown.space)": "onClick($event)",
  },
  template: `
    <ng-content />
  `,
})
export class Button {
  variant = input<"primary" | "secondary">("primary");
  disabled = input(false, { transform: booleanAttribute });
  color = input("#007bff");

  clicked = output<void>();

  onClick(event: Event) {
    if (!this.disabled()) {
      this.clicked.emit();
    }
  }
}

Content Projection

@Component({
  selector: "app-card",
  template: `
    <header>
      <ng-content select="[card-header]" />
    </header>
    <main>
      <ng-content />
    </main>
    <footer>
      <ng-content select="[card-footer]" />
    </footer>
  `,
})
export class Card {}

// Usage:
// <app-card>
//   <h2 card-header>Title</h2>
//   <p>Main content</p>
//   <button card-footer>Action</button>
// </app-card>

Lifecycle Hooks

import { OnDestroy, OnInit, afterNextRender, afterRender } from "@angular/core";

export class My implements OnInit, OnDestroy {
  constructor() {
    // For DOM manipulation after render (SSR-safe)
    afterNextRender(() => {
      // Runs once after first render
    });

    afterRender(() => {
      // Runs after every render
    });
  }

  ngOnInit() {
    /* Component initialized */
  }
  ngOnDestroy() {
    /* Cleanup */
  }
}

Accessibility Requirements

Components MUST:

• Pass AXE accessibility checks
• Meet WCAG AA standards
• Include proper ARIA attributes for interactive elements
• Support keyboard navigation
• Maintain visible focus indicators

@Component({
  selector: "app-toggle",
  host: {
    role: "switch",
    "[attr.aria-checked]": "checked()",
    "[attr.aria-label]": "label()",
    tabindex: "0",
    "(click)": "toggle()",
    "(keydown.enter)": "toggle()",
    "(keydown.space)": "toggle(); $event.preventDefault()",
  },
  template: `
    <span class="toggle-track"><span class="toggle-thumb"></span></span>
  `,
})
export class Toggle {
  label = input.required<string>();
  checked = input(false, { transform: booleanAttribute });
  checkedChange = output<boolean>();

  toggle() {
    this.checkedChange.emit(!this.checked());
  }
}

Template Syntax

Use native control flow—do NOT use *ngIf, *ngFor, *ngSwitch.

<!-- Conditionals -->
@if (isLoading()) {
<app-spinner />
} @else if (error()) {
<app-error [message]="error()" />
} @else {
<app-content [data]="data()" />
}

<!-- Loops -->
@for (item of items(); track item.id) {
<app-item [item]="item" />
} @empty {
<p>No items found</p>
}

<!-- Switch -->
@switch (status()) { @case ('pending') {
<span>Pending</span>
} @case ('active') {
<span>Active</span>
} @default {
<span>Unknown</span>
} }

Class and Style Bindings

Do NOT use ngClass or ngStyle. Use direct bindings:

<!-- Class bindings -->
<div [class.active]="isActive()">Single class</div>
<div [class]="classString()">Class string</div>

<!-- Style bindings -->
<div [style.color]="textColor()">Styled text</div>
<div [style.width.px]="width()">With unit</div>

Images

Use NgOptimizedImage for static images:

import { NgOptimizedImage } from "@angular/common";

@Component({
  imports: [NgOptimizedImage],
  template: `
    <img ngSrc="/assets/hero.jpg" width="800" height="600" priority />
    <img [ngSrc]="imageUrl()" width="200" height="200" />
  `,
})
export class Hero {
  imageUrl = input.required<string>();
}

For detailed patterns, see references/component-patterns.md.