Dialog

import { Component } from '@angular/core';
import { WR_DIALOG_DATA, WrDialog, WrDialogClose, WrDialogContent, WrDialogFooter, WrDialogTitle } from 'ngwr/dialog';

@Component({ imports: [WrDialogClose, WrDialogContent, WrDialogFooter, WrDialogTitle] })
export class MyComponent {}

const ref = dialog.open(ConfirmComponent, {
  data: { title: 'Delete', message: 'Are you sure?' },
  width: '24rem',
});

const ok = await ref.awaitClose();

<!-- Inside the opened component.
     imports: [WrDialogTitle, WrDialogContent, WrDialogFooter, WrDialogClose] -->
<h2 wrDialogTitle>Delete</h2>
<div wrDialogContent>Are you sure?</div>
<div wrDialogFooter>
  <wr-btn wrDialogClose>Cancel</wr-btn>
  <wr-btn color="danger" [wrDialogClose]="true">Delete</wr-btn>
</div>

import { WR_DIALOG_DATA, WrDialogRef } from 'ngwr/dialog';

@Component({...})
export class EditUserComponent {
  private readonly ref = inject<WrDialogRef<EditUserComponent, boolean>>(WrDialogRef);
  protected readonly data = inject<EditUserData>(WR_DIALOG_DATA);

  save(): void {
    this.store.saveUser(this.form.value);
    this.ref.close(true);
  }
}

@Component({...})
export class MyComponent {
  private readonly dialog = inject(WrDialog);
  private readonly destroyRef = inject(DestroyRef);

  async confirmDelete(): Promise<void> {
    const ref = this.dialog.open<ConfirmComponent, boolean>(ConfirmComponent);
    const stop = this.destroyRef.onDestroy(() => ref.close());

    const ok = await ref.awaitClose();
    stop();
    if (ok) this.store.remove();
  }
}

// Or subscribe:
ref.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(ok => { … });

dialog.open(EditUserComponent, { closable: false });
dialog.open(EditUserComponent, { closeLabel: 'Discard changes' });

<!-- cdkFocusInitial needs no import. -->
<h2 wrDialogTitle>Rename project</h2>
<div wrDialogContent>
  <wr-form-field label="Name">
    <input wrInput cdkFocusInitial [(value)]="name" />
  </wr-form-field>
</div>
<div wrDialogFooter>
  <wr-btn wrDialogClose>Cancel</wr-btn>
  <wr-btn color="primary" [wrDialogClose]="name()">Save</wr-btn>
</div>

const ref = this.dialog.open<ConfirmComponent, 'saved' | 'discarded'>(ConfirmComponent);

const result = await ref.awaitClose(); // 'saved' | 'discarded' | undefined
if (result === undefined) return;      // dismissed