ECC/pi/core/skills/angular-developer/references/components.md

Components

Angular components are the fundamental building blocks of an application. Each component consists of a TypeScript class with behaviors, an HTML template, and a CSS selector.

Component Definition

Use the @Component decorator to define a component's metadata.

@Component({
  selector: 'app-profile',
  template: `
    <img src="profile.jpg" alt="Profile photo" />
    <button (click)="save()">Save</button>
  `,
  styles: `
    img {
      border-radius: 50%;
    }
  `,
})
export class Profile {
  save() {
    /* ... */
  }
}

Metadata Options

• selector: The CSS selector that identifies this component in templates.
• template: Inline HTML template (preferred for small templates).
• templateUrl: Path to an external HTML file.
• styles: Inline CSS styles.
• styleUrl / styleUrls: Path(s) to external CSS file(s).
• imports: Lists the components, directives, or pipes used in this component's template.

Using Components

To use a component, add it to the imports array of the consuming component and use its selector in the template.

@Component({
  selector: 'app-root',
  imports: [Profile],
  template: `<app-profile />`,
})
export class App {}

Template Control Flow

Angular uses built-in blocks for conditional rendering and loops.

Conditional Rendering (@if)

Use @if to conditionally show content. You can include @else if and @else blocks.

@if (user.isAdmin) {
<admin-dashboard />
} @else if (user.isModerator) {
<mod-dashboard />
} @else {
<standard-dashboard />
}

Result aliasing: Save the result of the expression for reuse.

@if (user.settings(); as settings) {
<p>Theme: {{ settings.theme }}</p>
}

Loops (@for)

The @for block iterates over collections. The track expression is required for performance and DOM reuse.

<ul>
  @for (item of items(); track item.id; let i = $index, total = $count) {
  <li>{{ i + 1 }}/{{ total }}: {{ item.name }}</li>
  } @empty {
  <li>No items to display.</li>
  }
</ul>

Implicit Variables: $index, $count, $first, $last, $even, $odd.

Switching Content (@switch)

The @switch block renders content based on a value. It uses strict equality (===) and has no fallthrough.

@switch (status()) { @case ('loading') { <app-spinner /> } @case ('error') { <app-error-msg /> }
@case ('success') { <app-data-grid /> } @default {
<p>Unknown status</p>
} }

Exhaustive Type Checking: Use @default never; to ensure all cases of a union type are handled.

@switch (state) { @case ('on') { ... } @case ('off') { ... } @default never; // Errors if a new
state like 'standby' is added }

Core Concepts

• Host Element: The DOM element that matches the component's selector.
• View: The DOM rendered by the component's template inside the host element.
• Standalone: By default, components are standalone (since Angular 19, standalone: true is default). For older versions, standalone: true must be explicit or the component must be part of an NgModule.
• Component Tree: Angular applications are structured as a tree of components, where each component can host child components.
• Component Naming: Do not add suffixes the Component suffix for Component classes (e.g., AppComponent) unless the project has been configured to use that naming configuration.