# UIB NotificationModule

## Prequisites

Add the `NotificationModule` module to your module imports:

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

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

## UibNotification

### Options

```TS
{
  override?: boolean; // if false queue notifications, default value is true
  duration?: number; // dismiss notification after {duration} ms, default value is 0 (ifinite)
}
```

### Events

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

```HTML
<uib-notification-outlet (notificationClose)="onNotificationClose($event)">
```

```TS
notificationService.onNotificationClose$.subscribe(notification => {...});
```

### Examples

#### Default

```HTML
<uib-notification-outlet (notificationClose)="onNotificationClose($event)">
</uib-notification-outlet>
<hr />
<button uibButton (click)="showNotification()">
  show nofication
</button>
<p>
  Notification count: <strong uibNotificationCount></strong>
</p>
<ul>
  <li *ngFor="let notification of notifications$ | async">
    [{{ notification.type | uppercase }}]:  {{ notification.title }} - <i>{{ notification.description }}</i>
  </li>
</ul>
```

```TS
public readonly notifications$ = this.notificationService.getQueue$();

constructor(public readonly notificationService: NotificationService) {}

public showNotification() {
  this.notificationService.create({
    id: 'my_id',
    buttonText: 'ok',
    title: 'notification title',
    description: 'notification description',
    type: NotificationType.SUCCESS,
  });
}
```

#### With Queue

```HTML
<uib-notification-outlet (notificationClose)="onNotificationClose($event)">
</uib-notification-outlet>
<hr />
<button uibButton (click)="showNotification()">
  show nofication
</button>
<p>
  Notification count: <strong uibNotificationCount max="3"></strong>
</p>
<ul>
  <li *ngFor="let notification of notifications$ | async">
    [{{ notification.type | uppercase }}]:  {{ notification.title }} - <i>{{ notification.description }}</i>
  </li>
</ul>
```

```TS
public readonly notifications$ = this.notificationService.getQueue$();

constructor(public readonly notificationService: NotificationService) {}

public showNotification() {
  this.notificationService.create({
    id: 'my_id',
    buttonText: 'ok',
    title: 'notification title',
    description: 'notification description',
    type: NotificationType.SUCCESS,
  }, {
    override: false
  });
}
```