Templates — Angular Technical Interview Questions & Answers

Templates

Templates

  • The template is HTML plus Angular extras: {{ }}, *ngIf, *ngFor, (click), [class]. It should stay readable. Heavy if/else belongs in the class, not in a 20-line {{ }} expression.
  • Meera prints {{ s.name }} and *ngIf="s.marks >= 40". That’s a template. Trap: calling a heavy method in {{ getTotal() }} every change-detection cycle — it runs too often. Use a pipe or a field.

Technical Interview Tip: {{ }} + *ngIf + (click). No fat expressions.

Code Examples for Templates

Templates — working example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Templates: toggle open. Say whether the panel is on screen after one click.

How to Explain Templates to an Interviewer

What goes in an Angular template?

HTML bindings *ngIf / *ngFor