-1

I am reusing one component two times but they have different width

<card-component [width]="50px">
<card-component [width]="30px">

//in card-component
@Input() public width: any;

<div [style.width]="width">

</div>

i want to change width of these two component (assign different width) to make it responsive on different screen size using media query. how can i get control of individual component.

jk123
  • 13
  • 4

1 Answers1

0

I think there are much better ways to do that, like use a wrapper div for every card-component and manage that div width with css, but you can make that with a hostlistener event that listens to screen width resize in component.ts

@HostListener('window:resize', ['$event'])
onResize(event) {
  // for example
  this.innerWidth = window.innerWidth / 3 + 'px';
}

and this in component.html

<!-- for example... -->
<card-component [width]="innerWidth">
<card-component [width]="innerWidth">
<card-component [width]="innerWidth">

https://stackoverflow.com/a/45350792/9764641

mbg
  • 53
  • 1
  • 11
  • this is assigning same width to every card component, what i want is to assign different width – jk123 Apr 10 '21 at 04:12
  • you can have a different variable for every component and set the value inside the onResize(event){...} – mbg Apr 10 '21 at 09:16