How to add Angular 10 Component to an Ag-Grid cell

Question

I have an Angular10 component (toggle switch) that I need to include in a specific column of my ag-grid (cell).

At the moment I have a standard html checkbox as follows:

colDefs: ColDef[] = [
    { field: 'Name',             headerName: 'Name'},
    { field: 'Somethingelse',    headerName: 'Something else'},
    { field: 'Checkbox',         headerName: 'A Checkbox',      //<--this one
        editable:true,    
        checkboxSelection: false,   
        headerCheckboxSelection: false,   
        filter: false,    
        sortable: false,    
        cellRenderer: function (params: { value: boolean; }) {. //<--draws this
          var input = document.createElement("input");
          input.type = "checkbox";
          input.checked = params.value;
          return input;            //<--want to draw my component here instead
    } }
  ];

The component I would like to use instead of the checkbox already exists in my project:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-toggle-switch',
  templateUrl: './toggle-switch.component.html',
  styleUrls: ['./toggle-switch.component.scss']
})
export class ToggleSwitchComponent implements OnInit {
  selected: boolean = false;
  constructor() { }
  ngOnInit(): void {}
}

How do I include the Angular10 component in place of the checkbox?

Answer 1

first of all import your component in the AG Grid component file.

import { ToggleSwitchComponent } from './ToggleSwitchComponent '; // whatever is the path

2nd in coldef just assign your renderer to cellRenderer

  { 
        field: 'Checkbox',
        headerName: 'A Checkbox',
        editable:true,    
        checkboxSelection: false,   
        headerCheckboxSelection: false,   
        filter: false,    
        sortable: false,    
        cellRenderer: 'ToggleSwitchComponent'
    } }

3rd register your component under frameworkComponents

 this.frameworkComponents = {
      ToggleSwitchComponent: ToggleSwitchComponent,
...
...
}

this is all your need to get your custom component to render.

Answer 2

Few custom classes you need to add as per your need. Hope you can customize it by yourself. If you need all files let me  know I will send you generic files.  

<table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th width="2%"></th>
            <th width="20%">Rule Name</th>
            <th width="10%">Rule ID</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of gridItems">
            <td width="2%">
             <generic-checkbox [chkbxoptid]="'ruleId'"
              [data]="item.ruleInfo"
              ></generic-checkbox>
            </td>
            <td width="20%">{{item.ruleInfo.ruleName}}</td>
            <td width="10%">{{item.ruleInfo.ruleId}}</td>
          </tr>
        </tbody>
      </table>
    
    
    genericcomponent.ts
    import { Component, Input, OnInit, OnDestroy } from '@angular/core';
    
    import { TVUIConstants } from '../utils/tvconstants';
    import { Subscription } from 'rxjs';
    import { Rule } from '../models/rule-models';
    import { BaseServices } from '../services/base.service';
    import { UIDGenerator } from '../services/uid-generator.service';
    @Component({
      selector: 'generic-checkbox',
      template: `<input type="checkbox" [(ngModel)]=
      "isChecked"  *ngIf="hideCheckBox"
      value="{{isChecked}}" (click)='checkClickHandler()'>`
    
    })
    
    export class ChkBoxComponent implements OnInit, OnDestroy {
        @Input() chkbxoptid:string;
        @Input() multiselectable:boolean = true;
        @Input() set data(value:any){
          if(value === undefined ||
            (this.chkbxoptid
              && value
              && value[this.chkbxoptid] === undefined)){
            this._hideCheckBox = false;
          }else{
            this._data = value;
            this._hideCheckBox = true
          }
        }
        @Input() rowindex:number;
        private isChecked:boolean;
        private _subscription: Subscription;
        private _hideCheckBox:boolean;
        private _data:any;
        private _chkbxunqid:string;
    
        constructor(private baseService:BaseServices,
                    private uidGenerator:UIDGenerator) {
          this._subscription = this.baseService.dataEvent.dataObserver.subscribe(data => {
            if(data.subevnttype === TVUIConstants.CLEAR_CHKBX_REF
              && data.cid !== undefined
              && data.cid !== this._chkbxunqid){
              this.isChecked = data.value;
              if(this._data)
                this._data.isChecked = data.value;
            }else if(data.subevnttype === TVUIConstants.REFRESH_RULES){
              if(this.isChecked && this.isChecked === true){
                this.isChecked = false;
              }
    
            }
          })
         }
    
        ngOnInit() {
          if(!this.multiselectable){
           // this._chkbxunqid = this.uidGenerator.getUnqUID("chkbx_");
          }
          if(this._data && this._data.isChecked === true)
                     this.isChecked = this._data.isChecked;
        }
    
        private checkClickHandler():void{
          this.isChecked = !this.isChecked;
          this._data.isChecked = this.isChecked;
    
          if(!this.multiselectable && this.isChecked){
           // this.baseService.dataEvent.publishEvt({subevnttype: TVUIConstants.CLEAR_CHKBX_REF, cid: this._chkbxunqid, value: false})
          }
        }
    
        get hideCheckBox(){
          return this._hideCheckBox;
        }
    
        ngOnDestroy() {
          // prevent memory leak when component destroyed
          this._subscription.unsubscribe();
        }
    }