To apply the condition and enable/disable the button, you can use a ternary operator for the label and the [disabled] property. In JavaScript, you can take advantage of the fact that 0 is falsy.
Give this a try:
<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>
Update: Using *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>
Here's a working example: Stackblitz
Update: Debugging the current index
Rather than using console.log to debug, consider directly rendering the index in the template for quicker access.
<td *ngFor="let application of applications; let index=index" style="padding: 5px; border-right: 1px solid #000000;">
Current index: {{ index }}
...
</td>
If you still want to print to console, create a function in the controller and pass the 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>
However, be cautious as this approach may lead to multiple function calls during change detection cycles with the default strategy.