Migrated gist (migrated)

ph-modal

<!--- BUTTON WHERE YOU WANT TO CALL THE MODAL --->
<ph-button 
  (buttonClick)="openModal()" 
  buttonClass="primary" 
  fieldClass="boxed" 
  buttonLabel="Modal"
  buttonText="Show modal" 
>
</ph-button>

<!---------------- TS FOR ABOVE ------------------>
import { ModalService, IModelSettings } from '@pixelheads-ui/components';
import { Subscription, of } from 'rxjs';
import { switchMap, defaultIfEmpty } from 'rxjs/operators';
import { Router } from '@angular/router';

private modalSubscription: Subscription = new Subscription();
constructor(private modalService: ModalService, private router: Router) {}

openModal() {
  const modalHeading = 'Are you sure?';
  const modalMessage = 'Message here...';
  const cancelText = 'Cancel';
  const submitText = 'Submit';
  const modelSettings: IModelSettings = {
    topPos: '50%',
    zIndex: 999,
    red: true,
    hideHeader: false
  };

  this.modalSubscription.add(
    this.modalService.openModal(
      modalHeading,
      modalMessage,
      modelSettings,
      cancelText,
      submitText
    ).subscribe((confirmed) => {
      console.log('Modal result:', confirmed);
      if (confirmed) {
        console.log('Form was confirmed');
      } else {
        console.log('Form was cancelled');
      }
    })
  );
}

redirectToAnotherPage() {
  this.router.navigate(['/']); // Redirect to the desired page if required
}

ngOnDestroy() {
  this.modalSubscription.unsubscribe();
}

<!------------- YOUR APP.COMPONENT.HTML ------------>
<router-outlet></router-outlet>
<!-- Modal container -->
<div #modalContainer></div>

<!-------------- YOUR APP.COMPONENT.TS ------------->
import { ModalService } from '@pixelheads-ui/components';
constructor(private modalService: ModalService) {}
@ViewChild('modalContainer', { read: ViewContainerRef }) modalContainer!: ViewContainerRef;

ngAfterViewInit() {
  console.log('ViewContainerRef setup');
  this.modalService.setViewContainerRef(this.modalContainer);
}

ngOnDestroy(): void {
  this.minimizeMenuSubscription.unsubscribe();
}