Angular- How to add different style to a reusable component?

Question

I have made a table where user can add data. The input field is a resuable component. I want to increase the width and height of the highlighted input field while decreasing the width of the ones inside the table. How do I do it?

This is the stackblitz link

Answer 1

There are two suggestions.

1. You can set the width of this component to 100% and then control the width of the component from where it is being used. (Only works for width)

width: 100%;

2. You can make the height and width as @Input fields of the component and also set up some default values so that you don't need to give the height and width every time you use the component.

resusable-component.ts

   @Input()
   height = 100;
    
   @Input()
   width= 100;

resusable-component.html

<div 
  [style.width.px]={width} 
  [style.height.px]={height}>
</div>

parent.component.html

<!-- When you want to have a custom height and width-->
<resusable [height]=200 [width]=300></reusable>

<!-- When you want to have a default height and width-->
<resusable></reusable>