Type of angular components

Question

Can I refer to angular component class as a type? I see Ionic uses any for components. Is it possible in Typescript to declare an argument type, that expects only component classes?

I saw this question, but components don't have anything in common in constructors: Passing class as parameter causes "is not newable" error

Phaih

What about the components is it that you care about in this context? Could you use an existing interface like OnInit for your needs? In general, components are written as unrelated classes with interfaces mixed in as required. – Whitewall

I care about classes wrapped in Component decorator. – Phaih

But that doesn't give them a type, it just attaches some metadata. So, again, what do you actually care about? Are you trying to call methods on them? Accessing properties? Think duck typing - what's the quack? – Whitewall

I am passing them to a router. It renders component. So it needs to be a Component. – Phaih

There's only so many ways to say that's not a type. So: – Whitewall

AFAIK the only way to do that would be to override the object prototype with something like getName. I don't know if Angular or Ionic does this. I'd find it useful if it was baked in somewhere. Ionic lazy loading tabbed pages with deep linking... See: #332922 – Radio

just define an interface RouteComponent and make all relevent components implement it – Balbur

An interface would affect only instances of a class, not a class. It would also involve adding a property to every component. I guess the only way is to write a decorator or override angular's one. I was hoping metadata somehow changes the class but looks like it stored outside of the class. – Phaih

Answer 1

As it turns out this is not possible in TypeScript right now. Decorators cannot change type of a class, that means they are invisible for a type system.
More info can be found here:

• https://github.com/Microsoft/TypeScript/issues/26347
• https://github.com/Microsoft/TypeScript/issues/4881

Phaih

Answer 2

There is ComponentType<T>. Maybe it will help.

import { ComponentType } from '@angular/cdk/overlay'; 

Naashom

Answer 3

If they are components that are created dynamically, Angular provides the ComponentRef class.

See here: https://angular.io/api/core/ComponentRef

A statically declared component won't have this class. Although, you can pass around Component identifiers as an untyped variable as needed, as long as you import them into the relevant components / services. If you're using dependency injection, i.e, to inject a component instance into its host directive, the 'type' would just be whatever its name is, like so -

 import { Directive } from '@angular/core'
 import { MyNavigatorComponent } from '../components/my-nav.component'

 constructor (private navigator: MyNavigatorComponent) {

Phobe

Answer 4

From: https://angular.io/api/core/ComponentRef

The Following represents a type that a Component or other object is an instance of.

An example of a Type is MyCustomComponent class, which in JavaScript is represented by the MyCustomComponent constructor function.

Code sample:

import { Type } from "@angular/core";

export type MyDynamicComponentType = Type<any>;

Flavopurpurin