0

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>
Amrmsmb
  • 1
  • 27
  • 104
  • 226
  • Does it mean there are only two elements in the `applications` array? – ruth Apr 01 '21 at 06:06
  • @MichaelD yes..but i would like to achieve what i have explained in the question regardless of the numbers of the application – Amrmsmb Apr 01 '21 at 06:09
  • What do mean by "_regardless of the numbers_"? So enabled and 'info' if index=0 and disabled and 'INFO' for _anything other index_? – ruth Apr 01 '21 at 06:10

1 Answers1

1

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>

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>

Working example: Stackblitz

Update: debug current index

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.

ruth
  • 29,535
  • 4
  • 30
  • 57
  • can we achieve that using *ngIf?? – Amrmsmb Apr 01 '21 at 06:11
  • i mean the code you posted is edifying, but to achive the same results with ngIf – Amrmsmb Apr 01 '21 at 06:13
  • 1
    @user2121: Yes you can but I'm not sure why you'd want to do that. It'd only lead to duplicated code for the button element. I've updated the answer. – ruth Apr 01 '21 at 06:14
  • do you mean in such scenario we do not need to use ngIf!! – Amrmsmb Apr 01 '21 at 06:17
  • please let me know why you preceded index bt !! in the code you posted, {{ !!index ? 'INFO' : 'info' }} what does it mean – Amrmsmb Apr 01 '21 at 06:19
  • @user2121: **1.** You don't need `*ngIf` as evidenced by the solution 1 in the answer. **2.** `!!` is used to convert a JS object to boolean. See here for more info: https://stackoverflow.com/a/784946/6513921 – ruth Apr 01 '21 at 06:22
  • i tried the 1st soultion you posted and it always prints INFO!! – Amrmsmb Apr 01 '21 at 06:26
  • I've included working examples for both the variants. – ruth Apr 01 '21 at 06:39
  • would you please tell me how to display the value of the index in the browser using console.log?? – Amrmsmb Apr 01 '21 at 07:15
  • @user2121: Do you need it to check the current index of the iteration? – ruth Apr 01 '21 at 07:16
  • @user2121: I've updated the answer and the working example. – ruth Apr 01 '21 at 07:29
  • for the 2nd code you posted it always displays INFO capitalized the code i ihave is as follows

     – Amrmsmb Apr 01 '21 at 07:40
  • It works in the Stackblitz. Please try to create a working example with the error. – ruth Apr 01 '21 at 07:52
  • i posted this question https://stackoverflow.com/questions/66900549/button-label-is-not-comformable-with-the-value-set-in-button-tag the Update: debug current index you posted is correct – Amrmsmb Apr 01 '21 at 08:00