Template Syntax & Binding

Code

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

@Component({
  selector: "app-binding",
  standalone: true,
  imports: [FormsModule],
  template: `
    <p>Interpolation: {{ title }}</p>
    <img [src]="imgUrl" [alt]="title" />
    <button (click)="onClick()">Click</button>
    <input [(ngModel)]="name" />
    <p>Hi, {{ name }}</p>
  `
})
export class BindingComponent {
  title = "Template Syntax";
  imgUrl = "/logo.png";
  name = "";
  onClick() { console.log("clicked"); }
}

Explanation

Demonstrates Angular's four binding forms: interpolation renders values, [prop] binds properties, (event) binds events, and [(ngModel)] enables two-way binding. The template syntax compiles to efficient change-detection instructions at build time. Importing FormsModule is required for ngModel.

More Angular Snippets