fix(material-experimental/mdc-slider): implement a better solution for change detection problem

* use markForCheck() instead of detectChanges() in updateTickMarks()
* call detectChanges() once at the end of ngAfterViewInit() in MatSlider with
  a thorough comment explaining why it is needed

Author: wagnermaciel

src/material-experimental/mdc-slider/slider-adapter.ts

@@ -93,7 +93,7 @@ export class SliderAdapter implements MDCSliderAdapter {
   }
   updateTickMarks = (tickMarks: TickMark[]): void => {
     this._delegate._tickMarks = tickMarks;
-    this._delegate._cdr.detectChanges();
+    this._delegate._cdr.markForCheck();
   }
   setPointerCapture = (pointerId: number): void => {
     this._delegate._elementRef.nativeElement.setPointerCapture(pointerId);

src/material-experimental/mdc-slider/slider.ts

@@ -164,6 +164,17 @@ export class MatSlider implements _MatSliderInterface, AfterViewInit, OnDestroy
       this._foundation.layout();
       this._initialized = true;
     }
+    // The MDC foundation requires access to the view and content children of the MatSlider. In
+    // order to access the view and content children of MatSlider we need to wait until change
+    // detection runs and materializes them. That is why we call init() and layout() in
+    // ngAfterViewInit().
+    //
+    // The MDC foundation then uses the information it gathers from the DOM to compute an initial
+    // value for the tickMarks array. It then tries to update the component data, but because it is
+    // updating the component data AFTER change detection already ran, we will get a changed after
+    // checked error. Because of this, we need to force change detection to update the UI with the
+    // new state.
+    this._cdr.detectChanges();
   }
 
   ngOnDestroy() {