Reusable component with set Input() any type is a good practice?

Question

I created a reusable component that takes a list of elements of the type any. He works on these elements and in the case of pressing the button returns the state of the list he got. I'm worried about losing typing in this case. Is this a safe solution? I would like the component to be reusable. Is it possible to dynamically cast from any type to a different type?

I tried to cast object in set Input() but it is not possible

export class ReusableTableComponent {
  @Input() list: any[];
  @Output() selectedItems: EventEmmiter = new EventEmmiter<any>;
  selectedItemsList: any[] = [];

  emitChanges() {
  this.selectedItems.emit(this.selectedItemsList)}

}

The problem is, eventEmmiter is returning object type not specific type.

score 4 · Accepted Answer · answered Jun 07 '19 at 05:31

4

You can use a generic type:

export class ReusableTableComponent {
  @Input() list: T[];
  @Output() selectedItems: EventEmmiter = new EventEmmiter<T>;
  selectedItemsList: T[] = [];

  emitChanges() {
  this.selectedItems.emit(this.selectedItemsList)}

}

Read more about generic types in TypeScript here: https://www.typescriptlang.org/docs/handbook/generics.html

answered Jun 07 '19 at 05:31

Eliran Eliassy

1,590
12
25

Thanks but how i van pass Type to input from patent component ? – Blackboy Jun 07 '19 at 05:33
there are an interesting discussion about your question in https://stackoverflow.com/questions/46893991/declare-a-component-with-generic-type?rq=1, but I don't know if relative to your question – Eliseo Jun 07 '19 at 07:06

score 1 · Answer 2 · answered Jun 07 '19 at 05:34

1

yes you can use dynamic types in Typescript

export class ReusableTableComponent<LIST, EVENTLIST> {
  @Input() list: LIST[];
  @Output() selectedItems: EventEmmiter = new EventEmmiter<EVENTLIST>;
  selectedItemsList: EVENTLIST[] = [];

  emitChanges() {
  this.selectedItems.emit(this.selectedItemsList)}

}

answered Jun 07 '19 at 05:34

Sachila Ranawaka

39,756
7
56
80

Ok its good, but how i can pass Type by Input from parent component ? [list]=" objects[]" not working – Blackboy Jun 07 '19 at 05:35
can you create a stackblitz – Sachila Ranawaka Jun 07 '19 at 05:36
I cant now, writing on phone – Blackboy Jun 07 '19 at 05:37
@Blackboy here is a stackblitz on how you could create your component and pass in the type, https://stackblitz.com/edit/angular-9vj13j – Bogdan B Jun 07 '19 at 07:18

Reusable component with set Input() any type is a good practice?

2 Answers2