fix(checkbox, slide-toggle): no margin if content is projected

Usually if the label of the checkbox or slide-toggle is empty, we remove the margin between label container and thumb/check because otherwise there would be too much spacing. Currently if developers use a component inside of the checkbox or slide-toggle in order to render the label, the margin is accidentally removed and the label looks misplaced.

This is because the `cdkObserveContent` event runs outside of the `NgZone` and no change detection round _checks_ the checkbox or slide-toggle.

Fixes angular#4720

src/lib/checkbox/checkbox.ts

@@ -271,10 +271,12 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
 
   /** Method being called whenever the label text changes. */
   _onLabelTextChange() {
-    // This method is getting called whenever the label of the checkbox changes.
-    // Since the checkbox uses the OnPush strategy we need to notify it about the change
-    // that has been recognized by the cdkObserveContent directive.
-    this._changeDetectorRef.markForCheck();
+    // Since the event of the `cdkObserveContent` directive runs outside of the zone, the checkbox
+    // component will be only marked for check, but no actual change detection runs automatically.
+    // Instead of going back into the zone in order to trigger a change detection which causes
+    // *all* components to be checked (if explicitly marked or not using OnPush), we only trigger
+    // an explicit change detection for the checkbox view and it's children.
+    this._changeDetectorRef.detectChanges();
   }
 
   // Implemented as part of ControlValueAccessor.

src/lib/slide-toggle/slide-toggle.ts

@@ -358,9 +358,11 @@ export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestro
 
   /** Method being called whenever the label text changes. */
   _onLabelTextChange() {
-    // This method is getting called whenever the label of the slide-toggle changes.
-    // Since the slide-toggle uses the OnPush strategy we need to notify it about the change
-    // that has been recognized by the cdkObserveContent directive.
-    this._changeDetectorRef.markForCheck();
+    // Since the event of the `cdkObserveContent` directive runs outside of the zone, the
+    // slide-toggle component will be only marked for check, but no actual change detection runs
+    // automatically. Instead of going back into the zone in order to trigger a change detection
+    // which causes *all* components to be checked (if explicitly marked or not using OnPush),
+    // we only trigger an explicit change detection for the slide-toggle view and it's children.
+    this._changeDetectorRef.detectChanges();
   }
 }