I am trying to attach one component dynamically as sibling to the ag-grid-angular. I have written an attribute directive which sits on top of the ag-grid and in the directive viewContainerRef is injected as below.

<ag-grid-angular tableDirective style="width: 100%;height:100%" class="ag-theme-balham" [rowData]="rowData" [suppressDragLeaveHidesColumns]="true" [getContextMenuItems]="getContextMenuItems" [enableRangeSelection]="true" [rowClassRules]="rowClassRules"
                [columnDefs]="columnDefs" [suppressMakeColumnVisibleAfterUnGroup]="true" [rowGroupPanelShow]="rowGroupPanelShow" (gridReady)="onGridReady($event)" [defaultColDef]="defaultColDef" [components]="components" [frameworkComponents]="frameworkComponents"
                [context]="context">
            </ag-grid-angular>

Inside of the directive I have a constructor like this.

@Directive({
  selector: 'tableDirective'
})
class TableDirective(){

constructor(private viewContainerRef: ViewContainerRef){}

      attachComponent(component: any, options) {
         const toolTipComponentFactory = this.componentFactoryResolver
          .resolveComponentFactory(component);
        this.viewContainerRef.createComponent(toolTipComponentFactory );
       }

}

I have a function to attach a component on some event of my choice. But I am not able to dynamically attach and If in case the component it is getting attached, Its attaching at some random place. Could someone help? Thanks in advance.