Directives & Control Flow

// Modern (Angular 22): host metadata + a signal input.
@Directive({
  selector: '[appHighlight]',
  host: {
    '(mouseenter)': 'hovered.set(true)',
    '(mouseleave)': 'hovered.set(false)',
    '[style.background-color]': 'hovered() ? color() || "yellow" : null',
  },
})
export class Highlight {
  color = input('', { alias: 'appHighlight' });
  protected hovered = signal(false);
}

@Component({
  selector: 'app-welcome',
  template: `
    @if (loading()) {
      <p>Loading…</p>
    } @else if (user(); as u) {
      <p>Welcome, {{ u.name }}</p>
      @if (u.admin) {
        <a href="/admin">Admin</a>
      }
    } @else {
      <p>Please sign in</p>
    }
  `,
})
export class Welcome {
  loading = signal(true);
  user = signal<User | null>(null);
}

@Component({
  selector: 'app-welcome-old',
  imports: [NgIf, AsyncPipe],
  template: `
    <div>
      <p *ngIf="user; else signIn">Welcome, {{ user.name }}</p>
      <ng-template #signIn><p>Please sign in</p></ng-template>
    </div>

    <div>
      <ng-template [ngIf]="user" [ngIfElse]="signIn2">
        <p>Welcome, {{ user!.name }}</p>
      </ng-template>
      <ng-template #signIn2><p>Please sign in</p></ng-template>
    </div>

    <button (click)="logIn()">Sign in</button>

    <div>
      <p *ngIf="user$ | async as u">Hi {{ u.name }}</p>
    </div>
  `,
})
export class WelcomeOld {
  user: User | null = null;
  user$: Observable<User> = of({ name: 'Rohit' });

  logIn() {
    this.user = { name: 'Rohit' };
  }
}

export interface Todo {
  id: number;
  title: string;
  done: boolean;
}

@Component({
  selector: 'app-todo-list',
  imports: [NgFor],
  template: `
    <label><input type="checkbox" (change)="hideDone.set(!hideDone())" /> Hide done</label>

    <ul>
      @for (todo of visible(); track todo.id) {
        <li>{{ todo.title }}</li>
      }
    </ul>

    <ul>
      @for (todo of visible(); track todo) {
        <li>{{ todo.title }}</li>
      }
    </ul>

    <ul>
      <li *ngFor="let todo of visible(); trackBy: trackById; let i = index">{{ i + 1 }}. {{ todo.title }}</li>
    </ul>
  `,
})
export class TodoList {
  todos = signal<Todo[]>([
    { id: 1, title: 'Buy milk', done: false },
    { id: 2, title: 'Walk dog', done: true },
    { id: 3, title: 'Write notes', done: false },
  ]);
  hideDone = signal(false);
  visible = computed(() => (this.hideDone() ? this.todos().filter((t) => !t.done) : this.todos()));

  trackById(index: number, todo: Todo) {
    return todo.id;
  }

  // An immutable update: same ids, brand-new objects.
  markAllDone() {
    this.todos.update((list) => list.map((t) => ({ ...t, done: true })));
  }
}

@Component({
  selector: 'app-todo-row',
  template: `
    <span>{{ title() }}</span>
    <button (click)="editing.set(true)">edit</button>
    @if (editing()) {
      <em>editing</em>
    }
    <input placeholder="note" />
  `,
})
export class TodoRow {
  title = input.required<string>();
  editing = signal(false);
}

@Component({
  selector: 'app-index-bug',
  imports: [TodoRow],
  template: `
    <div>
      @for (todo of todos(); track $index) {
        <app-todo-row [title]="todo.title" />
      }
    </div>
    <div>
      @for (todo of todos(); track todo.id) {
        <app-todo-row [title]="todo.title" />
      }
    </div>
  `,
})
export class IndexBug {
  todos = signal<Todo[]>([
    { id: 1, title: 'Buy milk', done: false },
    { id: 2, title: 'Walk dog', done: false },
    { id: 3, title: 'Write notes', done: false },
  ]);

  removeFirst() {
    this.todos.update((list) => list.slice(1));
  }
}

@Component({
  selector: 'app-for-vars',
  imports: [NgFor],
  template: `
    <ul>
      @for (item of items(); track item; let i = $index, last = $last) {
        <li [class.odd]="$odd" [class.last]="last">
          {{ i + 1 }}/{{ $count }} {{ item }}@if ($first) { (first)}
        </li>
      } @empty {
        <li>No items</li>
      }
    </ul>

    <ul>
      <li *ngFor="let item of items(); let i = index; let odd = odd; let last = last; let c = count"
          [class.odd]="odd" [class.last]="last">{{ i + 1 }}/{{ c }} {{ item }}</li>
    </ul>

    <table>
      @for (row of grid; track $index; let r = $index) {
        <tr>
          @for (cell of row; track $index) {
            <td>{{ r }},{{ $index }}={{ cell }}</td>
          }
        </tr>
      }
    </table>
  `,
})
export class ForVars {
  items = signal(['apple', 'banana', 'cherry']);
  grid = [
    ['a', 'b'],
    ['c', 'd'],
  ];
}

type Status = 'idle' | 'loading' | 'success' | 'error';

@Component({
  selector: 'app-status',
  imports: [NgSwitch, NgSwitchCase, NgSwitchDefault],
  template: `
    @switch (status()) {
      @case ('loading') {
        <p>Loading…</p>
      }
      @case ('success') {
        <p>Saved!</p>
      }
      @case ('error') {
        <p>Something went wrong</p>
      }
      @default {
        <p>Ready</p>
      }
    }

    @let s = status();
    @switch (s) {
      @case ('idle')
      @case ('loading') {
        <p>Busy or idle</p>
      }
      @case ('success') {
        <p>Saved!</p>
      }
      @case ('error') {
        <p>Failed</p>
      }
      @default never;
    }

    <div [ngSwitch]="status()">
      <p *ngSwitchCase="'loading'">Loading…</p>
      <p *ngSwitchCase="'success'">Saved!</p>
      <p *ngSwitchDefault>Ready</p>
    </div>

    @switch (code()) {
      @case (1) { <p>number one</p> }
      @default { <p>no match</p> }
    }
  `,
})
export class StatusView {
  status = signal<Status>('idle');
  code = signal<number | string>('1');
}

<ul>
  <li *ngFor="let t of todos" *ngIf="!t.done">{{ t.title }}</li>
</ul>

@Component({
  selector: 'app-container-vs-template',
  imports: [NgTemplateOutlet],
  template: `
    <div><ng-container><p>shown</p></ng-container></div>
    <div><ng-template><p>never shown</p></ng-template></div>
    <div>
      <ng-template #greet let-name>Hello {{ name }}</ng-template>
      <ng-container *ngTemplateOutlet="greet; context: { $implicit: 'Rohit' }" />
      <ng-container [ngTemplateOutlet]="greet" [ngTemplateOutletContext]="{ $implicit: 'Ravi' }" />
    </div>
  `,
})
export class ContainerVsTemplate {}