Is there a way to dynamically resize a table or div in Angular 2 by clicking on a button or other element? I am attempting to change the width of a table from 300px to 100px using a function that utilizes CSS and TypeScript.
table{
width: 300px;
resize: horizontal;
border: 2px solid;
}doResize(): void {
document.getElementById("table").style.width = "100px";
}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()"> Resize </button>