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?
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
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;
}