From d3f954f57ea09a3e5ec5041e7820cf4c03a27d39 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Mon, 22 May 2017 23:31:32 +0200
Subject: [PATCH] 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
---
 src/lib/checkbox/checkbox.html |  5 +++--
 src/lib/checkbox/checkbox.ts   | 11 +++--------
 src/lib/checkbox/index.ts      |  4 ++--
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html
index 7676f48c69f8..c7815c48293e 100644
--- a/src/lib/checkbox/checkbox.html
+++ b/src/lib/checkbox/checkbox.html
@@ -1,6 +1,6 @@
 <label 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()">
     <ng-content></ng-content>
   </span>
 </label>
diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts
index 9874e7697b47..e8d3124bdfa1 100644
--- a/src/lib/checkbox/checkbox.ts
+++ b/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
diff --git a/src/lib/checkbox/index.ts b/src/lib/checkbox/index.ts
index 1987bac28630..cfcce8f5d697 100644
--- a/src/lib/checkbox/index.ts
+++ b/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]