if else in angular2 template syntax

Question

Angular2..why and how?

How do I execute the below if condition in angular2

    <td *ngFor="let val of rows;let j=index">
            IF J==0
                 <label>{{val}}</label>
            ELSE:
               <label style="color:#000000;font-size:12px;padding-top: 5px">{{val}}</label>

</td>

Answer 1

You can use the *ngIf structural directive with the if-else syntax to achieve this result.

<label *ngIf="j === 0; else elseBlock">{{val}}</label>
<ng-template #elseBlock>
    <label style="color:#000000;font-size:12px;padding-top: 5px">{{val}}</label>
</ng-template>

Another option is to use two *ngIf blocks and invert the conditional, like so:

<label *ngIf="j === 0">{{val}}</label>
<label *ngIf="j !== 0" style="color:#000000;font-size:12px;padding-top:5px">{{val}}</label>

Answer 2

If you plan on upgrading to Angular 4, you could use the new if / else in template that includes this version. Example:

<div *ngIf="someCondition; else falsyTemplate">
  <h1>Condition Passed!</h1>
</div>

<ng-template #falsyTemplate>
  <h1>Condition Failed!</h1>
</ng-template>

Check the following useful links:

• http://angularjs.blogspot.it/2017/03/angular-400-now-available.html
• http://tylerscode.com/2017/03/angular-4-ngifelse/
• https://medium.com/aviabird/ngif-else-lands-in-angular-2-0-a242940e54ff

I would personally recommend upgrading to Angular 4.