Skip to content
Angular

Template Syntax & Binding

Interpolation, property, event, and two-way binding in Angular templates.

#template#binding

Code

angular
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"); }
}