'Angular: Disabled card after clicking

I have three card that I show

<div *ngFor="let catalog of catalogs;let i=index" (click)="goToProducts(catalog)">
  <div>
    <div class="name-position text {{catalog.classe}}" style="font-size: 21px;">
      <img *ngIf="i == 1" style="max-width: 70%;" class="logo-catalog-header" src="assets/images/1.png" />
      <img *ngIf="i == 2" style="max-width: 70%;" src="assets/images/2.png" />
      <img *ngIf="i == 0" style="max-width: 70%;" src="assets/images/3.png" />
    </div>
    <div style="height: 50px;">
      <p *ngIf="i === 0" class="padd">P1 <br /></p>
      <p *ngIf="i == 1" class="padd">P2</p>
      <p *ngIf="i == 2" class="padd">P3</p>
    </div>
  </div>
</div>

I would try to disabled the card when clicked in one, how can I do?

javascript angular

Solution 1:^[1]

Try Like this HTML file

<div *ngFor="let catalog of catalogs;let i=index" 
                            (click)="goToProducts(catalog)" >
                            <div>
                                <div class="name-position text {{catalog.classe}}" style="font-size: 21px;">
                                    <img *ngIf="i == 1" style="max-width: 70%;" class="logo-catalog-header"
                                        src="assets/images/1.png">
                                    <img *ngIf="i == 2" style="max-width: 70%;" src="assets/images/2.png"
                                        >
                                    <img *ngIf="i == 0" style="max-width: 70%;" src="assets/images/3.png"
                                        >
                                </div>
                                <div style="height: 50px">
                                    <p *ngIf="i === 0" class="padd" disabled="disable">P1 <br>
                                    </p>
                                    <p *ngIf="i == 1" class="padd" disabled="disable">P2</p>
                                    <p *ngIf="i == 2" class="padd" disabled="disable">P3</p>
                                </div>  
                        </div>

TS file

disable = false;

goToProducts(catalog){
this.disable = !this.disable;
}

Solution 2:^[2]

in goToProducts function you must set enabledCards to false in the end of function enabledCards = false

You must define disabledCards in top level of your component class

enabledCards = true

and in goToProducts:

goToProducts(catalog) {
  if this.enabledCards { 
  ...your code
  }
  this.disabledCards = true
}

but you must think about time to set enabledCards to false

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2

'Angular: Disabled card after clicking

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]