Angular Material based Queue bar

Stack snackbars on top of one another. Display multiple snackbars at once.

This library is a forked copy of NgxQueueBar with updated dependencies, added support for snackbars opened from component, maximum number of snackbars configuration and others.

NgxQueueBar is basically a copy of MatSnackBar, with some key methods changed. Because of this you can use it using the API identical to MatSnackBar one.

Demo

Try out the Demo

Usage

Install the package:

npm install ngx-mat-queue-bar --save

Import QueueBarModule:

import { QueueBarModule } from 'ngx-mat-queue-bar';

@NgModule({
    declarations: [AppComponent],
    imports: [
        ...
        QueueBarModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Queue a snackbar:

constructor(private queueBarService: QueueBarService) {}

open(message: string, action: string) {
    this.queueBarService.open(message, action, {
        duration: 2000,
    });
}

Queue a snackbar from component:

export type NotificationData = { text: string; icon?: string; style?: 'warn' | 'error' };

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss'],
})
export class NotificationComponent {
  constructor(@Inject(QUEUE_BAR_DATA) public data: NotificationData) {}
}

constructor(private queueBarService: QueueBarService) {}

open(message: string, action: string) {
    this.queueBarService.openFromComponent(NotificationComponent, {
        duration: 2000,
    });
}

Maximum number of snackbars config

The use of the queue with unlimited snackbars popping up is restricted to when there is small number of snackbars active Hence I have added the ability to specify maximum amount of snackbars that can be active at a given moment.

Default max amount of visible snackbars is 4

You may change this setting using a provider of injection token QUEUE_BAR_CONFIG as follows:

const queueBarConfig: QueueBarConfig = { maxOpenedSnackbars: 20 };

...
providers: [
  {
    provide: QUEUE_BAR_CONFIG,
    useValue: queueBarConfig,
  }
]

It is important to note that this condition may be fulfilled only if the snackbars are timed that is have duration greater than 0. Snackbars with duration equal to 0, can only be dismissed manually and hence if there are more than max untimed snackbars they will not be hidden.

Note

You should really only use MatSnackBar because Material specification discourages stacking snackbars or displaying them consecutively side by side.