html - Dynamic tab navigation system using Angular 2 -

i want create dynamic tabs navigation system using angular 2.

basically want first display single tab contains single component, containing clickable objects (like links, buttons...).

i click on 1 of links adds new tab, , click on each tab (the initial 1 , newly created tab) displays corresponding component in display zone (router-outlet) below.

this i've tried far:

app.component.ts (root component , "tabs container):

import { component, oninit } '@angular/core';  import { tabcomponent } './tab/tab.component';  import { firstcomponent } './test/first.component';  import { secondcomponent } './test/second.component';  import { thirdcomponent } './test/third.component';  import { router_directives } '@angular/router';    @component({    selector: 'my-app',    templateurl: './app/app.component.html',    directives: [tabcomponent, router_directives, firstcomponent, secondcomponent, thirdcomponent],  })    export class appcomponent implements oninit{     	tablist: any[];    	constructor() {}    	ngoninit() {  		this.tablist = [  			{  				name: 'link 1',  				link: "/comp1"  			},  			{  				name: 'link 2',  				link: "/comp2"  			},  			{  				name: 'link 3',  				link: "/comp3"  			}  		]		  	}  }

app.component.html:

<h1>tabs container</h1>  <div>  	<nav>  		<tab *ngfor="let tab of tablist" [name]="tab.name" [link]="tab.link"></tab>  	</nav>      </div>  <div>      <router-outlet></router-outlet>  </div>

each tab represented tab.component.ts:

import { router_directives, router } '@angular/router';  import { component, oninit, input  } '@angular/core';    @component({  	selector: 'tab',  	templateurl: './app/tab/tab.component.html',    	directives: [router_directives]  })    export class tabcomponent implements oninit {  	@input() name: string;  	@input() link: string;  	@input() param: string;  	targetarray: array<any>;    	constructor(private router: router) {}    	ngoninit() {  		  	}    	  }	

which template tab.component.html:

<a [routerlink]='link'>{{name}}</a>

here app.routes.ts file:

import { providerouter, routerconfig } '@angular/router';  import { tabcomponent } './tab/tab.component';  import { firstcomponent } './test/first.component';  import { secondcomponent } './test/second.component';  import { thirdcomponent } './test/third.component';    export const routes: routerconfig = [    {      path: '',      component: tabcomponent    },    {      path: 'comp1',      component: firstcomponent    },    {      path: 'comp2',      component: secondcomponent    },    {      path: 'comp3',      component: thirdcomponent    },  ];    export const app_router_providers = [    providerouter(routes)  ];

here example first.component.ts (secondcomponent , thirdcomponent similar):

import { component, oninit } '@angular/core';    @component({  	selector: 'first',  	template: `<h1>first</h1>   			   <button (click)="addtab()">display child</button>  	           `  })  export class firstcomponent implements oninit {  	constructor() {}    	ngoninit() {  		  	}    	addtab(){  	}  }  	

i put tab creation logic in addtab() method add element tablist array in app.component.ts , obtain desired behavior don't know how transfer data component app.component.ts.

i open different approach , suggestions.

you can inject router component , use config method configure dynamic links.

router.config([   { 'path': '/', 'component': indexcomp },   { 'path': '/user/:id', 'component': usercomp }, ]); 

the documentation router service can found here.