how to use multiple custom components in framework in ag-grid-angular?

Question

I have created two custom components, i.e custom tooltip component and custom datepicker component. when im trying to declare in framework it is not working. Its taking only datepicker custom component not tooltip component. If datepicker component is removed then its taking tooltip component Its considering only one custom component in frameworkComponent. Please find the below code:

CustomTooltip :

import {Component, ViewEncapsulation} from '@angular/core';
import {ITooltipAngularComp} from "ag-grid-angular";

@Component({
    selector: 'tooltip-component',
    template: `
        <div class="custom-tooltip" [style.background-color]="data.color">
            <p>{{tooltipData}}</p>
        </div>`,


    styles: [
        `
            :host {
                position: absolute;
                width: 250px;
                height: 60px;
                border: 1px solid cornflowerblue;
                overflow: hidden;
                pointer-events: none;
                transition: opacity 1s;
            }

            :host.ag-tooltip-hiding {
                opacity: 0;
            }

            .custom-tooltip p {
                margin: 5px;
                white-space: nowrap;
            }
        `
    ],
    styleUrls: ['./custom-tooltip.component.scss']
})
export class CustomTooltip implements ITooltipAngularComp {

     params: any;
     data: any;
    tooltipData: any;

    agInit(params): void {
        console.log("params",params.value);
        this.params = params;
        this.tooltipData=params.value;
        this.data = params.api.getRowNode(params.rowIndex).data;
        this.data.color = this.params.color || 'white';
    }
}

CustomDateComponent:

import {Component, ElementRef, ViewChild} from '@angular/core';
import flatpickr from 'flatpickr'

@Component({
    selector: 'app-loading-overlay',
    template: `
        <div #flatpickrEl class="ag-input-text-wrapper custom-date-filter fa">
            <input type='text' data-input />
            <a class='input-button' title='clear' data-clear>
                <i class='fa fa-times'></i>
            </a>&nbsp;
            <a class="input-button" title="toggle" data-toggle>
            <i class="fa fa-calendar"></i>
            </a> &nbsp;&nbsp;
        </div>
    `,
    styles: [
        `
    .custom-date-filter a {
    position: relative;
    right: 34px;
    color: rgba(0, 0, 0, 0.54);
    cursor: pointer;
  }

  .custom-date-filter:after {
    content: '\f073';
    display: block;
    font-weight: 400;
    font-family: 'Font Awesome 5 Free';
    position: relative;
    right: 25px;
    pointer-events: none;
    color: rgba(0, 0, 0, 0.54);
  }
    `
    ]
})
export class CustomDateComponent {
    @ViewChild("flatpickrEl", {read: ElementRef}) flatpickrEl: ElementRef;
    private date: Date;
    private params: any;
    private picker: any;

    agInit(params: any): void {
        this.params = params;
    }

    ngAfterViewInit(): void {
        // outputs `I am span`
        this.picker = flatpickr(this.flatpickrEl.nativeElement, {
            onChange: this.onDateChanged.bind(this),
            wrap: true
        });

        this.picker.calendarContainer.classList.add('ag-custom-component-popup');
    }

    ngOnDestroy() {
        console.log(`Destroying DateComponent`);
    }

    onDateChanged(selectedDates) {
        this.date = selectedDates[0] || null;
        this.params.onDateChanged();
    }

    getDate(): Date {
        return this.date;
    }

    setDate(date: Date): void {
       this.date = date || null;
       this.picker.setDate(date);
    }
}

Im trying to use both custom component in one grid i.e:

 this.columnDefs = [
      {
        headerName: 'Request Number', field: 'request_no', sortable: true, filter: 'agNumberColumnFilter'
      },
      {
        headerName: 'Request Date', field: 'created_at', sortable: true, width: 300,
        filter: "agDateColumnFilter",
        filterParams: {
          comparator: function (filterLocalDateAtMidnight, cellValue) {
            var dateAsString = cellValue;
            var dateParts = dateAsString.split("/");
            var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));
            if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
              return 0;
            }
            if (cellDate < filterLocalDateAtMidnight) {
              return -1;
            }
            if (cellDate > filterLocalDateAtMidnight) {
              return 1;
            }
          }
        }
      },
      { headerName: 'Requested By', field: 'user_name', sortable: true, filter: 'agTextColumnFilter', tooltipField: 'user_name' },
      {
        headerName: 'Client', field: 'borrower_name', sortable: true, filter: 'agTextColumnFilter',
        tooltipField: 'borrower_name', tooltipComponentParams: { color: "#ececec" }, width: 200
      },
      {
        headerName: 'Debtor', field: 'customer_name', sortable: true, filter: 'agTextColumnFilter',
        cellStyle: { color: 'blue', cursor: 'pointer' }, tooltipField: 'customer_name', width: 200
      },
      {
        headerName: 'Current Limit', field: 'current_limit', sortable: true, filter: 'agNumberColumnFilter',
        cellStyle: { textAlign: 'right' },
        cellRenderer: this.CurrencyCellRenderer
      },
      {
        headerName: 'Requested Limit', field: 'requested_limit', sortable: true, filter: 'agNumberColumnFilter',
        cellStyle: { textAlign: 'right' },
        cellRenderer: this.CurrencyCellRenderer
      },
      {
        headerName: 'Approved Limit', field: 'approved_limit', sortable: true, filter: 'agNumberColumnFilter',
        cellStyle: { textAlign: 'right' },
        cellRenderer: this.CurrencyCellRenderer
      },
      { headerName: 'Status', field: 'status', sortable: true, filter: 'agTextColumnFilter', width: 120, },
      { headerName: 'Comment', field: 'comment', sortable: true, filter: 'agTextColumnFilter', tooltipField: 'comment', width: 200 },
      {
        headerName: "",
        suppressMenu: true,
        suppressSorting: false,
        cellClass: 'action-class',
        width: 120,
        template:
          `<i class="fa fa-pencil-square-o" aria-hidden="true" data-action-type="view" pTooltip="Edit Queue" tooltipPosition="top"></i> 
          &nbsp; <i class="fa fa-info-circle" aria-hidden="true" data-action-type="history"  pTooltip="View Comment History" tooltipPosition="top"></i>`
      }
    ];
    this.defaultColDef = {
      enableValue: true,
      sortable: true,
      tooltipComponent: "customTooltip",
      resizable: true
    };
    this.frameworkComponents = { 
       customTooltip: CustomTooltip,
       agDateInput: CustomDateComponent };

Answer 1

Seems it's a custom tooltip issue (somewhere inside ag-grid), will try to inform the team and describe the bug.

In your case, you can specify your component (CustomDateComponent) directly via cellEditorFramework rather than cellEditor, without internal declaration in frameworkComponents block.

{
    headerName: "Date",
    field: "date",
    width: 190,
    editable:true,
    cellEditorFramework:CustomDateComponent
}

Just for info: your CustomDateComponent not yet ready to be used as cellEditor