title: How to make ui-grid responsive to browser resize event in Angular typescript
body: <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>