# Notifications

O **Cat UI** possui um sistema de notificações onde permite integrar com sua **API Backend** e exibir no **sidebar** e caso seja de sua escolha disparar notificações por **pushNotification**.

{% hint style="info" %}
**Importante**

Não é suportado o envio de pushNotifications sem que a aplicação esteja aberta no browser.
{% endhint %}

### Uso

<pre class="language-typescript" data-title="user.service.ts"><code class="lang-typescript"><strong>import { Injectable } from "@angular/core";
</strong>import { AppNotification } from "@catrx/ui";
import { Observable } from 'rxjs/internal/Observable';

@Injectable({ providedIn: 'any' })
export class UserService {
  private notifications: AppNotification[] = [
    {
      id: 1,
      title: 'Notificação de Demonstração',
      message: 'Clique para ir até a tela de Formulários Dinâmicos.',
      notifyOnBrowser: false,
      routerLink: '/components/form',
    },
    {
      id: 2,
      title: 'Notificação de Demonstração',
      message: 'Clique para ir até a tela de Datatable.',
      notifyOnBrowser: false,
      routerLink: '/components/datatable',
    },
    {
      id: 3,
      title: 'Notificação de Demonstração',
      message: 'Esta notificação não possui ação de clique.',
      notifyOnBrowser: false,
    },
    {
      id: 4,
      title: 'Notificação de Push',
      message: 'Clique para ir até a tela de Formulários Dinâmicos.',
      notifyOnBrowser: true,
    },
  ];

  public getNotifications() {
    return new Observable&#x3C;AppNotification[]>((observe) => {
      setTimeout(() => {
        observe.next(this.notifications);
      }, 300);
    });
  }

  public deleteNotification(id: number) {
    return new Observable((observe) => {
      this.notifications = this.notifications.filter(
        (notification) => notification.id !== id
      );
      observe.next(null);
    });
  }

  public deleteNotifications(ids: number[]) {
    return new Observable((observe) => {
      this.notifications = this.notifications.filter(
        (notification) => ids.indexOf(notification.id) &#x3C; 0
      );
      observe.next(null);
    });
  }
}
</code></pre>

{% code title="app.component.ts" %}

```typescript
import { Component } from '@angular/core';
import { CatAppService } from '@catrx/ui/core';
import { UserService } from './user.service';
import { CatDynamicComponent } from '@catrx/ui/dynamic-component';
import { LoginComponent } from './login.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  appConfig = this.appService
    .build('Cat UI', { ... })
    .setLogotype({ ... })
    .pushNotifications({
      getNotifications: this.userService.getNotifications(),
      getPermissionToNotifyOnBrowser: true,
      intervalToGet: 30000,
      onDelete: (id) => this.userService.deleteNotification(id),
      onAllDelete: (ids) => this.userService.deleteNotifications(ids),
    })
    .enableDarkMode()
    .generate();

  constructor(
    private appService: CatAppService,
    private userService: UserService) {}
}
```

{% endcode %}