Alert

O componente de alerta utiliza o Dialog por debaixo dos panos e serve como uma abstração de janela para feedbacks do sistema podendo optar por sucesso, alerta, error e informação.

Uso

page-alert.component.html

<cat-toolbar [config]="getToolbarInfo()">
  <nav buttons>
    <cat-success-button class="mr-8" (click)="openAlert('success')">Sucesso</cat-success-button>
    <cat-warning-button class="mr-8" (click)="openAlert('warning')">Atenção</cat-warning-button>
    <cat-danger-button class="mr-8" (click)="openAlert('error')">Error</cat-danger-button>
    <cat-info-button (click)="openAlert('info')">Informação</cat-info-button>
  </nav>
</cat-toolbar>

page-alert.component.ts

import { Component } from '@angular/core';
import { CatAlertService, CatAlertType } from '@catrx/ui/alert';
import { CatComponentBase } from '@catrx/ui/common';

@Component({
  templateUrl: './page-alert.component.html',
})
export class PageAlertComponent extends CatComponentBase {
  constructor(private alertService: CatAlertService) {
    super();
  }

  openAlert(type: CatAlertType) {
    this.alertService.show({
      type,
      message: `Alerta de Tipo: <b>${type}</b>`,
    });
  }
}

page-alert.module.ts

import { NgModule } from '@angular/core';
import { CatAlertModule } from '@catrx/ui/alert';
import { CatSuccessButtonComponent } from '@catrx/ui/button/seccess';
import { CatWarningButtonComponent } from '@catrx/ui/button/warning';
import { CatDangerButtonComponent } from '@catrx/ui/button/danger';
import { CatInfoButtonComponent } from '@catrx/ui/button/info';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { PageAlertComponent } from './page-alert.component';
import { PageAlertRoutingModule } from './page-alert.routing.module';

@NgModule({
  declarations: [PageAlertComponent],
  imports: [
    CatToolbarModule,
    CatSuccessButtonComponent,
    CatWarningButtonComponent,
    CatDangerButtonComponent,
    CatInfoButtonComponent,
    CatAlertModule,
    PageAlertRoutingModule,
  ],
})
export class PageAlertModule {}

Overview

https://cat-ui.igordrangel.com.br/components/alertcat-ui.igordrangel.com.br