Modal

import { Component, inject } from '@angular/core';
import { FrButtonModule } from '@frame-ui-ng/components/button';
import { FR_MODAL_DATA, FrModalModule, FrModalRef, FrModalService } from '@frame-ui-ng/components/modal';

type SettingsModalData = {
  workspace: string;
};

@Component({
  selector: 'app-settings-modal',
  imports: [FrButtonModule, FrModalModule],
  templateUrl: './settings-modal.html',
})
class SettingsModalComponent {
  readonly data = inject<SettingsModalData>(FR_MODAL_DATA);
  private readonly modalRef = inject(FrModalRef<SettingsModalComponent, 'cancel' | 'saved'>);

  close(result: 'cancel' | 'saved'): void {
    this.modalRef.close(result);
  }
}

readonly modal = inject(FrModalService);

openSettings(): void {
  const modalRef = this.modal.open(SettingsModalComponent, {
    workspace: 'Platform',
  }, {
    ariaLabel: 'Workspace settings',
    width: '32rem',
  });

  modalRef.closed.subscribe((result) => {
    // handle cancel or saved
  });
}

<button frButton type="button" (click)="openSettings()">Open modal</button>

<div frModalPanel>
  <div frModalHeader>
    <h2 frModalTitle>{{ data.workspace }} settings</h2>
    <p frModalDescription>Make focused changes without leaving the current page.</p>
  </div>

  <div frModalBody>
    Modal content goes here.
  </div>

  <div frModalFooter>
    <button frButton appearance="outline" type="button" (click)="close('cancel')">Cancel</button>
    <button frButton type="button" (click)="close('saved')">Save changes</button>
  </div>
</div>