We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Pass Tab Reference

Hi have a problem in that i have a tabComponent.  I pass inject a service and pass the tabs array in the service.

I load the tabControl on application startup and insert the contents of another component.  This works a charm already.  At this point the instance of the tabComponent is already created.

I then have  a ribbon Control.  I want to press a button and insert content into the already created tabComponent. But i can't work out how to do this.  I have a method called addTab in the tabComponent.

ngAfterViewInit() {
// this.createNewTab('dashboard', 'Dashboard' + this.tempTestCounter, {});
this.createNewTab(this._mainTabService.componentModulePath, this._mainTabService.tabName, {});

export class MainTabService implements iMainTabService {
tabComponents = {};
usedTabs = {};
hiddenTabs: Array<number>;
currentTabId = "tabContent0";
tabName: string; // #mainTabControl
componentModulePath: string;
viewContainerRef: ViewContainerRef;

constructor() {
this.hiddenTabs = Array<number>();
this.tabName = 'Dashboard';
this.componentModulePath = 'dashboard';

handleRibbonEvent(args) {
switch(args.target.id) {

case 'Default_new_business':
let factory = this.componentFactory.resolveComponentFactory(TabComponent);
this.viewContainerRef = this.tab.createComponent(factory);
//ref.instance.createNewTab('dashboard','Dashboard', {});


1 Reply

KR Keerthana Rajendran Syncfusion Team July 28, 2017 04:52 PM UTC

Hi Sumair, 
Thank you for contacting Syncfusion support. 
We have prepared a sample based on our understanding. Please download the sample from the below link 
In the above sample we have inserted a Grid control from another component into Tab on button click. If we have misunderstood your requirement please get back to us with the following details 
  1. Whether you are trying to insert Ribbon control into tab
  2. Or you have to use a button in Ribbon to add tab item
  3. Whether any controls has to be inserted into tab dynamically on button click.

Live Chat Icon For mobile
Up arrow icon