Passing Data to modal.

[32x0lf]

Please add in the documents on how to pass data to modal. Thank you

[xidedix]

Again, your question is: how to pass some data to any Angular component? It depends! Some of your options:

• Create a service responsible for communication between components - (passing data to a Modal in this case). or
• Use NgTemplateOutlet to communicate between parent and dynamic child components, with ng-template context parameters to pass some data.

[32x0lf]

Again, your question is: how to pass some data to any Angular component? It depends! Some of your options:

• Create a service responsible for communication between components - (passing data to a Modal in this case). or
• Use NgTemplateOutlet to communicate between parent and dynamic child components, with ng-template context parameters to pass some data.

Hi @xidedix, I was able to pass data to modal from another component using the dialog angular cdk and inject it inside the modal. My only problem now I am facing is whenever I open and close the modal, the backdrop will become darker and darker. Image 1 first close Image 2 2nd close. Image 3 3rd close. Image 4 4th close.

[xidedix]

@32x0lf It seems you have to remove the backdrop. Since we don't know anything about your implementation, you'll have to find out is it coreui backdrop or cdk backdrop.

[32x0lf]

@xidedix I think from coreui.

this is the code inside the component

Data!: InfoInterface

constructor(
    public dialog: Dialog) { }

ShowModal(){
    this.dialog.open(InfoComponent, {
      minWidth: '300px',
      data : this.Data,
      closeOnDestroy:true
    });
  }

and this is from the modal

export class SharedModalComponent implements OnDestroy{

  public modalSubscription!: Subscription;
  public modalVisible = false;

  constructor( 
    private modalService: ModalService,
    public changeDetectorRef: ChangeDetectorRef,
    @Inject(DIALOG_DATA) public data: InfoInterface) { }

 @Input()
    set show(value) {
      this._show = value;
      this.modalService.toggle({
        show: value,
        id: 'sharedmodal,
      });
    }

 get show() {
      return this._show;
    }
    private _show = false;

    @Input()
    set hostView(value) {
      this._host = value;
    }

    get hostView() {

      return this._host;
    }
    private _host?: ViewContainerRef;

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

    @ViewChild('modal') private modal!: ModalComponent;

  ngAfterViewInit(): void {
    this.modalSubscription = this.modalService.modalState$.subscribe((next) => {
      if ((next.id ?? next.modal?.id) === this.modal.id) {
        this.modalVisible = next.show;
      }
    });

    setTimeout(() => {
      this.show = true;
      this.changeDetectorRef.markForCheck();
    }, 100);
  }

  handleClose($event: MouseEvent) {
    this.show = false;
    this.changeDetectorRef.markForCheck();
  }

  handleAnimationDone($event: AnimationEvent) {
    if (
      $event.fromState === 'visible' &&
      $event.toState === 'hidden' &&
      $event.phaseName === 'done'
    ) {
       //this.hostView?.get(0)?.destroy();
      this.hostView?.clear();
    }
  }
}

[32x0lf]

and this is the shared modal html

<c-modal
  id="sharedmodal"
  #modal="cModal"
  backdrop="static"
  [visible]="modalVisible"
  size="xl"
>
  <c-modal-header>
    <h5 cModalTitle>Modal</h5>
    <button (click)="handleClose($event)" cButtonClose></button>
  </c-modal-header>
  <c-modal-body>{{data}}</c-modal-body>
</c-modal>

[32x0lf]

is this something can be fixed?

[32x0lf]

@xidedix I think I found the reason, If I add inside modal-body I will encounter that behavior. I already tried using service and not the cdk dialog but still the same. and when I tried to use the empty modal-body, I will not encounter that issue.

[32x0lf]

@xidedix never mind I missed this (@showHide.done)="handleAnimationDone($event)" .