PrimeNG Dynamic Dialog instance/ content of component

user_6371246 0
Viewed 2498

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();
kendo-ui primeng angular typescript
2 Answers

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

user_18551770

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...

user_19553440
Related