CODEWITHSUNDEEP
angulardependency-injection
mminnie
mminnie

Reputation: 152

Angular component - Create at runtime or statically with data parameter

I implemented a custom full screen dialog component using the Angular CDK and following this excellent blog post.

What I am trying to do is have my component accept injected data, but also create it statically. For example, I have a component to show some data about a customer. I want this same component to be shown in an overlaid dialog sometime. When the component is static, I can pass the customer data to the component via the @Input decorator. When I create it dynamically I can use the @Inject decorator as shown in the above mentioned blog.

The component constructor looks like this:

export class FilePreviewOverlayComponent {
  constructor(
    public dialogRef: FilePreviewOverlayRef,
    @Inject(FILE_PREVIEW_DIALOG_DATA) public image: any
   ) { }
}

It works fine for injecting the data when the component is dynamically created, however I get a StaticInjectorError when I create the component statically. The key message in the error is No provider for FilePreviewOverlayRef!.

I am lost as to how I can design the component to be statically or dynamically created with the ability to inject data into the component.

Upvotes: 1

Views: 333

Answers (1)

Malindu Sandaruwan
Malindu Sandaruwan

Reputation: 1517

You can solve the problem by using @Optional() before @Inject like below.

export class FilePreviewOverlayComponent {
    constructor(
          @Optional() public dialogRef: FilePreviewOverlayRef,
          @Optional() @Inject(FILE_PREVIEW_DIALOG_DATA) public image: any
    ) { }
}

Upvotes: 2

Related Questions