'How to hide/show columns in ag-grid based on checkbox selection on column names

enter image description here

enter image description here ?

I have developed a ag-grid in angular for my project. I need to show/hide columns when i click on the checkbox present on the show/hide toolpanel. Attached the image for reference. Any help on this is appreciated. Below is the code for reference. Is there any feature in ag-grid that I can use ? I had spent hours on this, but not sure what would be appropriate for my requirement

    <ag-grid-angular id="myGrid1" style=" height: 500px; margin-top:0px" class="ag-theme-alpine"
        [rowData]="gridOptionsPolicySearch.rowData"
           [columnDefs]="gridOptionsPolicySearch.columnDefs" [pagination]="true"  [paginationPageSize]="paginationPageSize"
           (gridReady)="onGridReady($event)" 
           [defaultColDef]="defaultColDef"
           [allowContextMenuWithControlKey]="true"
          >
       </ag-grid-angular> 


ngOnInit() {
 this.responsePolicy =  [
        {
        name: 'ABC Corp',
        policy: 'PLW -  D13939081',
        status: 'Inforce',
        effective: '06/26/2018',
        expiratio: '06/26/2018',
        coverage: '',
        claims: 'Yes',
        pac: 'MXS',
        mac: '0082110',
        divisionCode: 'W',
        policyTerm: '',
        policySecID: '989899'
      },
      {
        name: 'ABC Corp',
        policy: 'PLW -  D13939081',
        status: 'Inforce',
        effective: '06/26/2018',
        expiratio: '06/26/2018',
        coverage: '',
        claims: 'Yes',
        pac: 'MXS',
        mac: '0082110',
        divisionCode: 'W',
        policyTerm: '',
        policySecID: '989899'
      },
      {
        name: 'ABC Corp',
        policy: 'PLW -  D13939081',
        status: 'Inforce',
        effective: '06/26/2018',
        expiratio: '06/26/2018',
        coverage: '',
        claims: 'Yes',
        pac: 'MXS',
        mac: '0082110',
        divisionCode: 'W',
        policyTerm: '',
        policySecID: '989899'
      },
      {
        name: 'ABC Corp',
        policy: 'PLW -  D13939081',
        status: 'Inforce',
        effective: '06/26/2018',
        expiratio: '06/26/2018',
        coverage: '',
        claims: 'Yes',
        pac: 'MXS',
        mac: '0082110',
        divisionCode: 'W',
        policyTerm: '',
        policySecID: '989899'
      },
      {
        name: 'ABC Corp',
        policy: 'PLW -  D13939081',
        status: 'Inforce',
        effective: '06/26/2018',
        expiratio: '06/26/2018',
        coverage: '',
        claims: 'Yes',
        pac: 'MXS',
        mac: '0082110',
        divisionCode: 'W',
        policyTerm: '',
        policySecID: '989899'
      }]
    this.gridOptionsPolicySearch.rowData= this.responsePolicy;

}


private getColumnDefsPolicySearch(): ColDef[] {
    return [
      {
        field: 'name', headerName: 'Name', sortable: true, resizable: true,
        unSortIcon: true,
        cellStyle: params => {
          if (params.value === 'Deactivated') {
            return { color: '#AFAFAF' };
          }
          return null;
        }
      },
      {
        field: 'policy', headerName: 'Policy', sortable: true, resizable: true,
        unSortIcon: true,
        cellRenderer: function (params) {
          return '<a href="">' + params.value + '</a>';
        },
        cellStyle: params => {
          if (params.value === 'Deactivated') {
            return { color: '#AFAFAF' };
          }
          return null;
        }
      },
      {
        field: 'status', headerName: 'Status', sortable: true, resizable: true,
        unSortIcon: true,
        cellStyle: params => {
          if (params.value === 'Deactivated') {
            return { color: '#AFAFAF' };
          }
          return null;
        }
      },
      {
        field: 'effective', headerName: 'Effective', sortable: true, resizable: true,

        unSortIcon: true,
        cellStyle: params => {
          if (params.value === 'Deactivated') {
            return { color: '#AFAFAF' };
          }
          return null;
        }
      },
      {
        field: 'expiration', headerName: 'Expiration', sortable: true, resizable: true,
        unSortIcon: true,
        cellStyle: params => {
          if (params.value === 'Deactivated') {
            return { color: '#AFAFAF' };
          }
          return null;
        }
      },
      {
        field: 'coverage', headerName: 'Coverage', sortable: true, resizable: true,
        unSortIcon: true,
        cellStyle: params => {
          if (params.value === 'Deactivated') {
            return { color: '#AFAFAF' };
          }
          return null;
        }
      },
      {
        field: 'claims', headerName: 'Claims Made', sortable: true, resizable: true,
        unSortIcon: true,
        cellStyle: params => {
          if (params.value === 'Deactivated') {
            return { color: '#AFAFAF' };
          }
          return null;
        }
      },
      {
        field: 'pac', headerName: 'PAC', sortable: true, resizable: true,
        unSortIcon: true,
        cellStyle: params => {
          if (params.value === 'Deactivated') {
            return { color: '#AFAFAF' };
          }
          return null;
        }
      },
      {
        field: 'mcc', headerName: 'MCC', sortable: true, resizable: true,
        unSortIcon: true,
        cellStyle: params => {
          if (params.value === 'Deactivated') {
            return { color: '#AFAFAF' };
          }
          return null;
        }
      },
      {
        field: 'divsionCode', headerName: 'Div', sortable: true, resizable: true,
        unSortIcon: true,
        cellStyle: params => {
          if (params.value === 'Deactivated') {
            return { color: '#AFAFAF' };
          }
          return null;
        }
      },
      {
        field: 'policyTerm', headerName: 'Policy Term', sortable: true, resizable: true,
        unSortIcon: true,
        cellStyle: params => {
          if (params.value === 'Deactivated') {
            return { color: '#AFAFAF' };
          }
          return null;
        }
      },
      {
        field: 'policySecID', headerName: 'Policy Sec ID', sortable: true, resizable: true,
        unSortIcon: true,
        cellStyle: params => {
          if (params.value === 'Deactivated') {
            return { color: '#AFAFAF' };
          }
          return null;
        }
      }
    ];
  }


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source