Structural Directives: *ngIf (Show or Hide UI)

*ngIf is used when you want to show something only if a condition is true.

Basic example

<p *ngIf="isLoggedIn">Welcome back!</p>
<p *ngIf="!isLoggedIn">Please log in.</p>

export class AuthBannerComponent {
  isLoggedIn = false;
}

Using else block (clean UI)

<div *ngIf="isLoggedIn; else guest">
  <h2>Dashboard</h2>
</div>

<ng-template #guest>
  <h2>Home Page</h2>
  <p>Sign in to continue.</p>
</ng-template>

Tip

Use *ngIf to remove elements from the DOM entirely, not just hide them with CSS.

Next: *ngFor to render lists like a real app.