How to dynamically set max-width of sibling in angular

Question

Is it possible to set max-width of a div to same value as width of its sibling (in angular6)?

In other words, can I set max-width of "child_two" to the same value as width of "child_one" with the constraint that I just know the width of "child_one" when it is rendered?

`<div class="parent-div">
   <div id="child_one" class="child-div"> </div>
   <div id="child_two" class="child-div"> </div>
 </div>`

Answer 1

You can bind the max-width style attribute of child_two to the offsetWidth of child_one, with the help of a template reference variable child1:

<div class="parent-div">
  <div id="child_one" class="child-div" #child1 > </div>
  <div id="child_two" class="child-div" [style.max-width.px]="child1.offsetWidth"> </div>
</div>

See this stackblitz for a demo.