Get License

Cookbooks / Dialog + form

Dialog + form (CVA)

DialogService.open renders a standalone dialog. Controls inside use ngModel / CVA. Inject DialogContext and close(result) so the caller receives a typed payload.

  1. Install the pieces. Run npx base-ui-cli add dialog input custom-select tags-input.
  2. Open the dialog. Call DialogService.open(YourDialogComponent) from the parent.
  3. Bind the form. Use ngModel / CVA on controls inside the standalone dialog.
  4. Return a typed result. Inject DialogContext and close(result) so the subscriber receives the payload.

typescript

this.dialog.open(ProjectDialogComponent).subscribe((project) => {
  if (project) this.toast.success('Created ' + project.name);
});