Structural Directives: *ngIf (Show or Hide UI)

`*ngIf` is used when you want to show something only if a condition is true. ## Basic example ```html <p *ngIf="isLoggedIn">Welcome back!</p> <p *ngIf="!isLoggedIn">Please log in.</p> ``` ```ts export class AuthBannerComponent { isLoggedIn = false; } ``` ## Using else block (clean UI) ```html <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.