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"/>
Add a comment
|
2 Answers
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.
3 Comments
HDs Sergiu
After looking for a way to make fixed table header and footer this saved my day
HDs Sergiu
I am busting my head with angular, i did with javascript some tables with fixed header and footer , with transitions on width and a position that is bound to the scroll of the element. I am trying to do this in angular, do you have any advice? My current problem is like this. I have a header positioned absolute, i need to scroll the header left and right after the parent element scroll position, do you know any way i can do that? I presume with @hostlistener , but i don;t know how to catch the scrolling element.
Vega
@HDsSergiu, without the code and the exact context, it's hard to answer, but I as much as I understood, yes with a hostlistener. Put it on the parent and with a handle (template variable or Viewchild in typescript) get the header. Or if you put the hostlistener on the header watch for the document scroll
Also you can use [style.width.px]
<input [style.width.px]="{'width.px': myTable.offsetWidth }">
<table #myTable>...</table>
