Question 1

What template syntax does Angular use for binding?

Accepted Answer

Interpolation {{ }}, property [prop], event (event), and two-way [(ngModel)] or [()] for bananas-in-a-box. Prefer one-way data flow. Use attribute binding [attr.x] when needed. Event bindings pass $event. Avoid complex expressions in templates—move logic to the class or pipes/computed signals.

Question 2

What is the difference between *ngIf and @if in Angular templates?

Accepted Answer

@if is the built-in control flow; *ngIf is the structural directive from CommonModule. Built-in @if/@for/@switch are preferred in modern Angular: better type narrowing, no NgIf import, and clearer syntax. *ngIf still works for older codebases.

Question 3

How does @for track items and why does track matter?

Accepted Answer

@for requires a track expression to identify items across updates for efficient DOM reuse. Tracking by identity (id) prevents destroying/recreating DOM when the list reorders. track $index is a last resort. Wrong track keys cause state bugs in inputs inside lists.

Question 4

What are template reference variables?

Accepted Answer

Local names (#ref) that point to a DOM element or directive/component instance in the template. Useful for focusing inputs or reading child APIs. Prefer ViewChild for class access. Don't overuse refs for state that belongs in the component model.

Question 5

When should you use a pipe vs a method in a template?

Accepted Answer

Pipes (especially pure) are for transform display; avoid calling heavy methods every CD cycle. Pure pipes cache by reference/args. Methods in templates re-run on every change detection. Prefer computed signals for derived view state in modern apps.

Question 6

How do you safely bind HTML in Angular templates?

Accepted Answer

Use [innerHTML] only with DomSanitizer after trusting content, or prefer text interpolation. Angular sanitizes by default against XSS. bypassSecurityTrustHtml is dangerous—only for trusted CMS content. Prefer markdown renderers with sanitization.

Question 7

What is ng-template and how does it differ from ng-container?

Accepted Answer

ng-template is an inert template definition; ng-container groups without a DOM element. ng-template content renders only when stamped (ngIf else, ngTemplateOutlet). ng-container is for structural directives without extra wrappers. Don't confuse with <template> HTML element semantics alone.

Templates Angular Interview Questions

Other Angular interview topics