Templates and the View

Every Angular component has a template — the HTML that defines what the component renders on screen. Templates look like regular HTML but are extended with Angular’s templating syntax. The component class and its template are tightly connected: the template reads data from the class, and events in the template call methods on the class.

The component class and its template

The class and template are two sides of the same component. The class holds data and logic; the template renders that data as HTML.

greeting.ts

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

@Component({
  selector: 'app-greeting',
  templateUrl: './greeting.html',
  styleUrl: './greeting.css'
})
export class Greeting {
  name = 'Angular';
  year = new Date().getFullYear();

  greet(): string {
    return `Hello from ${this.name} in ${this.year}!`;
  }
}

greeting.html

<h1>{{ greet() }}</h1>
<p>Welcome to {{ name }}.</p>

The {{ }} syntax reads name, year, and greet() directly from the class. Angular keeps the DOM in sync automatically — when a property changes, the template updates.

External vs. inline templates

The templateUrl option points to a separate file. For very small components, you can write the template inline using template:

@Component({
  selector: 'app-badge',
  template: `<span class="badge">{{ count }}</span>`,
  styles: [`.badge { background: red; color: white; }`]
})
export class Badge {
  count = 5;
}

Inline templates work well for trivial components. For anything with more than a few lines, use templateUrl so the HTML and TypeScript are in separate files that each tool can process correctly.

What the template can access

The template has direct access to all public properties and methods of the component class:

export class MovieCard {
  movie = { title: 'Inception', rating: 8.8 };
  isInWatchlist = false;

  toggleWatchlist(): void {
    this.isInWatchlist = !this.isInWatchlist;
  }
}

<h3>{{ movie.title }}</h3>
<p>Rating: {{ movie.rating }}</p>
<button (click)="toggleWatchlist()">
  {{ isInWatchlist ? 'Remove' : 'Add' }}
</button>

Private properties are not accessible from the template.

How Angular renders the view

When Angular renders a component:

1. It creates an instance of the component class
2. It reads the template and evaluates any bindings ({{ }}, [property], (event))
3. It produces DOM elements and inserts them into the page
4. When class properties change, Angular re-evaluates the relevant bindings and updates only the affected DOM nodes

This process is called change detection. Angular uses a mechanism called zones (or signals in newer APIs) to know when to check for changes. You do not need to manage this manually — Angular handles it.

Exercise

1. In your my-first-app project, open the Greeting component you created in the previous lesson.
2. Add a property message = 'Learning Angular' to the class.
3. Add a method getYear(): number { return new Date().getFullYear(); } to the class.
4. Update greeting.html to display both the message and the year using interpolation.
5. Change the message property value and confirm the rendered output changes without touching the HTML.

Recap

• A component’s template and class are tightly coupled — the template reads public properties and calls public methods from the class.
• Use templateUrl for separate HTML files; use inline template only for trivial one-liners.
• Angular renders the template into DOM elements and updates only the affected nodes when data changes.
• All public class properties and methods are accessible in the template via {{ }} and other binding syntax.