Hi Sumar,
I happen to have just implemented such an example for teaching people about
dynamic componente, template outlets and stuff. I'm pretty sure that
article would help you as it showcases the same problem you're
describing: https://juristr.com/blog/2017/07/ng2-dynamic-tab-component/
Let me know if you need more help :)
Juri
On Thursday, July 27, 2017 at 5:58:19 PM UTC+2, Sumair Ahmed wrote:
>
> Hi,
>
> I have the following structure:
>
> TabComponent
> Navbar
> Dashboard
>
> I have a tabComponent with a singleton service that stores the tabs and is
> injected into tabComponent.
>
> My problem is if i click a new button on the navbar, i want to create a
> new tab in my TabComponent.
>
> I cannot get the viewContainerRef of the tabComponent from the navbar.
> How can i do this?
>
>
> *TabComponent*
> <ej-tab #mainTabControl id="mainTabControl" [showCloseButton]="true" (
> beforeActive)="onBeforeTabItemActive($event)">
> <ul><li></li></ul>
> <div id="tabContent0"><div #tabContent0></div></div>
> </ej-tab>
>
> *ribbonComponent*
> export class RibbonComponent {
> @ViewChild('mainTabControl', {read: ViewContainerRef}) tab;
>
> constructor(private router: Router, private componentFactory:
> ComponentFactoryResolver,
> private viewContainerRef: ViewContainerRef) {}
>
> 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', {});
> break;
> default:
> break;
> }
> }
> }
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
