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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h3>Control Flow</h3>
    <button (click)="show = !show">Toggle</button>

    @if (show) {
      <p>Visible</p>
    } @else {
      <p>Hidden</p>
    }

    <ul>
      @for (item of items; track item) {
        <li>{{ item }}</li>
      }
    </ul>
  `
})
export class App {
  show = true;
  items = ['One','Two','Three'];
}

bootstrapApplication(App);

                    

<app-root></app-root>