How can I resize a table or div when clicking in Angular 2?

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.

table{
  width: 300px;
  resize: horizontal;
  border: 2px solid;
}

doResize(): void {
        document.getElementById("table").style.resize = "100px horizontal";
    }

html

<div class="resizeTable">
      <table id="table">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Price($)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>BH12</td>
            <td>Shirt</td>
            <td>300</td>
          </tr>
        </tbody>
      </table>
  </div>
 <button click="doResize()"> Rezise </button>

How can I resize a table or div when clicking in Angular 2?

1 Answers