// login-status.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-login-status',
  standalone: true,
  template: `
    <button (click)="toggle()">Toggle login</button>
    @if (isLoggedIn) {
      <p>Welcome back!</p>
    } @else {
      <p>Please log in.</p>
    }
  `,
})
export class LoginStatusComponent {
  isLoggedIn = false;

  toggle() {
    this.isLoggedIn = !this.isLoggedIn;
  }
}

/*
  Notes:
  - @if/@else is the modern built-in control flow (Angular 17+) — no
    CommonModule import needed, unlike the older *ngIf directive.
  - When isLoggedIn is false, the "Welcome back!" <p> is genuinely
    absent from the DOM (not just hidden), and the @else block's <p>
    is rendered in its place.
*/