I want to show multiple Snackbar on the angular website. I am using ignite UI for angular and using Snackbar from ignite.
<igx-snackbar id="snackbar1" [displayTime]="displayTime">
<div [class]="leftBorder"></div>
<div class="snackbar-detail">
<img [class]="iconType" [alt]="('LBL_CLOSE' | translate)" [src]="iconPath">
<div class="message-section">
<div class="snackbar-title">{{messageTitle}}</div>
<div class="snackbar-message">{{messageDesc}}</div>
</div>
<img (click)="closeSnackbar()" class="close-icon" [alt]="('LBL_CLOSE' | translate)"
src="assets/icons/essentials/close.svg">
</div>
</igx-snackbar>
I am able to show the snacbar using
@ViewChild(IgxSnackbarComponent, { static: true }) public igxSnackBar: IgxSnackbarComponent;
this.igxSnackBar.show();
but I want to show another snackbar so I have added id="snackbar1" and able to get the id using
let snackbarId = this.igxSnackBar.id;
console.log(snackbarId);
but I am not able to open the particular snackbar using the id.
can anyone please help me with this?
Why dont you use a specific @ViewChild selector for each of the Snackbar components. You can use a template reference variable:
<igx-snackbar #snackbar1 [autoHide]="false" actionText="CLOSE" (clicked)="close(snackbar1)">Message sent</igx-snackbar>
..
A template reference variable 'snackbar1'
@ViewChild('snackbar1', { static: true }) public igxSnackBar: IgxSnackbarComponent;
With the current implementation that you shared the change detector will look for the first Snackbar in the DOM.
Using of show() method is deprecated in the newer versions, use open() instead.