# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.catui.igordrangel.com.br/janelas-e-alertas/notifications.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.