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.

Answer 1

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:

1. DialogComponent
2. 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.

Answer 2

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;

Answer 3

 // 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;