How to read passed params via context of NbDialogService inside the dialog component

Question

I have installed "@nebular/theme": "^7.0.0". And I'm trying to pass parameters via the NbDialogService to the component via the context property of the config, but I'm unable to read it into the dialog component. I've tried to declare @Input variables to look for 'data', 'context', or something like 'config' but it returns me undefined.

  // this is the main component from which I want to call the modal and pass some parameters
  constructor(private dialogService: NbDialogService) {}

  ngOnInit(): void {}

  openAddNewDialog() {
    const dialogRef = this.dialogService.open(AddStudentComponent, {
      context: 'Hello world',
    });
    dialogRef.onClose.subscribe((resp) => {
      console.log(`dialog closed`);
      console.log(resp);
    });
  }

These are the options I've tried to read the passed params into the dialog component

  // add-student.component.ts
  context: any;
  data: any;

  constructor(public ref: NbDialogRef<AddStudentComponent>) {
    console.log(this.data);
    console.log(this.context);
    console.log(ref);
  }

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

  // add-student.component.ts
  @Input() context: any;
  @Input() data: any;

  constructor(public ref: NbDialogRef<AddStudentComponent>) {
    console.log(this.data);
    console.log(this.context);
    console.log(ref);
  }

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

score 3 · Answer 1 · answered Apr 26 '21 at 09:16

As shown in the documentation, you have to pass an object to the context like this :

this.dialogService.open(ShowcaseDialogComponent, {
  context: {
    title: 'This is a title passed to the dialog component',
  },
});

Or in your case :

constructor(private dialogService: NbDialogService) {}

  ngOnInit(): void {}

  openAddNewDialog() {
    const dialogRef = this.dialogService.open(AddStudentComponent, {
      context: { title: 'Hello world'},
    });
    dialogRef.onClose.subscribe((resp) => {
      console.log(`dialog closed`);
      console.log(resp);
    });
  }

Then in your dialog component you can get it like this :

  // add-student.component.ts
  @Input() title: string;

  constructor(public ref: NbDialogRef<AddStudentComponent>) {    
  }

  ngOnInit(): void {
    console.log('here is your title: ', this.title); // displays 'Hello world'
  }

Hope it helps.

How to read passed params via context of NbDialogService inside the dialog component

1 Answers1