Angular Components and Templates

A component is the fundamental building block of an Angular application. Every component consists of a TypeScript class, an HTML template, and optional styles.

Creating a Component

ng generate component user-card
# Creates: user-card.component.ts, .html, .scss, .spec.ts

Component Class

// user-card.component.ts
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector:    'app-user-card',
  standalone:  true,
  imports:     [CommonModule],
  templateUrl: './user-card.component.html',
  styleUrl:    './user-card.component.scss',
})
export class UserCardComponent {
  @Input() name:  string = '';
  @Input() email: string = '';
  @Input() role:  string = 'user';

  get initials(): string {
    return this.name.split(' ').map(n => n[0]).join('').toUpperCase();
  }
}

Component Template

<!-- user-card.component.html -->
<div class="card">
  <div class="avatar">{{ initials }}</div>
  <h3>{{ name }}</h3>
  <p>{{ email }}</p>
  <span class="badge">{{ role | titlecase }}</span>
</div>

Using the Component

<!-- In parent template -->
<app-user-card
  name="Alice Smith"
  email="[email protected]"
  role="admin"
/>