title: displaying selected columns through ag grid by check boxes
body: <p>I am new to angular 6, and I had to display data in a tabular format so I went for ag grid.</p>
  
  <pre><code>  &lt;div class = "row"&gt;
      &lt;div class = "col s8"&gt;
  &lt;ag-grid-angular
      #agGrid
      style="width: 50vw; height: 20vw;" 
      class="ag-theme-balham"
      [rowData]="rowData" 
      [defaultColDef]="defaultColDef"
      [columnDefs]="columnDefs"
      [enableColResize]="true"
      [rowSelection]="rowSelection"
      [groupSelectsChildren]="true"
      [enableSorting]="true"
      [enableFilter]="true"
      [animateRows]="true"
      [autoGroupColumnDef]="autoGroupColumnDef"
      [suppressRowClickSelection]="true"
      &gt;
  &lt;/ag-grid-angular&gt;
  &lt;/div&gt;
  &lt;div class="col s4"&gt;
          &lt;label&gt;
                  &lt;input [(ngModel)]="make" type="checkbox" /&gt;
                  &lt;span&gt;Maker&lt;/span&gt;
                &lt;/label&gt;&lt;br&gt;
          &lt;label&gt;
           &lt;input [(ngModel)]="model" type="checkbox" /&gt;
          &lt;span&gt;Model&lt;/span&gt;
              &lt;/label&gt;&lt;br&gt;
          &lt;label&gt;
               &lt;input [(ngModel)]="price" type="checkbox" /&gt;
                   &lt;span&gt;Price&lt;/span&gt;
              &lt;/label&gt;&lt;br&gt;
              &lt;br&gt;
              &lt;a class="waves-effect waves-light btn" (click) ="Dynamo()"&gt;&lt;i class="material-icons left"&gt;cloud&lt;/i&gt;Save&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In ag-grid's documentation(sort of) they have a <a href="https://www.ag-grid.com/javascript-grid-filtering/" rel="nofollow noreferrer">grid</a> which does this, but I dont know what has to be added to implement that.</p>
  
  <p>Check out the example called "Example Filter API" and you'll see clicking on column headers will show a tab like "||||" where you can select headers.if anyone knows how to add this functionality, help would be appreciated.</p>
  
  <p>This is the code for my  component(app.component.ts). I have tried to mimic that feature by making checkbox addition for fields.(Dynamo() function)</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { AgGridModule } from 'ag-grid-angular';
  import { FormsModule } from '@angular/forms';
  
  const staticColumnDefs = [
    {headerName: 'Make', field: 'make',checkboxSelection: true},
    {headerName: 'Model', field: 'model' },
    {headerName: 'Price', field: 'price', editable: false}
  ];
  const staticRowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
    { make: 'Maruti', model: 'Suzuki', price: 0 },
    { make: 'Volkswagen', model: 'Loki', price: 2000 },
    { make: 'Pagani', model: 'Thanatos', price: 172000 }
  ];
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    make = false;
    model = false;
    price = false;
    title = 'app';
    defaultColDef = {
      width: 180,
      editable: true,
      filter: "agTextColumnFilter"
    };
    sideBar = 'filters';
     startColumn =0;
     endColumn = 0;
    columnDefs = staticColumnDefs;
      header = ['make','model','price'];
      rowSelection = "multiple";
      autoGroupColumnDef = {
        headerName: "Make",
        field: "make",
        width: 200,
        cellRenderer: "agGroupCellRenderer",
        cellRendererParams: { checkbox: true }
      };
  
    rowData = staticRowData;
    Dynamo(){
      var arr = [];
      arr.push(this.make);
      arr.push(this.model);
      arr.push(this.price);
      var tempColumnDefs = [];
      var tempRowData = [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 },
        { make: 'Maruti', model: 'Suzuki', price: 0 },
        { make: 'Volkswagen', model: 'Loki', price: 2000 },
        { make: 'Pagani', model: 'Thanatos', price: 172000 }
      ];
      for( var i = 0;i&lt;staticColumnDefs.length;i++)
        {
          if(arr[i])
          {tempColumnDefs.push(staticColumnDefs[i]);}
        }
        for( var i = 0;i&lt;tempRowData.length;i++)
        {
          for(var j = 0;j&lt;this.header.length;j++)
          {
            if(!arr[j])
            {
              console.log(j);
              delete tempRowData[i][this.header[j]];
            }
          }
        }
  
        this.columnDefs = tempColumnDefs;
     this.rowData = tempRowData;
     tempRowData = []
    }
  }
  </code></pre>
  
  <p>I apologize if this question is too silly or noob-y.</p>