feat(tabs): add isActive flag on the individual tabs (#6424)

* Adds the `isActive` flag on each tab, making it easier to check whether a tab is active.
* Adds an `exportAs` to the tab directive to allow for it to be consumed easier in the view.

Fixes #6422.

Author: crisbeto

src/lib/tabs/tab-group.spec.ts

@@ -1,5 +1,5 @@
 import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
-import {Component, ViewChild} from '@angular/core';
+import {Component, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {By} from '@angular/platform-browser';
 import {ViewportRuler} from '@angular/cdk/overlay';
@@ -169,6 +169,23 @@ describe('MdTabGroup', () => {
       expect(testElement.querySelectorAll('.mat-ripple-element').length)
         .toBe(0, 'Expected no ripple to show up on label mousedown.');
     });
+
+    it('should set the isActive flag on each of the tabs', () => {
+      fixture.detectChanges();
+
+      const tabs = fixture.componentInstance.tabs.toArray();
+
+      expect(tabs[0].isActive).toBe(false);
+      expect(tabs[1].isActive).toBe(true);
+      expect(tabs[2].isActive).toBe(false);
+
+      fixture.componentInstance.selectedIndex = 2;
+      fixture.detectChanges();
+
+      expect(tabs[0].isActive).toBe(false);
+      expect(tabs[1].isActive).toBe(false);
+      expect(tabs[2].isActive).toBe(true);
+    });
   });
 
   describe('dynamic binding tabs', () => {
@@ -364,6 +381,7 @@ describe('nested MdTabGroup with enabled animations', () => {
   `
 })
 class SimpleTabsTestApp {
+  @ViewChildren(MdTab) tabs: QueryList<MdTab>;
   selectedIndex: number = 1;
   focusEvent: any;
   selectEvent: any;

src/lib/tabs/tab-group.ts

@@ -170,6 +170,7 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit
     // Setup the position for each tab and optionally setup an origin on the next selected tab.
     this._tabs.forEach((tab: MdTab, index: number) => {
       tab.position = index - indexToSelect;
+      tab.isActive = index === indexToSelect;
 
       // If there is already a selected tab, then set up an origin for the next selected tab
       // if it doesn't have one already.

src/lib/tabs/tab.ts

@@ -26,6 +26,7 @@ export const _MdTabMixinBase = mixinDisabled(MdTabBase);
   templateUrl: 'tab.html',
   inputs: ['disabled'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  exportAs: 'mdTab',
 })
 export class MdTab extends _MdTabMixinBase implements OnInit, CanDisable, OnChanges, OnDestroy {
   /** Content for the tab label given by <ng-template md-tab-label>. */
@@ -56,6 +57,11 @@ export class MdTab extends _MdTabMixinBase implements OnInit, CanDisable, OnChan
    */
   origin: number | null = null;
 
+  /**
+   * Whether the tab is currently active.
+   */
+  isActive = false;
+
   constructor(private _viewContainerRef: ViewContainerRef) {
     super();
   }