How to use *ngIf else in Angular?

Atit

Nov 2, 2020·2 min read

As a developer, there is no limit to learning. We always need to be up to date with technologies as well as the upcoming or current features which are trending in the market.

Recently, I was looking for the best way to optimize my angular code.I have gone through a lot of articles and as we know it is limitless. Then I thought of consolidating the checklist for writing cleaner code for Angular which helped me and might help others too.

These small articles not only help you to write a better TypeScript or JavaScript Code but also clear the concepts of front-end technologies. This will help you to build your strong base and can help you in the upcoming frontend interviews.

One of the most basic topics in any programming is effectively used of ngIf else structural directive available in the frontend. Let’s discuss different syntax this directive supports.

export class AppComponent {
      value= true;
    }

1) *ngIf

<div *ngIf="value">
      It's Seen!
    </div>

    <!-- Negation operator-->
    <div *ngIf="!value">
      It's Not Seen!
    </div>

2) *ngIf and Else

<ng-container *ngIf="value; else elseNoValue>
      It's Done!
    </ng-container>

    <ng-template #elseNoValue>
      It's Not Seen!
    </ng-template>

3) *ngIf, Then and Else

<ng-container *ngIf="value;  then yesValue; else noValue">
    </ng-container>

    <ng-template #yesValue>
      It's Value!
    </ng-template>

    <ng-template #noValue>
      It's Not Value!
    </ng-template>

References:

Are you preparing for interviews? Here are frequently asked interview questions in Angular. It covers the Latest interview questions for Angular and Frontend development. Let’s check how many of these questions you can answer?