Template Syntax

// app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ title }}</h1>

    <!-- Dynamically sets the imageUrl property value to the src attribute -->
    <img [src]="imageUrl" [alt]="imageAlt">

    <!-- Clicking the button calls the changeTitle() method -->
    <button (click)="changeTitle()">Change title</button>
  `,
})
export class AppComponent {
  title: string = 'Initial title';
  imageUrl: string = 'https://example.com/logo.png';
  imageAlt: string = 'Logo image';

  changeTitle(): void {
    this.title = 'Updated title';
  }
}

// app.component.ts
// Two-way binding requires importing FormsModule

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

@Component({
  standalone: true,
  imports: [FormsModule],
  selector: 'app-root',
  template: `
    <input [(ngModel)]="name" placeholder="Enter your name">
    <p>Hello, {{ name }}!</p>
  `,
})
export class AppComponent {
  name: string = '';
}

// app.component.ts

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

@Component({
  standalone: true,
  imports: [CommonModule],
  selector: 'app-root',
  template: `
    <div *ngIf="isLoggedIn; else loginBlock">
      <p>You are logged in.</p>
    </div>

    <!-- This template is shown when isLoggedIn is false -->
    <ng-template #loginBlock>
      <p>Please log in.</p>
    </ng-template>

    <ul>
      <!-- Receives each element of the fruits array into the fruit variable, also gets the index -->
      <li *ngFor="let fruit of fruits; let i = index">
        {{ i + 1 }}. {{ fruit }}
      </li>
    </ul>
  `,
})
export class AppComponent {
  isLoggedIn: boolean = false;

  fruits: string[] = ['apple', 'banana', 'orange'];
}

// app.component.ts

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

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <p [class.active]="isActive" [class.highlight]="isHighlight">
      Text with dynamically switching classes.
    </p>

    <p [style.color]="textColor" [style.font-size.px]="fontSize">
      Text with dynamically changing styles.
    </p>

    <button (click)="toggleActive()">Toggle active</button>
  `,
  styles: [`
    .active    { font-weight: bold; }
    .highlight { background-color: yellow; }
  `],
})
export class AppComponent {
  isActive: boolean = false;
  isHighlight: boolean = true;
  textColor: string = 'royalblue';
  fontSize: number = 18;

  toggleActive(): void {
    this.isActive = !this.isActive;
  }
}

// app.component.ts

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

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <!-- #inputRef allows referencing this input element's DOM object within the template -->
    <input #inputRef type="text" placeholder="Enter text">

    <!-- On button click, the value can be obtained directly via inputRef.value -->
    <button (click)="showValue(inputRef.value)">Show value</button>
    <p>Input value: {{ displayValue }}</p>
  `,
})
export class AppComponent {
  displayValue: string = '';

  showValue(value: string): void {
    this.displayValue = value;
  }
}

Angular's template syntax allows you to declaratively connect HTML with the properties and methods of the component class. Combining {{ }} for interpolation, [] for property binding, () for event binding, and [()] for two-way binding lets you express dynamic UIs simply.

*ngIf and *ngFor are called structural directives and manipulate the DOM structure itself. Because conditional branching and repetition can be described as HTML attributes, the screen structure becomes easy to grasp just by reading the template.

Since Angular 17, new control flow syntax (@if / @for) has been introduced as an alternative to *ngIf / *ngFor, enabling more intuitive descriptions.

For passing data between components, see @Input / @Output. For more detailed form control, see Reactive Forms.