bhylu.com

Advertisements

Angular Conditional Rendering

Use @if, @else if and @else for modern conditional templates. These blocks create and remove views, which affects child state and lifecycle as well as what is visible.

How it works

The lending desk shows either an availability message or a refusal. A signal owns the condition, and the template contains only the alternative presentations. If a view is destroyed, controls inside it do not retain their local DOM state automatically. Use hidden instead when you deliberately need to keep a view alive, and understand the accessibility implications of that choice.

Run the code

Use a separate empty project folder with a compatible Node version: ^22.22.3, ^24.15.0 or a supported 26+ runtime. The review uses Node 24.22.1, Angular 22.2.4, CLI/build 22.2.5 and TypeScript 6.0.3. Node 22.15.1 is too old for Angular 22. Save every download at its displayed path; browsers may keep only the basename, so recreate the src folder. Run npm install, npm run build and npm start, then open the loopback address printed by the server. Run npm test for the supplied component tests. These are local teaching projects, not Bhylu publishing files.

The small loopback server serves the compiled app and fixed, read-only tool API fixtures. It is not a database, authentication or lending service. Angular examples do not run in Bhylu’s current HTML or TypeScript playground. No Apache, MySQL or PHP configuration change is needed.

Example

src/app.ts

import { Component } from '@angular/core';
import { signal } from '@angular/core';

@Component({
  selector: 'bh-conditional-rendering',
  standalone: true,
  imports: [],
  template: `<button type="button" (click)="available.set(false)">
      Mark unavailable
    </button>
    @if (available()) {
      <p data-result>Tool available</p>
    } @else {
      <p data-result>No tools available</p>
    }`,
})
export class App {
  available = signal(true);
}

Expected result

Tool available

Clicking Mark unavailable removes the first paragraph and creates the alternative. Angular’s deprecated NgIf syntax may appear in maintained applications, but this course teaches @if for new code. A conditional rendering rule should remain separate from the server’s inventory validation.

Advertisements