I'm currently working on creating modals that will display different content based on which button is clicked. Each button should trigger a unique modal to appear, each with its own specific content inside. When a button is clicked, the 'active' property is set to true. If the value of 'active' is true, then the modal div receives the class .open.
HTML:
<button type="button" class="btn btn-4" (click)="myFunction(0)">ბანკი</button>
<div class="modal" [ngClass] = "**active[0].active1** ? 'open' : ''" >
<div class="text">gfdgdgd</div>
<button type="button" class="btn close" (click)="close()"><i class="fas fa-times-circle"></i></button>
</div>
Typescript:
active: any = [
{
active1:false,
},
{
active1:false,
},
{
active1:false,
},
{
active1:false,
},
];
constructor() { }
ngOnInit(): void {
}
myFunction(id:any){
this.active[id].active1 = true;
}
close(){
this.active = false;
}
I am encountering challenges when trying to assign the ngClass value from the active array. Since there are four modals, each has its own set of actives to determine their contents. How can I successfully implement
ngClass = "active[0].active1 : 'open'"