ngneat / dialog

👻 A simple to use, highly customizable, and powerful modal for Angular Applications
https://ngneat.github.io/dialog/
MIT License
394 stars 38 forks source link

Passing data to modal component displays undefined #100

Closed zigax1 closed 1 year ago

zigax1 commented 1 year ago

I'm submitting a


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report 
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[X ] Support request
[ ] Other... Please describe:

Current behavior

I have trouble passing data to modal dialog component.. When I want to pass data to the modal dialog, it displays undefined

'parent' component, in which I trigger a modal dialog component code is:

export class AdminPanelComponent implements OnInit {
  title = 'test';
  constructor(private dialog: DialogService) {}

  ngOnInit() {}

  open(passedData: any) {
    const dialogRef = this.dialog.open(EditUserComponent, {
      data: {
        title: this.title,
      },
    });
  }
}

Modal dialog component code is:

import { Component, Inject, Injectable, OnInit } from '@angular/core';
import { DialogService, DialogRef } from '@ngneat/dialog';

@Component({
  selector: 'app-edit-user',
  templateUrl: './edit-user.component.html',
  styleUrls: ['./edit-user.component.scss'],
})
@Injectable({ providedIn: 'root' })
export class EditUserComponent implements OnInit {
  ref: DialogRef<any, boolean> = Inject(DialogRef);

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

Maybe I am mistakenly using Inject(), because if I use lower letter --> inject() I get error that inject is unknown element in Angular.

Expected behavior

I want to display passed data in the modal dialog component

Environment

Angular version: 15 Ngneat version: 4.0.0

Browser:

milo526 commented 1 year ago

As per the angular documentation inject should be written with a lowercase i.

Are you sure you are importing inject from @angular/core?

If someone stumbles across this at some later point, inject() is available from Angular version 14 onwards, but that should be alright for your case.

zigax1 commented 1 year ago

That was completely my fault. The modal is working great! Thank you for the reply