How to pass a generic type and create instance of this type in angular 2 component

Question

How can I create a generic component in Angular 2/Typescript that is capable of creating an instance of the generic-type?

@Component({
    selector: 'generic',
    template: 'generic.html'
})
export class GenericComponent<T> {
    private array: T[];

    addElement() {
        const object = new T();
        this.array.push(object);
    }
}

Currently I get an error message saying:

TS2693: 'T' only refers to a type, but is being used as a value here.

Furthermore, I should be able to specify the type somehow:

<generic ...></generic>

Possible duplicate of [How to create a new object from type parameter in generic class in typescript?](https://stackoverflow.com/questions/17382143/how-to-create-a-new-object-from-type-parameter-in-generic-class-in-typescript) — ᴘᴀɴᴀʏɪᴏᴛɪs, Jun 12 '18 at 13:32

score 3 · Answer 1 · answered Jun 12 '18 at 13:32

3

Generics are erased at compile-time so you can't use the type argument T to create a new instance of T. You can however pass is a constructor of T to the class:

export class GenericComponent<T> {
    // Take the constructor of T to the component constructor
    constructor(private ctor: new ()=> T) {}
    private array: T[];

    addElement() {
        const object = new this.ctor();
        this.array.push(object);
    }
}

class Item {}
class ItemComponent extends GenericComponent<Item>{
    constructor(){
        super(Item) // Pass in the constructor of the concrete type
    }
}

answered Jun 12 '18 at 13:32

Titian Cernicova-Dragomir

230,986
31
415
357

Hi, I get stuck on how I should specify the constructor of T in Angular without using it's DI mechanism. – Bart Heyrman Jun 12 '18 at 13:57
@BartHeyrman you can just create a derived class as in the example above and use that, I don't think there is a simple way to use the generic component directly – Titian Cernicova-Dragomir Jun 12 '18 at 14:03
I found at least a working solution in the answer I just posted. – Bart Heyrman Jun 12 '18 at 14:59

score 3 · Accepted Answer · answered Jun 12 '18 at 14:55

A working solution can be:

@Component({
    selector: 'generic',
    template: 'generic.html'
})
export class GenericComponent<T> {
    private array: T[];

    @Input() creator: { new (): T; };

    addElement() {
        const object = new this.creator;
        this.array.push(object);
    }
}

@Component({
    selector: 'parent',
    template: '<generic [creator]="itemCreator" [array]="someArray"></generic>'
})
export class ParentComponent {
    private someArray: Item[];

    @Input() itemCreator: { new (): Item; };

    constructor() {
        this.itemCreator = Item;
    }

    ngOnInit() {
        this.someArray = [];
    }
}

class Item {}

In this case, I should be able to use the generic-component for all array-like objects.

How to pass a generic type and create instance of this type in angular 2 component

2 Answers2