Home › Courses › Control Flow Statements - @if, @else, Toggle, Multiple Conditions

Control Flow Statements - @if, @else, Toggle, Multiple Conditions

62 / 63

Control flow statements are also called:

  1. Conditional statements
  2. If–else
  3. All mean the same thing in Angular.


Using Signal for Condition

Angular 21 recommends signals instead of normal properties.

Signal creation

isLogin = signal(true);
  1. true means user is logged in by default
  2. Signal must be imported before use


Basic @if Condition

@if (isLogin()) {
<span>Welcome User</span>
}
  1. Signal is used as a function: isLogin()
  2. If value is true, content is shown
  3. If false, content is hidden


@if with @else

@if (isLogin()) {
<span>Welcome User</span>
} @else {
<span>Please Login</span>
}
  1. Shows different content based on login status


Login / Logout Toggle with Button

HTML

<button (click)="handleLogin(false)">Logout</button>
<button (click)="handleLogin(true)">Login</button>

TypeScript

handleLogin(status: boolean) {
this.isLogin.set(status);
}
  1. Clicking button changes signal value
  2. UI updates automatically


Show and Hide (Toggle)

Signal

show = signal(true);

HTML

@if (show()) {
<button (click)="show.set(false)">Hide</button>
} @else {
<button (click)="show.set(true)">Show</button>
}
  1. No function needed
  2. Signal value is set directly
  3. Used for basic show/hide UI


Multiple Conditions (Status Example)

Signal

status = signal('not-started');

Possible values:

  1. not-started
  2. in-progress
  3. success
  4. error


HTML with Multiple Conditions

@if (status() === 'not-started') {
<span>Not Started</span>
} @else if (status() === 'in-progress') {
<span>In Progress</span>
} @else if (status() === 'success') {
<span>Success</span>
} @else {
<span>Error</span>
}
  1. Used for handling multiple states
  2. Each condition shows different output


Change Status Using Dropdown

HTML

<select (change)="handleStatus($event)">
<option value="not-started">Not Started</option>
<option value="in-progress">In Progress</option>
<option value="success">Success</option>
<option value="error">Error</option>
</select>


TypeScript

handleStatus(event: Event) {
const target = event.target as HTMLSelectElement;
this.status.set(target.value);
}
  1. Dropdown change updates signal
  2. UI updates based on selected value


Share this lesson: