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>`

would be better without flexbox. Unless it is the only option? — Jymbo
– Jymbo, Commented Nov 17, 2018 at 16:52

Martin Parenteau · Accepted Answer · 2018-11-17 17:09:06Z

7

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.

edited Nov 17, 2018 at 17:09

answered Nov 17, 2018 at 16:53

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

How to dynamically set max-width of sibling in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related