Setting the `type` of @Input at runtime : Angular & typescript

Question

I have a component which displays data and also emit event on a click (after doing some calculation on it)

So display.component

type ClickEvent = {
  data: any, //<-- it should be same as @input data
  something: number;
}
export class DisplayComponent{

 @Input() data: any;

 @Output() clicked = new EventEmitter<ClickEvent>() 

 buttonClicked(){
    this.clicked.emit({data: this.data , something: 2})
  }

}

I want to make sure that the @Output and @Input are of same type. So the the user can use intellisense to access the $event which is being sent as this.clicked.emit(this.data)

If your type is predicted, then you can use interface and adds interface as type to both input and output. That's more easy for you to implement. — Gaurang Dhorda
– Gaurang Dhorda, Commented May 19, 2021 at 10:51

IAfanasov · Accepted Answer · 2021-05-19 10:06:02Z

2

Generics to the rescue

type ClickEvent<TEventData> = {
  data: TEventData, 
  something: number;
}
export class DisplayComponent<TComponentData>{

 @Input() data: TComponentData;

 @Output() clicked = new EventEmitter<ClickEvent<TComponentData>>();

 buttonClicked(){
    this.clicked.emit({data: this.data , something: 2})
  }

}

edited May 19, 2021 at 10:06

answered May 19, 2021 at 9:58

IAfanasov

5,0333 gold badges30 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Samuel Over a year ago

Thanks. I have made an update in the question. Sincere apologies for changing the question little bit

Samuel Over a year ago

When I try to assign a value like @Input() data: TComponentData = { p1: 'Val1' } , it doesn't accept it. Says is not assignable to type 'TComponentData'.

IAfanasov Over a year ago

that is not that easy to address. Here is the possible solutions: stackoverflow.com/a/52477831/390161

Collectives™ on Stack Overflow

Setting the `type` of @Input at runtime : Angular & typescript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related