title: How can I resize a table or div when clicking in Angular 2?
body: <p>Does anyone know how to resize a table or div when click on a button or somewhere in angular 2?
  I trying to resize a table width: 300px to 100px when clicking on a function that using CSS and typescript.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table{
    width: 300px;
    resize: horizontal;
    border: 2px solid;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>doResize(): void {
          document.getElementById("table").style.resize = "100px horizontal";
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="resizeTable"&gt;
        &lt;table id="table"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Id&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Price($)&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;BH12&lt;/td&gt;
              &lt;td&gt;Shirt&lt;/td&gt;
              &lt;td&gt;300&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
   &lt;button click="doResize()"&gt; Rezise &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>