Angular Templates

An Angular template is ordinary HTML enriched with special syntax that binds data, handles events, and controls what gets rendered.

HTML Plus Angular Syntax

Every component has a template - either written inline with the template property or in a separate .html file referenced by templateUrl. A template looks like regular HTML, but Angular extends it with a small, consistent set of syntax categories that all templates share.

SyntaxCategoryExample
{{ value }}Interpolation<p>{{ username }}</p>
[property]Property binding<img [src]="photoUrl">
(event)Event binding<button (click)="save()">Save</button>
[(ngModel)]Two-way binding<input [(ngModel)]="name">
*ngIf / @ifStructural directive<p *ngIf="loggedIn">Welcome</p>
| pipePipe{{ price | currency }}

Inline vs. External Templates

Small components often define their template inline using a template string; larger components typically use a separate HTML file for readability and better editor tooling (syntax highlighting, autocomplete).

Inline template

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-clock',
  standalone: true,
  template: `
    <p>The time is {{ currentTime }}</p>
  `
})
export class ClockComponent {
  currentTime = new Date().toLocaleTimeString();
}

bootstrapApplication(ClockComponent).catch(err => console.error(err));

External template

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

// In a real project the template below would live in its own file,
// clock.component.html, referenced via templateUrl. It is inlined here
// so this example is a single, self-contained, runnable file.
@Component({
  selector: 'app-clock',
  standalone: true,
  template: `
    <p>The time is {{ currentTime }}</p>
  `
})
export class ClockComponent {
  currentTime = new Date().toLocaleTimeString();
}

bootstrapApplication(ClockComponent).catch(err => console.error(err));

Templates React to Class Data

Templates never contain application logic themselves - they only reference properties and methods exposed by the component class. This separation keeps views declarative and easy to reason about, while keeping behavior testable in plain TypeScript.

Binding a method call to an event

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

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

  increment(): void {
    this.count++;
  }
}

bootstrapApplication(CounterComponent).catch(err => console.error(err));
  • Interpolation displays a value as text
  • Property binding sets a DOM property or component input
  • Event binding calls a method in response to a user action
  • Structural directives add, remove, or repeat elements
  • Pipes transform a value right before it is displayed
Note: The upcoming lessons cover interpolation, structural directives, pipes, and attribute binding in depth - this page is the map connecting all of them.
Note: Template syntax only works inside a component's own template. Copying it into a plain .html file that isn't associated with a component (or omitted from a component's imports) will render as literal text or fail silently.

Exercise: Angular Templates

Where is a component's HTML template usually defined?

Keep Going

Angular Interview QuestionsPractice real questions asked for AngularFrontend Developer SalarySee what Frontend Developer roles pay in the marketAuto Apply for JobsApply to open roles related to Angular and tweak your resume