Angular Components and Templates — Build Your First UI

This lesson covers Angular components and templates — the core skills for building any Angular interface in 21+. You will create standalone components, bind data to templates, use signals for local state, and apply modern control flow with @if and @for.

Prerequisites: Lessons 1–2 with a local Angular 21 app from ng new. Estimated time: 45–55 minutes.

1. Standalone Components

In Angular 21, components are standalone by default — no NgModule wrapper required. A minimal component lives in greeting-card.ts:

import { Component, input } from '@angular/core';

@Component({
  selector: 'app-greeting-card',
  standalone: true,
  template: `
    <h2>Hello, {{ name() }}!</h2>
    <p>Role: {{ role() }}</p>
  `,
})
export class GreetingCard {
  name = input.required<string>();
  role = input('Guest');
}

Use the component in app.html after importing it in app.ts:

import { Component } from '@angular/core';
import { GreetingCard } from './greeting-card';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GreetingCard],
  templateUrl: './app.html',
})
export class App {}

<app-greeting-card name="Kindson" role="Developer" />

2. Templates and Interpolation

Double curly braces {{ '{{' }} expression {{ '}}' }} display component data in the template. Expressions can be property access, function calls, or signal reads (note the () when reading a signal):

<p>Title: {{ '{{' }} title() {{ '}}' }}</p>

Keep templates readable — complex logic belongs in the component class or a computed signal.

3. Property and Event Binding

Property binding sets DOM or component properties:

<button [disabled]="isLoading()">Save</button>

Event binding listens for DOM events:

<button (click)="save()">Save</button>

Two-way binding (for forms) uses [(ngModel)] when you import FormsModule — covered in a future forms lesson.

4. Signals for Local State

Angular 21 encourages signals for UI state that changes over time:

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>Count: {{ '{{' }} count() {{ '}}' }}</p>
    <button (click)="increment()">+1</button>
  `,
})
export class Counter {
  count = signal(0);

  increment() {
    this.count.update((n) => n + 1);
  }
}

Read signals in templates with (). Update with set(), update(), or mutate() on writable signals. For derived values, use computed() in later lessons.

5. Control Flow: @if and @for

Modern Angular replaces *ngIf and *ngFor with built-in control flow:

@if (isLoggedIn()) {
  <p>Welcome back!</p>
} @else {
  <p>Please sign in.</p>
}

<ul>
  @for (item of items(); track item.id) {
    <li>{{ '{{' }} item.name {{ '}}' }}</li>
  }
</ul>

Always use track in @for for performance — typically the item’s unique id.

6. Hands-On: GreetingCard with Signals

Combine inputs and signals in one component:

import { Component, input, signal, computed } from '@angular/core';

@Component({
  selector: 'app-greeting-card',
  standalone: true,
  template: `
    <article class="card">
      <h3>{{ '{{' }} greeting() {{ '}}' }}</h3>
      @if (showRole()) {
        <p>Role: {{ '{{' }} role() {{ '}}' }}</p>
      }
      <button (click)="toggleRole()">Toggle role</button>
    </article>
  `,
  styles: [
    `.card { padding: 1rem; border: 1px solid #e2e8f0; border-radius: 8px; }`,
  ],
})
export class GreetingCard {
  name = input.required<string>();
  role = input('Developer');
  showRole = signal(true);

  greeting = computed(() => `Hello, ${this.name()}!`);

  toggleRole() {
    this.showRole.update((v) => !v);
  }
}

Import GreetingCard in your root component and pass props from the parent template.

7. Next Steps and Advanced Tutorials

You can now build interactive UIs with standalone components, bindings, signals, and control flow. Coming soon in this series: routing, services, HTTP, and forms.

For full-stack Angular (CRUD, Spring Boot, AI chat), continue on munonye.com Angular tutorials after completing this beginner track.

Frequently Asked Questions

What is a standalone component in Angular?
A component that declares its own dependencies via the imports array in @Component, without an NgModule. Standalone is the default for new Angular 21 projects.

Should I use signals or RxJS for UI state?
Use signals for local component and template state in Angular 21+. Use RxJS for HTTP streams, WebSockets, and complex async pipelines — often via toSignal() at the boundary.

Can I still use *ngIf and *ngFor?
Yes in legacy code, but new code should use @if and @for — they are faster, easier to read, and align with current Angular documentation.