@engie-group/fluid-design-system-angular/src/components/modal/modal-wrapper.story-component.ts

Fluid Design System Angular

import { Dialog, DialogModule, DialogRef } from '@angular/cdk/dialog';
import { ChangeDetectionStrategy, Component, inject, TemplateRef } from '@angular/core';
import { ButtonComponent, ModalComponent } from '../../public-api';

@Component({
  selector: 'nj-modal-wrapper',
  template: `
    <nj-button (buttonClick)="_openModal(modalToOpen)">Open Modal</nj-button>
    <ng-template #modalToOpen>
      <nj-modal
        [hasCloseIcon]="hasCloseIcon"
        [modalId]="modalId"
        [closeLabel]="closeLabel"
        [isVerticallyCentered]="isVerticallyCentered"
      >
        <span njModalTitle>Modal Title</span>
        <div njModalContent>
          <p>Modal content</p>
        </div>
        <ng-container njModalFooter>
          <nj-button emphasis="subtle" (buttonClick)="_closeModal()">Cancel </nj-button>
          <nj-button (buttonClick)="_closeModal()">Submit</nj-button>
        </ng-container>
      </nj-modal>
    </ng-template>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [ModalComponent, ButtonComponent, DialogModule]
})
export class ModalWrapperStoryComponent extends ModalComponent {
  private _dialog = inject(Dialog);
  private _dialogRef: DialogRef;

  protected _openModal(modalToOpen: TemplateRef<any>) {
    this._dialogRef = this._dialog.open(modalToOpen);
  }

  protected _closeModal() {
    this._dialogRef?.close();
  }
}