Verán estoy intentando de que al presionar un acordeón y luego al presionar otro se cierre automáticamente el anterior, creo que tendría que validarlo contra el index de cada acordeón, pero no se como hacer eso, alguien me podría ayudar con eso?
O si hay alguna manera de crear una variable que pueda manejar el estado?
Saludos.
Codigo HTMl
<nb-accordion style="width: 500px;" (click)="getListaMateriales(item.ItemCode)">
<nb-accordion-item>
<nb-accordion-item-header>
<div class="d-flex align-items-center">
<h4 class="mb-0 text-center text-hint" style="width: 2rem;">{{letra(i)}}</h4>
</div>
<div class="flex-grow-1" style="min-height: 45px;">
<div class="d-block">
<label class="font-weight-bold mb-0">{{item.ItemName}}</label>
</div>
<span class="text-hint text-sm">{{item.ItemCode}}</span>
<div class="form-row">
<ng-container *ngFor="let mat of item.listaMateriales">
<ng-container *ngIf="mat.activo == false">
<div class="col-6 pr-2 text-sm">
<i class="fas fa-minus-square text-danger"></i>
SIN {{mat.ItemName}}
</div>
</ng-container>
</ng-container>
</div>
</div>
<div class="d-flex align-items-center mx-2">
<div>
<h5 class="mb-0 text-center text-info" *ngIf="item.articuloBaseMenuCod != null">
{{(item.detalleOportunidad.Quantity * item.articuloBaseMenu.baseMenu.cantidad)}}
</h5>
<h5 class="mb-0 text-center text-info" *ngIf="item.articuloBaseMenuCod == null">
{{item.detalleOportunidad.Quantity}}
</h5>
<span class="text-hint text-sm">Cantidad</span>
</div>
</div>
<div class="d-flex align-items-center mr-3 px-2">
<button type="button" nbButton status="primary" (click)="setPreparado(item.codArticuloDetalleOportunidad)" [disabled]="item.estadoProduccion">
<i class="fas fa-check"></i>
</button>
</div>
</nb-accordion-item-header>
<nb-accordion-item-body>
<ul>
<li *ngFor="let item of materialArticulo">
{{item.ItemName}}
</li>
</ul>
</nb-accordion-item-body>
</nb-accordion-item>
</nb-accordion>
Codigo de TS
getListaMateriales(cod: string): void {
this.listadoMaterialesSvc.getList(cod).subscribe(res => {
this.materialArticulo = res;
}, error => {
this.toastr.error(error);
});
}
Espero alguien pueda ayudarme!! Saludos y gracias de antemano por su tiempo.