Блог

У меня есть компонент Angular10 (тумблер), который мне нужно включить в определенный столбец моей ag-grid (ячейки).

На данный момент у меня есть стандартный флажок html следующим образом:

 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
    } }
  ];
  

Компонент, который я хотел бы использовать вместо флажка, уже существует в моем проекте:

 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 {}
}
  

Как мне включить компонент Angular10 вместо флажка?

прежде всего импортируйте свой компонент в файл компонента AG Grid.

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

2-й в coldef просто назначьте свой рендерер cellRenderer

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

3-й зарегистрируйте свой компонент в frameworkComponents

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

это все, что вам нужно для рендеринга вашего пользовательского компонента.

 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
              amp;amp; value
              amp;amp; 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
              amp;amp; data.cid !== undefined
              amp;amp; 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 amp;amp; this.isChecked === true){
                this.isChecked = false;
              }
    
            }
          })
         }
    
        ngOnInit() {
          if(!this.multiselectable){
           // this._chkbxunqid = this.uidGenerator.getUnqUID("chkbx_");
          }
          if(this._data amp;amp; this._data.isChecked === true)
                     this.isChecked = this._data.isChecked;
        }
    
        private checkClickHandler():void{
          this.isChecked = !this.isChecked;
          this._data.isChecked = this.isChecked;
    
          if(!this.multiselectable amp;amp; 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();
        }
    }