How to make ui-grid responsive to browser resize event in Angular typescript
<p>I am coding Angular 1.x in typescript 1.5 + less css + bootstrap. 
ui-grid is used as an attribute on div as </p>

<p>Template</p>

<pre><code>&lt;div ui-grid="gridOptions" 
     class="ui-grid-collapsible" 
     ui-grid-auto-resize &gt;
&lt;/div&gt;
</code></pre>

<p>The view controller is setting <code>gridOption</code> in <code>$scope</code> </p>

<pre><code> this.$scope.gridOptions = {
                enableSorting: true,
                headerTemplate: "path to header template",
                rowTemplate: "path to row template"
                enableVerticalScrollbar: 0,
                enableHorizontalScrollbar: 0,
                columnDefs: []
                ......
}
</code></pre>

<p>Any pointers on why grid is not resizing on browser resize when other components on controller view are resizing.</p>

<p>Please assist. Do I need to catch the browser resize event and set chart grid height and width accordingly? If yes, then how? </p>