Angular 4: Argument of type 'typeof CLASS' is not assignable to parameter of type 'INTERFACE'

Question

I am playing around with dynamic components in angular. But I have hit a problem I do not know how to solve.

I got this interface.

export interface InjectableComponent{
    setData(data: any): void;
}

Class implementing interface.

export class DemoComponent implements InjectableComponent {
    setData(data: any): void {

    }
}

Function using interface as argument type.

openComponent(component: InjectableComponent, data: any) {
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(<any>component);
    this.placeholder.clear();

    let componentRef = this.placeholder.createComponent(componentFactory);
    (<InjectableComponent>componentRef.instance).setData(data);
}

Calling function.

openComponent(DemoComponent, null); <-- ERROR

Getting this error:

Argument of type 'typeof DemoComponent' is not assignable to parameter of type 'InjectableComponent'.
Property 'setData' is missing in type 'typeof DemoComponent'.

Can someone explain to me why this is not working? A workaround maybe?

You can try changing method openComponent(component: Type<InjectableComponent> plnkr.co/edit/bbejmaGKXVpgiRRBo3lE?p=preview — yurzui
– yurzui, Commented Jul 10, 2017 at 19:50
Thanks that worked. If you make an answer I will accept it. :) — Lars-Kristian Johansen
– Lars-Kristian Johansen, Commented Jul 10, 2017 at 19:59

yurzui · Accepted Answer · 2017-07-10 20:02:32Z

4

You can use special generic type Type<T> for that like

openComponent(component: Type<InjectableComponent>, data: any) {
   ...
}

Plunker Example

answered Jul 10, 2017 at 20:02

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DeborahK · Accepted Answer · 2017-07-10 19:39:56Z

1

It appears that the openComponent method is expecting an instance:

   const demoComponent = new DemoComponent()

   ...

   openComponent(demoComponent, null);

answered Jul 10, 2017 at 19:39

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

1 Comment

Lars-Kristian Johansen Over a year ago

I can see that, but I need the class type. It is used with .resolveComponentFactory. I tried making the interface to an abstract class and then extending instead of implementing, but got a similar error.

Collectives™ on Stack Overflow

Angular 4: Argument of type 'typeof CLASS' is not assignable to parameter of type 'INTERFACE'

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related