Conditional — Angular Technical Interview Questions & Answers

Conditional

Conditional

  • *ngIf shows or removes a node. false → gone from the DOM, not just hidden. [hidden] only hides with CSS. Know the difference.
  • Board: *ngIf="marks >= 40; else failTpl". 0 is falsy — *ngIf="marks" hides a zero score. Write *ngIf="marks != null" if zero is valid.
  • New control flow @if (marks >= 40) { … } does the same idea. Trap: *ngIf on a huge block that you really wanted to hide visually but keep alive (audio, focus).

Technical Interview Tip: *ngIf vs hidden. Watch 0.

Code Examples for Conditional

Conditional — 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;
  }
}

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

How to Explain Conditional to an Interviewer

*ngIf vs [hidden]?

*ngIf removes from DOM [hidden] only CSS

Why can *ngIf="marks" hide 0?

0 is falsy