CODEWITHSUNDEEP
angulartypescriptkendo-uiprimeng
Mistu
Mistu

Reputation: 154

PrimeNG Dynamic Dialog instance/ content of component

I have problem with dynamic dialog in PrimeNg.

Is there any option to handle other actions on a dialog besides close?

For example, in Kendo-UI dialog example I can define content.instance of the component and I can access the fields of the component instance opened as dialog.

  const ref = this.dialogService.open(ResourceComponent, {
        data: {
            logicFormGroup: this.formGroup,
            resources: this.resources$
        }, width: '700px'
    });

    ref.onClose.subscribe((back: ResourceModel) => {
        console.log(back);
    });

   ref.addPersonEmitter.sub(....)

   in component ResourceComponent
   @Output() addPersonEmitter = new EventEmitter();

Upvotes: 5

Views: 8945

Answers (2)

Abdullah Tahan
Abdullah Tahan

Reputation: 2129

i solve it by passing eventemitter to dialog data and subscribed to that refernce

in parent

    oneventFire : EventEmitter<number> = new EventEmitter<number>();
this.dialogService.open(MyPopupComponent,
      {data: {  oneventFire : this.oneventFire },

in child

 if (this.config && this.config.data) { 
      this.oneventFire = this.config.data.oneventFire ;
    }

so then you can subscribe in parent and emit in children

Upvotes: 8

daniatic
daniatic

Reputation: 532

I had the same Issue and solved it like this:

const ref = this.dialogService.open(ComponentType, {});
let dialogRef = this.dialogService.dialogComponentRefMap.get(ref);
dialogRef.changeDetectorRef.detectChanges();
const instance = dialogRef.instance.componentRef.instance as ComponentType;
instance.someOutput.subscribe(() =>{ doSomething(); });

The call to detectChanges is necessary to trigger the dynamic dialog to load the component, otherwise the componentRef on the instance would be undefined. This is because the component just gets loaded in the ngAfterViewInit of the dialog.

Don't forget to unsubscribe on ngOnDestroy...

Upvotes: 9

Related Questions