Buenas estoy haciendo un catalogo que al dar click muestre un card con más info. El problema viene que al darle click se abre todas las cards del catalogo.
Lo que quiero es que solo se muestre la card sobre la imagen que doy click. Utilizo el ngFor el de manera que la variable isShown se utiliza en todos los click. .html
<div class="catalogo" *ngFor="let img of imgenes">
<img class="portada" src="{{img.cover}}" (click)="isShown = !isShown">
<div class="collapse" [ngClass]="{ 'show': isShown }">
<div class="card mb-3" style="width: 100%;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="" class="card-img" alt="">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
Inicializo el Booleano
.ts
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-catalogo',
templateUrl: './catalogo.component.html',
styleUrls: ['./catalogo.component.scss']
})
export class CatalogoComponent implements OnInit {
isShown = false;
constructor() { }
ngOnInit() {}
}
Los estilos .scss
.body {
background: #29231E;
width: 100%;
}
.container {
width: 100%;
max-width: 1600px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 100px 0 50px 0;
margin: auto;
}
.catalogo {
width: 25%;
}