What is the Angular template syntax?
Why Interviewers Ask This
Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for Angular development. It reveals whether you understand the building blocks that more complex concepts rely on.
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") { } }.
Common Mistake
Don't just define the term — demonstrate that you understand when to use it and when not to. Showing awareness of trade-offs is what separates average from strong Angular candidates.