The if...else Statement in Angular

Use an if/else choice in an Angular template when the displayed value or content depends on component state. For a short text value, a conditional expression is compact. When each outcome contains a larger block, *ngIf can select between named ng-template blocks. *ngIf is case-sensitive; the spelling *ng-if is not the Angular directive.

Choose an Angular Conditional Rendering Pattern

Choose a conditional expression when both outcomes are short values in the same part of the template, such as a status label. Choose *ngIf with else when the alternatives have separate markup or should be maintained as distinct template blocks. In either pattern, the component owns the state and the template reflects its current value. Changing that value causes Angular to update the rendered view.

The examples below assume an existing component. They focus on its state and template rather than application creation or unrelated component setup. A conditional expression is JavaScript/TypeScript expression syntax; the Angular template evaluates it where it appears. *ngIf is an Angular structural directive that conditionally includes a view. These patterns solve related tasks, but a conditional expression does not create separate template blocks.

Show Text with a Conditional Expression

Give the component a boolean property, for example statement = true. In the template, use a conditional expression to choose the text:

<p>{{ statement ? 'This statement is True' : 'This statement is false' }}</p>

The expression before ? is the condition. Angular displays the value before : when it is true, and the value after : otherwise. Keep each result concise; nested conditional expressions quickly become difficult to read and are better expressed as component logic or separate template blocks.

Run this example:

const statement = true;
console.log(statement ? 'This statement is True' : 'This statement is false');

This statement is True

This small JavaScript example demonstrates the expression’s two-way choice independently; it does not execute an Angular application. To see the false case, run this variation:

const statement = false;
console.log(statement ? 'This statement is True' : 'This statement is false');

This statement is false

For this case, the selected text is This statement is false. In the Angular template, changing statement to false selects that same text. Keep the condition and both result values together in the template only when that makes the display logic easy to scan.

Render Alternative Templates with *ngIf

For different blocks of content, give *ngIf a condition and references for its then and else views. Each referenced template must exist in the same template scope:

<ng-container *ngIf="isLoggedIn; then loggedIn; else loggedOut"></ng-container>

<ng-template #loggedIn>
  <button>Logout</button>
</ng-template>

<ng-template #loggedOut>
  <button>Login</button>
</ng-template>

When isLoggedIn is true, Angular renders the loggedIn template; otherwise it renders loggedOut. The then and else values are template references, marked with #, not element IDs. The container is a host for the directive and does not add a wrapper element to the rendered page. Put the component property in the existing component class, such as isLoggedIn = true, and change it to see the other view. Use descriptive reference names when the branches contain more than a single control.

Test Both Branches and Avoid Common Errors

Check both outcomes by setting the component state to each value and confirming that the intended text or block appears. For the template-block pattern, verify that both reference names match their # declarations exactly and that both ng-template elements are present. A misspelled or missing reference prevents the intended alternative from being selected. Also check the directive’s capitalization: Angular recognizes *ngIf, not *ng-if.

Use a conditional expression for short inline alternatives and *ngIf when the branches are separate chunks of markup. Avoid comparing loosely when a boolean condition already describes the state; for a numeric choice, write an explicit comparison such as element === 1. These examples show template syntax and expression behavior, not a compiled Angular project, so an application-specific build or browser result depends on the component and Angular setup where the snippets are used.