feat(tab): add tab id support (#2405)

Author: IlyaSurmay

demo/src/app/components/+tabs/demos/basic/basic.html

@@ -1,6 +1,6 @@
 <div>
   <tabset>
-    <tab heading="Static title">Static content</tab>
+    <tab heading="Static title" id="tab1">Static content</tab>
     <tab heading="Static Title 1">Static content 1</tab>
     <tab heading="Static Title 2">Static content 2</tab>
     <tab (select)="alertMe()">

demo/src/app/components/+tabs/demos/basic/basic.ts

@@ -1,5 +1,4 @@
-import { Component, ViewChild } from '@angular/core';
-import { TabsetComponent } from 'ngx-bootstrap';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'demo-tabs-basic',

demo/src/assets/json/current-version.json

@@ -1 +1 @@
-{"version":"2.0.0-beta.5"}
+{"version":"2.0.0-beta.6"}

demo/src/ng-api-doc.ts

@@ -2464,7 +2464,7 @@ export const ngdoc: any = {
       {
         "name": "id",
         "type": "string",
-        "description": "<p>tab id </p>\n"
+        "description": "<p>tab id. The same id with suffix &#39;-link&#39; will be added to the corresponding &lt;li&gt; element  </p>\n"
       },
       {
         "name": "removable",

src/tabs/tab.directive.ts

@@ -15,9 +15,10 @@ import { TabsetComponent } from './tabset.component';
 @Directive({ selector: 'tab, [tab]' })
 export class TabDirective implements OnInit, OnDestroy {
   /** tab header text */
-  @Input() heading: string;
-  /** tab id */
-  @Input() id: string;
+  @Input() public heading: string;
+  /** tab id. The same id with suffix '-link' will be added to the corresponding <li> element  */
+  @HostBinding('attr.id')
+  @Input() public id: string;
   /** if true tab can not be activated */
   @Input() disabled: boolean;
   /** if true tab can be removable, additional button will appear */

src/tabs/tabset.component.html

@@ -2,6 +2,7 @@
   <li *ngFor="let tabz of tabs" [ngClass]="['nav-item', tabz.customClass || '']"
       [class.active]="tabz.active" [class.disabled]="tabz.disabled">
     <a href="javascript:void(0);" class="nav-link"
+       [attr.id]="tabz.id ? tabz.id + '-link' : ''"
        [class.active]="tabz.active" [class.disabled]="tabz.disabled"
        (click)="tabz.active = true">
       <span [ngTransclude]="tabz.headingRef">{{ tabz.heading }}</span>