# UIB SnackbarModule

## Prequisites

Add the `SnackbarModule` module to your module imports:

```TS
import { SnackbarModule } from '@uib/angular';

@NgModule({
  imports: [
    // ...
    SnackbarModule.forRoot(),
    // ...
  ],
})
// ...
```

## UibSnackbar

### Options

```TS
{
  defaultIcon?: string; // default icon to use if no icon is present
  dismissButtonText?: string // text for the snackbar item dismiss button
  duration?: number; // dismiss notification after {duration} ms, default value is 0 (ifinite)
}
```

### Events

You can either subscribe to snackbar events via output or service observable:

```HTML
<uib-snackbar (dismiss)="onSnackbarItemDismiss($event)">
```

```TS
snackbarService.onItemDismiss$.subscribe(item => {...});
```

### Examples

#### Default

```HTML
<uib-snackbar maxItems="3" (dismiss)="onDismiss($event)">
</uib-snackbar>
<button uibButton (click)="createItem()">
  create snackbar item
</button>
<p style="padding: 16px 0;">
  Snackbar item count:
  <strong
    class="uib-badge uib-badge--primary uib-badge--s"
    [class.uib-badge--danger]="itemCount.count === 0"
    uibSnackbarItemCount
    max="3"
    #itemCount="snackbarItemCount"
  >
  </strong>
</p>
<ul>
  <li *ngFor="let item of items$ | async">
    {{ item.title }} - <i>{{ item.description }}</i>
  </li>
</ul>
```

```TS
public readonly items$ = this.snackbarService.getQueue$();

constructor(public readonly snackbarService: SnackbarService) {}

public createItem() {
  this.snackbarService.create({
    id: 'my_id',
    icon: 'my icon',
    title: 'notification title',
    description: 'notification description',
  });
}
```