Dynamic tab navigation system using Angular 2
<p>I want to create a dynamic tabs navigation system using Angular 2. </p>

<p>Basically I want to first display a single tab that contains a single component, containing clickable objects (like links, buttons...).</p>

<p>I would like that a click on one of those links adds a new tab, and that a click on each tab (the initial one and the newly created tab) displays a corresponding component in display zone (router-outlet) below.</p>

<p>This is what I've tried so far:</p>

<p>app.component.ts (Root component and "tabs container):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
import { TabComponent } from './tab/tab.component';
import { FirstComponent } from './test/first.component';
import { SecondComponent } from './test/second.component';
import { ThirdComponent } from './test/third.component';
import { ROUTER_DIRECTIVES } from '@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"
   }
  ]  
 }
}</code></pre>
</div>
</div>
</p>

<p>app.component.html:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Tabs container&lt;/h1&gt;
&lt;div&gt;
 &lt;nav&gt;
  &lt;tab *ngFor="let tab of tabList" [name]="tab.name" [link]="tab.link"&gt;&lt;/tab&gt;
 &lt;/nav&gt;    
&lt;/div&gt;
&lt;div&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Each tab is represented by a tab.component.ts:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import { ROUTER_DIRECTIVES, Router } from '@angular/router';
import { Component, OnInit, Input  } from '@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&lt;any&gt;;

 constructor(private router: Router) {}

 ngOnInit() {
  
 }

 
} </code></pre>
</div>
</div>
</p>

<p>which template is tab.component.html:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a [routerLink]='link'&gt;{{name}}&lt;/a&gt;</code></pre>
</div>
</div>
</p>

<p>Here is the app.routes.ts file: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import { provideRouter, RouterConfig } from '@angular/router';
import { TabComponent } from './tab/tab.component';
import { FirstComponent } from './test/first.component';
import { SecondComponent } from './test/second.component';
import { ThirdComponent } from './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)
];</code></pre>
</div>
</div>
</p>

<p>Here is for example the first.component.ts (SecondComponent and ThirdComponent are similar):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'first',
 template: `&lt;h1&gt;First&lt;/h1&gt;
       &lt;button (click)="addTab()"&gt;Display child&lt;/button&gt;
            `
})
export class FirstComponent implements OnInit {
 constructor() {}

 ngOnInit() {
  
 }

 addTab(){
 }
}
 </code></pre>
</div>
</div>
</p>

<p>I would like to put the tab creation logic in the addTab() method to basically add an element to the tabList array in app.component.ts and obtain the desired behavior but I don't know how to transfer data from this component to the app.component.ts.</p>

<p>I also open to any different approach and suggestions.</p>