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>
*ngIf="j === 0; else elseBlock" is an Angular4 feature, not working in Angular 2 right? Anyway, that would be the best approach in my opinion: 1. Upgrade to Angular 4. 2. Apply this code.
angular2-template tag meaning actually template syntax for version 2.X as the description references Angular2 which is not the correct name of the framework.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.
