How to pass and receive object in component to NbDialog component nebular ngx-admin?

Question

I want to pass object to NbDialogComponent and how to get object from NbDialogComponent.

Anyone say, Is way correct?

I try this way for pass object, Component file:

import { NbDialogService } from "@nebular/theme";

constructor(private dialogService: NbDialogService) { }

const paymentData : any = {
  service_id: 1,
  information: [{info:'test1'},{info:'test2'}],
  amount: 1000,
};

this.dialogService.open(AgreementComponent, {
  context: {data: paymentData}, // here i have got typescript error 
  hasBackdrop: true,
  closeOnBackdropClick: false,
});

Typescript Error: How to i fix this error

Type '{ data: any; }' is not assignable to type 'string | Partial'. Object literal may only specify known properties, and 'data' does not exist in type 'Partial'.ts(2322) dialog-config.d.ts(47, 5): The expected type comes from property 'context' which is declared here on type 'Partial<NbDialogConfig<string | Partial>>'

I try to this way for get obejct, DialogComponent File:

import { NbDialogRef } from '@nebular/theme';

constructor(protected dialogRef: NbDialogRef<AgreementComponent>) {}

ngOnInit(): void {
console.log('dialogRef', this.dialogRef.componentRef.instance.data);
}

Anyone tell me how to pass and receive object correct way and how to fix typescript error.

you want to get the value when dialog close? Or direct using EventEmitter — Luay AL-Assadi, Dec 30 '20 at 20:12

Luay AL-Assadi · Answer 1 · 2020-12-31T12:35:10.570

UPDATE

You're passing data as key in the context from your parent component however there are no data element in your DialogComponent so you can solve the error by add this to your DialogComponent

@Input() data: any;

Now If you want to get value when component close you can use subscribe method. lets assume that we have two components:

DialogComponent
ParentComponent

In your Parent Component we will call the DialogComponent like this:

this.dialogService.open(AgreementComponent, {
  context: {
    paymentData: paymentData // You should name key same as dialog component element here i have got typescript error 
  }, 
}).onClose.subscribe(returnedObj => {
  console.log(returnedObj);
});

In your DialogComponent we will return the object we want in close method like this:

import { Input } from '@angular/core';
import { NbDialogRef } from '@nebular/theme';

/** Here Your Component Declaration **/
export class AgreementComponent implements OnInit {
  @Input() paymentData: any;

  constructor(private dialog: NbDialogRef<any>) {}

  ngOnInit(): void {
    console.log(this.paymentData);
  }

  doSomethingHere(){
    var tempObject = {...this.paymentData}
        tempObject.extraData = 'testMe'
    this.close(tempObject)
  }
  
  close(returnedObject = null){
    this.dialog.close(returnedObject); // <- this closes the dialog. 
  }
}

P.S: You should handle if the user close the Dialog using escape button Or click out side the dialog.

you mean `console.log(returnedObj)` in ParentComponent Or `console.log(this.paymentData);` in DialogComponent — Luay AL-Assadi, Dec 31 '20 at 11:23
did you add AgreementComponent to your module as `entryComponents: [AgreementComponent]` — Luay AL-Assadi, Dec 31 '20 at 11:57
sorry for mistakes in copying code, I wrote it without test it, Btw your base error that the key name in context should match the input name in DialogComponent, I've edit the answer you can check it now — Luay AL-Assadi, Dec 31 '20 at 12:30

score 0 · Answer 2 · answered Mar 22 '21 at 23:38

In your component where you're trying to open and use the dialog:

this.dialogService
      .open(ComponentName, {
        context: {
          propertyName: propertyValue,
        },
      })
      .onClose.subscribe({
        next: (res) => {
          console.log(res);
        },
        error: (err) => console.error(`Observer got an error: ${err}`),
      });
  }

In your dialog component:

@Input() propertyName: any;

score 0 · Answer 3 · answered May 06 '22 at 11:36

 // when u call your Dialog
openDialog() {
    this.dialogService.open(YourComponentCallBack, {
      context: {
        data: this.code,
      },
    });
  }
// in --->YourComponentCallBack you need to get your varriable
// add this line
  @Input() data: any;

How to pass and receive object in component to NbDialog component nebular ngx-admin?

3 Answers3