Quiero mostrar múltiples Snackbar en el sitio web angular. Estoy usando ignite UI para angular y uso Snackbar de 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>Puedo mostrar el snacbar usando
@ViewChild(IgxSnackbarComponent, { static: true }) public igxSnackBar: IgxSnackbarComponent; this.igxSnackBar.show(); pero quiero mostrar otra barra de bocadillos, así que agregué id="snackbar1" y pude obtener la identificación usando
let snackbarId = this.igxSnackBar.id; console.log(snackbarId);pero no puedo abrir el snackbar en particular usando la identificación.
¿alguien puede ayudarme con esto?
¿Por qué no utiliza un selector @ViewChild específico para cada uno de los componentes de Snackbar ? Puede utilizar una variable de referencia de plantilla:
<igx-snackbar #snackbar1 [autoHide]="false" actionText="CLOSE" (clicked)="close(snackbar1)">Message sent</igx-snackbar>..
Una variable de referencia de plantilla 'snackbar1'
@ViewChild('snackbar1', { static: true }) public igxSnackBar: IgxSnackbarComponent;Con la implementación actual que compartiste, el detector de cambios buscará el primer Snackbar en el DOM.
El uso del método show() está obsoleto en las versiones más nuevas, use open() en su lugar.