title: Change element width dynamically on Angular 5
body: <p>I have two tables.</p>
  
  <p>I want to set the width of the column of one table to equal the width of the column of another table.</p>
  
  <p>Like this :</p>
  
  <pre><code>    &lt;table class="table-header table"&gt;
          &lt;thead class="table-bordered"&gt;
            &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Last Name&lt;/th&gt;
                &lt;th&gt;Gender&lt;/th&gt;
                &lt;th&gt;Education&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
        &lt;/table&gt;
  </code></pre>
  
  <p>And the other table:</p>
  
  <pre><code>          &lt;table class="table-header table"&gt;
           &lt;thead class="table-bordered"&gt;
            &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Last Name&lt;/th&gt;
                &lt;th&gt;Gender&lt;/th&gt;
                &lt;th&gt;Education&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
        &lt;tbody&gt; 
           &lt;tr&gt; 
              &lt;td&gt; Ross &lt;/td&gt;
               &lt;td&gt; Ross &lt;/td&gt;
              &lt;td&gt; M&lt;/td&gt;
              &lt;td&gt; BsC &lt;/td&gt;
          ..
        &lt;/tbody&gt;
  </code></pre>
  
  <p>What I want to do is have all the headers of the first table to always equal the headers width of the second table.
  Because on the second table they get resized based on the content.</p>
  
  <p>So I know I can add a HostListener('window:resize')
  But how do I assign these values in Angular ?
  So that they're always the same. As if it's a duplicate of one another.
  Any guidance?</p>