How to define a component class as an interface field in Typescript?

Question

I have the following interface:

interface Drawer {
  title: string,
  content: Component
}

Afterwards I instantiate this interface:

let workspace: Drawer = {
    title: 'Workspaces',
    content: SidebarWorkspacesComponent
};

During compilation I get the following error:

ERROR in src/app/components/sidebar/sidebar-toggler.component.ts(36,4): error TS2559: Type 'typeof SidebarWorkspacesComponent' has no properties in common with type 'Component'.

Now I tried using ComponentRef and read dozens of articles but can't figure out how to pass a component in an interface. Obviously I could simply declare content as "any" but I would rather know how to do things properly.

Thanks in advance!

The closest thing that you can get without further deps. is `content: Type` using [Type from @angular/core](https://angular.io/api/core/Type), as components dont really share a common interface, unless you enforce it. — Jota.Toledo, Nov 23 '18 at 15:32
@SiddAjmera essentially it matches the placeholder interface approach that I describe in my answer. Its a solution, but IMO adds no value as its an empty interface. — Jota.Toledo, Nov 23 '18 at 15:55
Just added a comment for that. Thanks a lot for your inputs. — SiddAjmera, Nov 23 '18 at 15:56

SiddAjmera · Accepted Answer · 2018-11-23T15:56:14.803

4

Well, you can create an interface and then specify the type of content in the Drawer interface as that type. Something like this:

Here's that generic interface:

export interface GenericComponent {
  /*Your Specification Here*/
}

Then in your Drawer interface:

interface Drawer {
  title: string,
  content: GenericComponent
}

Now, you can assign any component that has implemented the GenericComponent interface on it to the Drawer interface's content.

So once you implement this GenericComponent interface on the SidebarWorkspacesComponent, you can then specify the type ofDrawer`'s content to it.

Here's a Sample StackBlitz for your ref.

edited Nov 23 '18 at 15:56

answered Nov 23 '18 at 15:45

SiddAjmera

38,129
5
72
110

I feel like it's the best approach for what I'm trying to accomplish. – Chololoco Nov 23 '18 at 18:26
@DannyCoulombe, awesome. Glad I could help :) – SiddAjmera Nov 23 '18 at 18:29

score 3 · Answer 2 · answered Nov 23 '18 at 15:50

The closest would be to make your interface generic and change it to:

interface Drawer<T = any> {
  title: string,
  content: Type<T>
}

Using the Type<T> interface from @angular/core, as components dont really share a common interface, unless you enforce it by implementing a sort of placeholder interface.

An example of the previous approach is the dialog API from material, as it uses a similar interface in order to take component types as arguments.

How to define a component class as an interface field in Typescript?

2 Answers2