What is the Angular template syntax?

Answer

Angular's template syntax extends HTML with special syntax for data binding, directives, and template references. Key elements: Data binding: interpolation {{ expr }}, property binding [prop]="expr", event binding (event)="handler()", two-way [(ngModel)]="prop". Built-in directives: *ngIf, *ngFor, *ngSwitch/ngSwitchCase/ngSwitchDefault, [ngClass], [ngStyle], [ngModel]. Template reference variables: #varName — creates a reference to a DOM element or component/directive: <input #emailInput> <button (click)="log(emailInput.value)">. Pipe operator: {{ value | pipeName:arg1:arg2 }} — transforms displayed values: {{ date | date:"MM/dd/yyyy" }}, {{ price | currency:"USD" }}, {{ text | uppercase }}, {{ json | json }}. Safe navigation operator (?.): {{ user?.address?.city }} — prevents null reference errors. Non-null assertion (!): {{ user!.name }} — tells TypeScript the value is definitely not null. ng-template: <ng-template #loadingTpl>Loading...</ng-template> — defines a template that can be rendered by directives or programmatically. ng-container: <ng-container *ngIf="..."> — a grouping element that doesn't add a DOM element. New Angular 17+ control flow: @if (condition) { } @else { }, @for (item of items; track item.id) { }, @switch (value) { @case ("a") { } }.