Alert component does not close one at a time

[32x0lf]

Hi,

I am using alert to display notification based on array of data. I have an implementation to store these notifications in db once it is closed. I tried using this code but it will close all of the notifications even I just closed one of the notification. Did I miss something?

<c-alert *ngFor="let data of notifications"
               #alertWithButtonCloseTemplate="cAlert"
               [dismissible]="dismissible"
               [visible]="visible[0]"
               (visibleChange)="onAlertVisibleChange($event)"
               color="info-gradient"
               fade
               variant="solid"
>
  <ng-template  [ngIf]="alertWithButtonCloseTemplate.dismissible" cTemplateId="alertButtonCloseTemplate">
    <button (click)="visible[0]=false" cButtonClose white></button>
  </ng-template>
  <h4 cAlertHeading>{{data.header}}</h4>
  <hr />
  <p class="mb-0" [innerHTML]="SanitizeHtml(data.message)"></p>
</c-alert>

Thank you

[xidedix]

you use prop visible array with index 0 for all your alerts

I'd rather use index variable with *ngFor

<c-alert *ngFor="let data of notifications; index as idx"
               [visible]="visible[idx]"
               ...
>
  <ng-template  ...>
    <button (click)="visible[idx]=false" cButtonClose white></button>
  </ng-template>
...
</c-alert>

[32x0lf]

@xidedix I tried but it will not work. Is this the correct initialization of visible variable. visible = [true,true] ?

[xidedix]

@32x0lf working example: https://stackblitz.com/edit/coreui-angular-alert-klshwt?file=src%2Fapp%2Fapp.component.ts

[32x0lf]

@xidedix Thanks it works.