Support adding background theme colors to the tab-group and tab-nav

Author: willshowell

src/lib/tabs/tab-group.ts

@@ -18,7 +18,7 @@ import {
   Renderer2,
 } from '@angular/core';
 import {coerceBooleanProperty} from '../core';
-import {CanColor, mixinColor} from '../core/common-behaviors/color';
+import {CanColor, mixinColor, ThemePalette} from '../core/common-behaviors/color';
 import {Observable} from 'rxjs/Observable';
 import {MdTab} from './tab';
 import 'rxjs/add/operator/map';
@@ -102,6 +102,20 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements CanColor {
   @Input()
   headerPosition: MdTabHeaderPosition = 'above';
 
+  /** Background color of the tab group. */
+  @Input()
+  get background(): ThemePalette { return this._background; }
+  set background(value: ThemePalette) {
+    if (value) {
+      let nativeElement = this._elementRef.nativeElement;
+
+      this._renderer.removeClass(nativeElement, `mat-background-${this.background}`);
+      this._renderer.addClass(nativeElement, `mat-background-${value}`);
+      this._background = value;
+    }
+  }
+  private _background: ThemePalette;
+
   /** Output to enable support for two-way binding on `[(selectedIndex)]` */
   @Output() get selectedIndexChange(): Observable<number> {
     return this.selectChange.map(event => event.index);

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -24,7 +24,7 @@ import {MdInkBar} from '../ink-bar';
 import {MdRipple} from '../../core/ripple/index';
 import {ViewportRuler} from '../../core/overlay/position/viewport-ruler';
 import {Directionality, MD_RIPPLE_GLOBAL_OPTIONS, Platform, RippleGlobalOptions} from '../../core';
-import {CanColor, mixinColor} from '../../core/common-behaviors/color';
+import {CanColor, mixinColor, ThemePalette} from '../../core/common-behaviors/color';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/auditTime';
 import 'rxjs/add/operator/takeUntil';
@@ -60,6 +60,20 @@ export class MdTabNav extends _MdTabNavMixinBase implements AfterContentInit, Ca
 
   @ViewChild(MdInkBar) _inkBar: MdInkBar;
 
+  /** Background color of the tab nav. */
+  @Input()
+  get background(): ThemePalette { return this._background; }
+  set background(value: ThemePalette) {
+    if (value) {
+      let nativeElement = this._elementRef.nativeElement;
+
+      this._renderer.removeClass(nativeElement, `mat-background-${this.background}`);
+      this._renderer.addClass(nativeElement, `mat-background-${value}`);
+      this._background = value;
+    }
+  }
+  private _background: ThemePalette;
+
   constructor(renderer: Renderer2,
               elementRef: ElementRef,
               private _ngZone: NgZone,