in the below code, i want to do the following
if index is equal to 0 the text of the button should be info and enabled
and
if index is equal to 1 the text of the button should be INFO and disabled
please have a look at me attempt below and let me know the ansewer
code :
td *ngFor="let application of applications;let index=index">
<p>
<button (click)="showInfoWindow(application)" class="btn btn-sm btn-primary"
*ngIf = "index == 1; else INFO">info</button>
</p>
<ng-template #INFO disabled>
INFO.
</ng-template>
</td>
You could apply the condition using ternary operator for label and use [disabled]
property to enable/disable the button. You could take advantage of 0
being falsy in JS.
Try the following
<td *ngFor="let application of applications; let index=index">
<p>
<button (click)="showInfoWindow(application)" [disabled]="!!index" class="btn btn-sm btn-primary">
{{ !!index ? 'INFO' : 'info' }}
</button>
</p>
</td>
*ngIf
<td *ngFor="let application of applications;let index=index">
<p>
<button *ngIf="index; else enabled" (click)="showInfoWindow(application)" disabled class="btn btn-sm btn-primary">
INFO
</button>
<ng-template #enabled>
<button (click)="showInfoWindow(application)" class="btn btn-sm btn-primary">
info
</button>
</ng-template>
</p>
</td>
Working example: Stackblitz
It's much easier and quicker to directly render the index in the template rather than to console.log the current index.
<td *ngFor="let application of applications; let index=index" style="padding: 5px; border-right: 1px solid #000000;">
Current index: {{ index }}
...
</td>
If you however insist on printing into console, you could define a function in the controller and pass the current index to it using interpolation.
Controller
printIndex(index: number) {
console.log(index);
}
Template
<td *ngFor="let application of applications; let index=index">
{{ printIndex(index) }}
...
</td>
But beware: this might extremely misleading as the function will be triggered for each change detection cycle with default change detection strategy.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.