How to change style of a child angular component to be same size as another child component

Question

I have been struggling with this for a quite some time now, and i couldn't find a sufficient answer. Basically i have one parent component which html goes as follows:

<div class="container">
    <child-one></child-one>
    <child-two></child-two>
</div>

the problem is that the child-one component has its size set as auto, with some padding to look good,

child-one {
    width: auto;
    height: auto;
    padding: 0.5rem;
}

and child-two has a fixed width and height in it's own scss.

child-two {
    width: 10rem;
    height: auto;
 }

is there a way to somehow change the width of child-two in the parent without editing the child-two?

I was hoping for something along the lines of storing the width of the child-one, and setting the width of child-two to the same value.

child-one { 
    width:auto;
    padding: 0.5rem;
    $width: this.width !global //idk about this one
 }

child-two {
    width: $width
    padding: 0.5rem
 }

please note that the child-one and child-two scss don't look this way in the code, and are normally written, this is just for the purpose of simplifying the question

Answer 1

Is this what you are looking for?

app.component.html - Parent Component

<child-one #childOne></child-one>
<child-two #childTwo></child-two>
<br>
<button (click)="changeWidth()">Change child two width</button>

app.component.ts

export class AppComponent {

  @ViewChild('childOne', {
    read: ElementRef
  }) childOne: ElementRef;
  @ViewChild('childTwo', {
    read: ElementRef
  }) childTwo: ElementRef;

  constructor(private renderer: Renderer2) {}

  changeWidth() {
    const childOneWidth = this.childOne.nativeElement.getElementsByClassName('child-one')[0].offsetWidth;
    const childTwoElement = this.childTwo.nativeElement.getElementsByClassName('child-two')[0];
    this.renderer.setStyle(childTwoElement, 'width', `${childOneWidth - 2}px`);
  }
}

Here is the working Stackblitz

Answer 2

Suggestion

@SivakumarTadisetti's suggestion is a valid suggestion, alternatively, you could use ngStyle to provide dynamic styling for the component or ngClass for conditionally applying style class to the component. You could, which requires more code , also write a directive that changes the style behaviour of the component based on certain conditions.

Example using ngStyle

https://stackblitz.com/edit/stack-help-01