CODEWITHSUNDEEP
javascripthtmlcssangularsize
alansiqueira27
alansiqueira27

Reputation: 8534

How can I bind Width of another element in Angular 2 - HTML?

I have an input and a table.

<input type="search"/>
<table id="myTable"/>

How can I bind the width of my input to the same width of the table?

Something like this?

<input type="search" [style.width]="#myTable.width"/>

Upvotes: 6

Views: 6746

Answers (2)

Adam
Adam

Reputation: 615

Also you can use [style.width.px]

<input [style.width.px]="{'width.px': myTable.offsetWidth }">
<table #myTable>...</table>

Upvotes: 0

Vega
Vega

Reputation: 28738

The reference in input tag should be for the <table>'s template variable, not the id. # is not necessary when using it in the expressions. You also need to retrieve the offsetWidth and not the width:

<input [ngStyle]="{'width.px': myTable.offsetWidth }">
<table #myTable>...</table>

In the above code, the table tag width will match input's width.

DEMO

Upvotes: 11

Related Questions