Template Syntax in Angular
From the Angular cheat sheet · Templates & Directives · verified Jul 2026
Template Syntax
Data binding and template expressions
typescript
<!-- Interpolation -->
<h1>{{ title }}</h1>
<p>{{ 'Hello ' + name }}</p>
<p>{{ getFullName() }}</p>
<!-- Property binding -->
<img [src]="imageUrl">
<button [disabled]="isDisabled">Click</button>
<!-- Event binding -->
<button (click)="onClick()">Click</button>
<input (keyup)="onKeyUp($event)">
<!-- Two-way binding -->
<input [(ngModel)]="name">
<!-- Template reference -->
<input #nameInput>
<button (click)="greet(nameInput.value)">Greet</button>💡 Use safe navigation (?) to avoid null reference errors
⚡ Prefer property binding [prop] over string interpolation
📌 Template reference variables provide direct access to elements
🔥 ng-container groups elements without adding DOM nodes
Continue with Angular
Save the full cheat sheet or work through every related task.