Angular: Disabled card after clicking-CodePudding

I have three card that I show

<div *ngFor="let catalog of catalogs;let i=index" (click)="goToProducts(catalog)">
  <div>
    <div  style="font-size: 21px;">
      <img *ngIf="i == 1" style="max-width: 70%;"  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" >P1 <br /></p>
      <p *ngIf="i == 1" >P2</p>
      <p *ngIf="i == 2" >P3</p>
    </div>
  </div>
</div>

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

CodePudding user response：

Try Like this HTML file

<div *ngFor="let catalog of catalogs;let i=index" 
                            (click)="goToProducts(catalog)" >
                            <div>
                                <div  style="font-size: 21px;">
                                    <img *ngIf="i == 1" style="max-width: 70%;" 
                                        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"  disabled="disable">P1 <br>
                                    </p>
                                    <p *ngIf="i == 1"  disabled="disable">P2</p>
                                    <p *ngIf="i == 2"  disabled="disable">P3</p>
                                </div>  
                        </div>

TS file

disable = false;

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

CodePudding user response：

You must add *ngIf to nested div

<div *ngIf=disabledCards.includes(i) == false>

and in goToProducts function you must add number of disabled card to disabledCards list

You must define disabledCards in top level of your component class

disabledCards = []

and in goToProducts:

goToProducts(catalog,i) {
  this.disabledCards.push(i)
...
}

and change goToProducts call to

goToProducts(catalog,i)


<div *ngFor="let catalog of catalogs;let i=index" (click)="goToProducts(catalog, i)">
  <div *ngIf=disabledCards.includes(i) == false>
    <div  style="font-size: 21px;">
      <img *ngIf="i == 1" style="max-width: 70%;"  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" >P1 <br /></p>
      <p *ngIf="i == 1" >P2</p>
      <p *ngIf="i == 2" >P3</p>
    </div>
  </div>
</div>

but you must think about time to clear disabledCards