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>
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>
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:
I would personally recommend upgrading to Angular 4.
You can do this in Angular 2 by using the <ng-container> element. In your example it should be something like this:
<td *ngFor="let val of rows;let j=index">
<ng-container *ngIf="J==0">
<label>{{val}}</label>
</ng-container>
<ng-container *ngIf="J!=0">
<label style="color:#000000;font-size:12px;padding-top: 5px">{{val}}
</label>
</ng-container>
</td>
You can find more information in the docs: https://angular.io/guide/structural-directives#ng-container-to-the-rescue.