fix(checkbox): margin for empty checkboxes incorrectly added

With #2121 the margin will be removed for checkboxes that don't have any label set.

A problem is that the Checkbox uses the OnPush change detection strategy and therefore the checkbox is not able to detect any delayed / async label change.

This means that checkboxes that set their label from an async binding will not have any margin until the users clicks on the checkbox.

Using the `cdkObserveContent` seems to be an elegant approach when using the OnPush strategy.

The `:empty` CSS selector would be more elegant but it's very sensitive about whitespaces and therefore it doesn't work properly.

Fixes #4720

Author: devversion

src/lib/checkbox/checkbox.html

@@ -1,6 +1,6 @@
 <label [attr.for]="inputId" class="mat-checkbox-layout" #label>
   <div class="mat-checkbox-inner-container"
-       [class.mat-checkbox-inner-container-no-side-margin]="!_hasLabel()">
+       [class.mat-checkbox-inner-container-no-side-margin]="!_hasLabel">
     <input #input
            class="mat-checkbox-input cdk-visually-hidden" type="checkbox"
            [id]="inputId"
@@ -35,7 +35,8 @@
       <div class="mat-checkbox-mixedmark"></div>
     </div>
   </div>
-  <span class="mat-checkbox-label" #labelWrapper>
+  <span class="mat-checkbox-label" #userLabel
+        (cdkObserveContent)="_hasLabel = !!userLabel.textContent.trim()">
     <!-- Add an invisible span so JAWS can read the label -->
     <span style="display:none">&nbsp;</span>
     <ng-content></ng-content>

src/lib/checkbox/checkbox.ts

@@ -158,17 +158,12 @@ export class MdCheckbox extends _MdCheckboxMixinBase
   /** The native `<input type="checkbox"> element */
   @ViewChild('input') _inputElement: ElementRef;
 
-  @ViewChild('labelWrapper') _labelWrapper: ElementRef;
-
-  /** Whether the checkbox has label */
-  _hasLabel(): boolean {
-    const labelText = this._labelWrapper.nativeElement.textContent || '';
-    return !!labelText.trim().length;
-  }
-
   /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */
   @ViewChild(MdRipple) _ripple: MdRipple;
 
+  /** Whether the checkbox has a label set or not. */
+  _hasLabel: boolean = false;
+
   /**
    * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
    * @docs-private

src/lib/checkbox/index.ts

@@ -1,11 +1,11 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {MdRippleModule, MdCommonModule, FocusOriginMonitor} from '../core';
+import {MdRippleModule, MdCommonModule, FocusOriginMonitor, ObserveContentModule} from '../core';
 import {MdCheckbox} from './checkbox';
 
 
 @NgModule({
-  imports: [CommonModule, MdRippleModule, MdCommonModule],
+  imports: [CommonModule, MdRippleModule, MdCommonModule, ObserveContentModule],
   exports: [MdCheckbox, MdCommonModule],
   declarations: [MdCheckbox],
   providers: [FocusOriginMonitor]