W3Schools Tryit Editor

main.ts

index.html

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  styles: [`
    .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  `],
  template: `
    <h3>ngIf with then/else</h3>

    <div class="toolbar">
      <button (click)="startLoading()">Start Loading</button>
      <button (click)="showError()">Set Error</button>
      <button (click)="reset()">Reset</button>
      <span style="margin-left:8px;color:#666">loading={{loading}} error={{error}}</span>
    </div>

    <ng-container *ngIf="!loading && !error; then contentTpl; else stateTpl"></ng-container>

    <ng-template #contentTpl>
      <p>Content loaded successfully.</p>
    </ng-template>

    <ng-template #stateTpl>
      <p *ngIf="loading">Loading...</p>
      <p *ngIf="error" style="color:crimson">Something went wrong.</p>
    </ng-template>
  `
})
export class App {
  loading = false;
  error = false;
  _timer = 0;

  startLoading() {
    this.loading = true;
    this.error = false;
    clearTimeout(this._timer);
    this._timer = setTimeout(() => {
      this.loading = false;
    }, 800);
  }
  showError() {
    this.error = true;
    this.loading = false;
  }
  reset() {
    this.loading = false;
    this.error = false;
  }
}

bootstrapApplication(App);

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Angular Conditional Rendering - ngIf then/else</title>
</head>
<body>
  <app-root></app-root>
</body>
</html>