Confirm

O componente de confirmação utiliza o Dialog por debaixo dos panos e serve como uma abstração de uma janela de pergunta de Sim ou Não.

O componente de confirmação possui um ícone padrão, porém, caso queira alterar para algum de sua escolha, poderá trocá-lo informando nas opções pelo atributo icon um CatDynamicComponent passando seu componente de ícone do método ask assim como alguma ação, caso o usuário clique em não.

Uso

page-confirm.component.ts

import { Component } from '@angular/core';
import { CatConfirmService } from '@catrx/ui/confirm';
import { CatComponentBase } from '@catrx/ui/common';

@Component({
  templateUrl: './page-confirm.component.html'
})
export class PageConfirmComponent extends CatComponentBase {
  constructor(private confirmService: CatConfirmService) {
    super();
  }

  public ask() {
    this.confirmService.ask(
      'Você deseja mesmo continuar?',
      () => alert('Clicou em Sim'),
      {noCb: () => alert('Clicou em Não')}
    );
  }
}

page-confirm.module.ts

import { NgModule } from '@angular/core';
import { CatConfirmModule } from '@catrx/ui/confirm';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { PageConfirmComponent } from './page-confirm.component';
import { PageConfirmRoutingModule } from './page-confirm.routing.module';

@NgModule({
  declarations: [PageConfirmComponent],
  imports: [CatToolbarModule, CatConfirmModule, PageConfirmRoutingModule],
})
export class PageConfirmModule {}

page-confirm.component.ts

<cat-toolbar [config]="getToolbarInfo()">
  <nav buttons>
    <button (click)="ask()" type="button" class="btn btn-primary btn-sm">
      Confirmar
    </button>
  </nav>
</cat-toolbar>

Overview

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