Component Anatomy — @Component, Template, Styles and Metadata

An Angular component is the fundamental building block of the UI. Every visible element — from a button to an entire page — is a component. The @Component decorator configures the component, the class holds its logic and state, and the template describes its UI structure. Understanding every part of the component anatomy is the foundation for all Angular development. Angular 18’s standalone components are simpler than NgModule-based components — no separate module declaration needed, all dependencies declared directly on the component.

Complete Component Anatomy #

import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
import { CommonModule, DatePipe }                      from '@angular/common';
import { RouterLink }                                  from '@angular/router';
import { PostCardComponent }                           from '@shared/components/post-card.component';
import { PostSummaryDto }                              from '@models/post';

@Component({
  // ── Selector — how this component is used in other templates ─────────────
  selector: 'app-post-list',   // used as: <app-post-list />
  // selector: '[appHighlight]'  // attribute selector: <div appHighlight>
  // selector: '.my-class'       // class selector (rare)

  // ── Standalone — no NgModule needed ───────────────────────────────────────
  standalone: true,

  // ── Imports — dependencies this template uses ─────────────────────────────
  imports: [
    CommonModule,        // ngClass, ngStyle (legacy directives)
    DatePipe,            // | date pipe
    RouterLink,          // routerLink directive
    PostCardComponent,   // child component used in template
  ],

  // ── Template — inline or external ────────────────────────────────────────
  template: `
    <section class="post-list">
      <h1>{{ title }}</h1>

      <!-- Property binding: sets DOM property from component property ──── -->
      <img [src]="heroImageUrl" [alt]="title">

      <!-- Event binding: calls method on DOM event ───────────────────────── -->
      <button (click)="onRefresh()">Refresh</button>

      <!-- Two-way binding: combines [] and () ────────────────────────────── -->
      <input [(ngModel)]="searchQuery" placeholder="Search posts...">

      <!-- New @for control flow (Angular 17+) ──────────────────────────── -->
      @for (post of posts(); track post.id) {
        <app-post-card [post]="post" />
      } @empty {
        <p class="empty-state">No posts available.</p>
      }

      <!-- Pipe in template ───────────────────────────────────────────────── -->
      <p>Last updated: {{ lastUpdated | date:'medium' }}</p>

      <!-- Conditional ────────────────────────────────────────────────────── -->
      @if (isLoading()) {
        <div class="spinner">Loading...</div>
      }
    </section>
  `,

  // ── Styles — scoped to this component (ViewEncapsulation.Emulated) ────────
  styles: [`
    .post-list { max-width: 800px; margin: 0 auto; }
    .empty-state { color: #888; text-align: center; padding: 2rem; }
  `],

  // ── Change detection strategy ─────────────────────────────────────────────
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PostListComponent {
  // Class properties become available in the template
  title        = 'Latest Posts';
  heroImageUrl = '/assets/hero.jpg';
  searchQuery  = '';
  lastUpdated  = new Date();

  // Signals for reactive state
  posts     = signal<PostSummaryDto[]>([]);
  isLoading = signal(false);

  onRefresh(): void {
    // Called by (click) event binding
    this.isLoading.set(true);
    // ... load posts
  }
}

Template Binding Quick Reference #

Common Mistakes #

Mistake 1 — Using [href] for internal navigation (full page reload) #

❌ Wrong — <a [href]="'/posts/' + post.slug"> causes a full page reload; loses Angular state.

✅ Correct — <a [routerLink]="['/posts', post.slug]"> uses Angular router; stays in the SPA.

Mistake 2 — Forgetting to import used directives/components in standalone components #

❌ Wrong — using <app-post-card> in template without importing PostCardComponent; NG8001 error.

✅ Correct — add every component, directive, and pipe used in the template to the component’s imports: [] array.