Unplanned
Last Updated: 11 Mar 2024 03:24 by Anthony
Anthony
Created on: 26 Feb 2024 04:23
Category: Dialog
Type: Feature Request
2
Dialog Service to provide its own injector

Hi,

I'm using the DialogService and it would be good to be able to provide my own injector so I can extended the service. Currently the DialogService uses the container's injector.

Reason for this feature request is to provide data to the dialog itself via DI, similar to how Angular Material allows this via MAT_DIALOG_DATA injection token.

Thanks,

Anthony

4 comments
Anthony
Posted on: 11 Mar 2024 03:24
Another reason to provide the injector is to resolve the correct Provider when content is a Component type. ViewContainerRef.injector is insufficient to resolve references.
ADMIN
Martin Bechev
Posted on: 06 Mar 2024 09:43

Hi Anthony,

Thank you for providing additional feedback.

I converted this ticket to a feature request item:

https://feedback.telerik.com/kendo-angular-ui/1642601-dialog-service-to-provide-its-own-injector

We will monitor the demand and consider implementing it in the future based on the interest.

Regards,
Martin
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Anthony
Posted on: 04 Mar 2024 06:10

Thanks for your reply.

I understand that this is the current way to set properties by referencing the following:

dialogRef.content.instance

This is more of a feature request to the team, in the hope to make the dialog component more extensible.

The Angular Material Dialog, you can provide additional data then reference it via an injection token. I would like to have this feature in order to provide a clean separation between various modules in my application.

See: https://material.angular.io/components/dialog/api#MAT_DIALOG_DATA

Thanks,

Anthony

 

 

ADMIN
Martin Bechev
Posted on: 28 Feb 2024 13:29

Hi Anthony,

Thank you for the provided feedback.

With the current implementation of the Dialog, its content can be:

- string:

public showConfirmation(template: TemplateRef<unknown>): void {
const
dialog: DialogRef = this.dialogService.open({ title: 'Please confirm', content: 'Are you sure?' ... });
}

 

- template

<ng-template #itemListRef>
     Custom content
  </ng-template>
  

public showConfirmation(template: TemplateRef<unknown>): void { this.dialogService.open({ title: "Please confirm", content: template,
... }); }

 

- custom Angular component:

  public showConfirmation(): void {
    const dialogRef: DialogRef = this.dialogService.open({
      title: "Please confirm",
      content: UserInfoComponent,
... }); }

To dynamically control the properties of the UserInfoComponent, use @Input decorator for the desired ones and set them manually when the dialog is shown:

    const userInfo = dialogRef.content.instance as UserInfoComponent;
    userInfo.name = "admin";
    userInfo.age = 42;

In a similar fashion, the developer can access all the information from the custom content component inside the component where the Dialog is displayed:

 const userInfo = dialogRef.content.instance as UserInfoComponent;
console.log(userInfo.age);

For more details please check the following article:

https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/#toc-content-component

Please checkout these options and let me know in case they are still not enough to achieve the desired outcome.

Regards,
Martin
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources