Column chooser angular component for ag-grid

agGridColChooser.ts

import {Component, Input} from "@angular/core";
import {AgGridNg2} from "ag-grid-angular";
import {Column} from "ag-grid";

@Component({
  selector: "ag-grid-col-chooser",
  template: `
    <!--<button>Choose columns</button>-->
    <div class="cols-container" *ngIf="cols">
        <div class="col" *ngFor="let col of cols" (click)="agGrid.columnApi.setColumnVisible(col, !col.isVisible())" 
             [class.col-unselected]="!col.isVisible()" [class.col-selected]="col.isVisible()">
          {{col.getColDef().headerName}}
        </div>
    </div>
  `,
  styles: [`
    .cols-container {
      display: flex;
      flex-direction: row;
    }

    .col {
      padding: 5px 7px;
      text-align: center;
      font-size: 90%;
      margin-right: 7px;
      cursor: pointer;
      font-weight: bold;
      border-radius: 3px;
    }

    .col-unselected {
      background-color: #ced1d5;
    }

    .col-selected {
      background-color: #bee4c7;
    }
  `]
})
export class AgGridColChooser {

  public cols: Column[];
  private _agGrid: AgGridNg2;

  public get agGrid(): AgGridNg2 {
    return this._agGrid;
  }

  @Input()
  public set agGrid(value: AgGridNg2) {
    this._agGrid = value;
    this._agGrid.gridColumnsChanged.subscribe(() => this.cols = this._agGrid.columnApi.getAllColumns());
    this.cols = this._agGrid.columnApi.getAllColumns();
  }
}