How can I use *ngIf else in Angular?

General Discussions
1

I’m working with Angular and want to simplify conditional rendering using *ngIf else. Instead of writing two separate *ngIf blocks, how can I cleanly use ngIf else to display alternate content when a condition is false?

Looking for a proper example of how ngIf else works.

2

I used to write two separate *ngIf blocks, one for true and another for false, but switching to *ngIf else made my templates way cleaner.

Here’s how I do it:

<div *ngIf="isValid; else fallback">
  Content if true
</div>
<ng-template #fallback>
  Content if false
</ng-template>

This way, everything stays in one spot, and it’s more readable. Especially helpful for toggling loading states or access permissions.

3

What really helped me grasp ngIf else was understanding that the else points to a <ng-template> by reference. I do something like:

<ng-template #notValid>
  <p>Please check your input.</p>
</ng-template>

<div *ngIf="formValid; else notValid">
  <p>Thanks for submitting!</p>
</div>

That #notValid is just a template alias. You can even reuse it in multiple places, which is super convenient.

4

Sometimes I go a step further and use both then and else like this:

<div *ngIf="status === 'loading'; then loadingBlock; else contentBlock"></div>

<ng-template #loadingBlock>
  <p>Loading...</p>
</ng-template>

<ng-template #contentBlock>
  <p>Data is here!</p>
</ng-template>

It’s handy when you have more than a simple true/false situation. You get more control over what appears and when.