How can I pass a generic type parameter to an Angular2 component?

Question

Let\'s say I got a component with a fixed input parameter type,

@Component({
    selector: \'fixed\',
    template: \'
{{value}}
\'
})
e         


        

Answer 1

It seems that when using AOT compilation the only way to do this is to replace the generic type with 'any'. See https://github.com/angular/angular/issues/11057

Answer 2

I'm just playing with angular and I made this working by using ViewChild, by having Inner and Outer Component.

In inner component declaration of component is like:

@Injectable() 
@Component({
selector: 'inner-selector',
templateUrl: ...,
styleUrls: ...,
directives: [
...]
export class InnerComponent**<T>**  ...

in outer component which called by router I did:

import {Component} from '@angular/core';
import {InnerComponent} from '../components/inner.component';
import {ViewChild  } from '@angular/core';

@Component({
  selector:     'demo-app',
   template:  '<inner-selector></inner-selector>',
directives: [InnerComponent]
})
export class TestPage { 

  @ViewChild(InnerComponent)
  **private innerComponent:InnerComponent<MPSalesHeader>;**
};

I don't know is this a good way, but it worked.

Regards!

Answer 3

It seems you can use generic type parameters in Angular 2 child components.

@Component({
  selector: 'app-child',
  template: '<p>Generic Child</p><p>{{cp}}</p>'
})
export class GenericChildComponent<T> {
  @Input() cp: T;
}

import { GenericChildComponent } from './generic-child.component';
@Component({
  selector: 'app-root',
  template: '<app-child [cp]="p1"></app-child><hr /><app-child [cp]="p2"></app-child>',
  directives: [GenericChildComponent]
})
export class ParentComponent {
  p1: string = 'property 1';
  p2: number = 100;
}

This works without recourse either to the ViewChild technique suggested above or to a base class technique suggested here.