Angular · Theory

Conditional

Theory

11/43

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).

Diagram

  marks >= 40 ?
     │ yes → Pass banner
     │ no  → Fail template
  *ngIf removes DOM

Exam tip

*ngIf vs hidden. Watch 0.

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.

Short notes

Def*ngIf adds/removes DOM. Not the same as [hidden].
RuleZero can be falsy. Compare explicitly.
Trap*ngIf="marks" when 0 is a real score.
ExPass banner vs Fail template.

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

Example

Short notes

Questions

Conditional

Example

Short notes

Questions