# Dialog

### Uso

{% code title="dialog-example.component.ts" lineNumbers="true" %}

```typescript
import { Component, Inject } from '@angular/core';
import { CatDialogRef, CatDialogService, CatDialogSize, CAT_DIALOG_DATA } from '@catrx/ui/dialog';
import { CatFormService } from '@catrx/ui/form';

interface FormData {
  text: string;
  size: CatDialogSize;
}

@Component({
  templateUrl: './dialog-example.component.html',
})
export class DialogExampleComponent {
  formData: FormData;
  formConfig = this.formService
    .build<FormData>()
    .text('Inclua um texto para exibir no próximo Dialog', 'text', (builder) =>
      builder.generate()
    )
    .select('Tamanho do próximo Dialog', 'size', (builder) =>
      builder
        .setOptions([
          { value: 'small', name: 'Pequeno' },
          { value: 'medium', name: 'Médio' },
          { value: 'big', name: 'Grande' },
        ])
        .generate()
    )
    .onChange((value) => (this.formData = value))
    .generate();

  constructor(
    @Inject(CAT_DIALOG_DATA) public data: string,
    private dialogRef: CatDialogRef<DialogExampleComponent>,
    private dialogService: CatDialogService,
    private formService: CatFormService
  ) {}

  openAnother() {
    this.dialogService.open(DialogExampleComponent, {
      size: this.formData?.size,
      data: this.formData?.text,
    });
  }

  close() {
    this.dialogRef.close('showAlert');
  }
}
```

{% endcode %}

{% code title="dialog-example.component.html" %}

```html
<cat-dialog>
  <div header>Dialog</div>
  <div content>
    <span>{{data}}</span>
    <cat-form class="d-block mt-10" [config]="formConfig"></cat-form>
  </div>
  <div actions>
    <button (click)="close()" type="button" class="btn btn-secondary btn-sm mr-8">
      Fechar
    </button>
    <button (click)="openAnother()" type="button" class="btn btn-primary btn-sm">
      Abrir outro
    </button>
  </div>
</cat-dialog>
```

{% endcode %}

{% code title="page-dialog.component.ts" lineNumbers="true" %}

```typescript
import { Component } from '@angular/core';
import { CatComponentBase } from '@catrx/ui/common';
import { CatDialogService } from '@catrx/ui/dialog';
import { DialogExampleComponent } from './dialog-example.component';

@Component({
  templateUrl: './page-dialog.component.html'
})
export class PageDialogComponent extends CatComponentBase {
  constructor(private dialogService: CatDialogService) {
    super();
  }

  public open() {
    this.dialogService.open(DialogExampleComponent, {
      size: 'small',
      closeTrigger: 'showAlert',
      callbackCloseTrigger() {
        alert('Callback ao fechar.');
      },
    });
  }
}
```

{% endcode %}

{% code title="page-dialog.component.html" %}

```html
<cat-toolbar [config]="getToolbarInfo()">
  <nav buttons>
    <button (click)="open()" class="btn btn-primary btn-sm">
      Abrir Dialog
    </button>
  </nav>
</cat-toolbar>
```

{% endcode %}

{% code title="page-dialog.module.ts" lineNumbers="true" %}

```typescript
import { NgModule } from '@angular/core';
import { PageDialogComponent } from './page-dialog.component';
import { CommonModule } from '@angular/common';
import { CatDialogModule } from '@catrx/ui/dialog';
import { PageDialogRoutingModule } from './page-dialog.routing.module';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { DialogExampleComponent } from './dialog-example.component';
import { CatFormModule } from '@catrx/ui/form';

@NgModule({
  declarations: [PageDialogComponent, DialogExampleComponent],
  imports: [
    CommonModule,
    CatToolbarModule,
    CatDialogModule,
    CatFormModule,
    PageDialogRoutingModule,
  ],
})
export class PageDialogModule {}
```

{% endcode %}

### Overview

{% embed url="<https://cat-ui.igordrangel.com.br/components/dialog>" %}


---

# 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/dialog.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.