title: Angular 2 Tabs retain after Refresh
body: <p>I worked on tabs function its working fine but I want retain the selected tab active on page refresh. </p>
  
  <pre><code>&lt;tabs&gt;
    &lt;tab [tabTitle]="'Tab 1'"&gt;Tab 1 Content&lt;/tab&gt;
    &lt;tab tabTitle="Tab 2"&gt;Tab 2 Content&lt;/tab&gt;
  &lt;/tabs&gt;
  </code></pre>
  
  <p>src/tabs.ts</p>
  
  <pre><code>import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
  import { Tab } from './tab';
  
  @Component({
    selector: 'tabs',
    template:`
      &lt;ul class="nav nav-tabs"&gt;
        &lt;li *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active"&gt;
          &lt;a href="#"&gt;{{tab.title}}&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
    `
  })
  export class Tabs implements AfterContentInit {
  
    @ContentChildren(Tab) tabs: QueryList&lt;Tab&gt;;
  
    // contentChildren are set
    ngAfterContentInit() {
      // get all active tabs
      let activeTabs = this.tabs.filter((tab)=&gt;tab.active);
  
      // if there is no active tab set, activate the first
      if(activeTabs.length === 0) {
        this.selectTab(this.tabs.first);
      } 
    }
  
    selectTab(tab: Tab){
      // deactivate all tabs
      this.tabs.toArray().forEach(tab =&gt; tab.active = false);
  
      // activate the tab the user has clicked on.
      tab.active = true;
    }
  
  }
  </code></pre>
  
  <p>src/tab.ts</p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  
  @Component({
    selector: 'tab',
    styles: [`
      .pane{
        padding: 1em;
      }
    `],
    template: `
      &lt;div [hidden]="!active" class="pane"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/div&gt;
    `
  })
  export class Tab {
    @Input('tabTitle') title: string;
    @Input() active = false;
  }
  </code></pre>
  
  <p>This is a working plunker:</p>
  
  <p><a href="http://plnkr.co/edit/ctzfDxkGDWvnetWVRfwI?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/ctzfDxkGDWvnetWVRfwI?p=preview</a></p>