fix(material-experimental/mdc-slide-toggle): initial checked a… (#17991)

The initial `checked` and `disabled` state of the slide-toggle
is not reflected visually. This is because we sync the disabled
and checked state after the foundation has been created in the
`ngAfterViewInit` lifecycle hook.

The foundation then tries to set the classes on the MDC switch
element using the adapter. The adapter just updates an object
literal that will be passed through `[ngClass]` and relies on
Angular to refresh the view.

This won't work in Ivy because marking a component as dirty
from within the `ngAfterViewInit` lifecycle hook is a noop. See: FW-1354.

Just using the native element (like we do in other MDC components)
solves this problem and also avoids unnecessary change detections.

Author: devversion

src/dev-app/mdc-slide-toggle/mdc-slide-toggle-demo.html

@@ -8,6 +8,10 @@
     Disabled Slide Toggle
   </mat-slide-toggle>
 
+  <mat-slide-toggle disabled>
+    Always disabled (no value binding)
+  </mat-slide-toggle>
+
   <mat-slide-toggle [disabled]="firstToggle">
     Disable Bound
   </mat-slide-toggle>

src/material-experimental/mdc-slide-toggle/slide-toggle.html

@@ -1,6 +1,6 @@
 <div class="mdc-form-field"
      [class.mdc-form-field--align-end]="labelPosition == 'before'">
-  <div [ngClass]="_classes" #switch>
+  <div class="mdc-switch" #switch>
     <div class="mdc-switch__track"></div>
     <div class="mdc-switch__thumb-underlay">
       <div class="mat-mdc-slide-toggle-ripple" mat-ripple
@@ -28,9 +28,7 @@
     </div>
   </div>
 
-  <label #label
-         [for]="inputId"
-         (click)="$event.stopPropagation()">
+  <label [for]="inputId" (click)="$event.stopPropagation()">
     <ng-content></ng-content>
   </label>
 </div>

src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts

@@ -13,6 +13,7 @@ describe('MDC-based MatSlideToggle without forms', () => {
       imports: [MatSlideToggleModule, BidiModule],
       declarations: [
         SlideToggleBasic,
+        SlideToggleCheckedAndDisabledAttr,
         SlideToggleWithTabindexAttr,
         SlideToggleWithoutLabel,
         SlideToggleProjectedLabel,
@@ -320,6 +321,22 @@ describe('MDC-based MatSlideToggle without forms', () => {
         .toBe(5, 'Expected tabIndex property to have been set based on the native attribute');
     }));
 
+    it('should add the disabled class if disabled through attribute', () => {
+      const fixture = TestBed.createComponent(SlideToggleCheckedAndDisabledAttr);
+      fixture.detectChanges();
+
+      const switchEl = fixture.nativeElement.querySelector('.mdc-switch');
+      expect(switchEl.classList).toContain('mdc-switch--disabled');
+    });
+
+    it('should add the checked class if checked through attribute', () => {
+      const fixture = TestBed.createComponent(SlideToggleCheckedAndDisabledAttr);
+      fixture.detectChanges();
+
+      const switchEl = fixture.nativeElement.querySelector('.mdc-switch');
+      expect(switchEl.classList).toContain('mdc-switch--checked');
+    });
+
     it('should remove the tabindex from the host element', fakeAsync(() => {
       const fixture = TestBed.createComponent(SlideToggleWithTabindexAttr);
 
@@ -772,6 +789,11 @@ class SlideToggleWithModel {
   isDisabled = false;
 }
 
+@Component({
+  template: `<mat-slide-toggle checked disabled>Label</mat-slide-toggle>`
+})
+class SlideToggleCheckedAndDisabledAttr {}
+
 @Component({
   template: `
     <mat-slide-toggle [formControl]="formControl">

src/material-experimental/mdc-slide-toggle/slide-toggle.ts

@@ -91,26 +91,15 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
   private _checked: boolean = false;
   private _foundation: MDCSwitchFoundation;
   private _adapter: MDCSwitchAdapter = {
-    addClass: (className) => {
-      this._toggleClass(className, true);
-    },
-    removeClass: (className) => {
-      this._toggleClass(className, false);
-    },
-    setNativeControlChecked: (checked) => {
-      this._checked = checked;
-    },
-    setNativeControlDisabled: (disabled) => {
-      this._disabled = disabled;
-    },
+    addClass: className => this._switchElement.nativeElement.classList.add(className),
+    removeClass: className => this._switchElement.nativeElement.classList.remove(className),
+    setNativeControlChecked: checked => this._checked = checked,
+    setNativeControlDisabled: disabled => this._disabled = disabled,
   };
 
   /** Whether the slide toggle is currently focused. */
   _focused: boolean;
 
-  /** The set of classes that should be applied to the native input. */
-  _classes: {[key: string]: boolean} = {'mdc-switch': true};
-
   /** Configuration for the underlying ripple. */
   _rippleAnimation: RippleAnimationConfig = {
     enterDuration: numbers.DEACTIVATION_TIMEOUT_MS,
@@ -206,6 +195,9 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
   /** Reference to the underlying input element. */
   @ViewChild('input') _inputElement: ElementRef<HTMLInputElement>;
 
+  /** Reference to the MDC switch element. */
+  @ViewChild('switch') _switchElement: ElementRef<HTMLElement>;
+
   constructor(private _changeDetectorRef: ChangeDetectorRef,
               @Attribute('tabindex') tabIndex: string,
               @Inject(MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS)
@@ -311,12 +303,6 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
     });
   }
 
-  /** Toggles a class on the switch element. */
-  private _toggleClass(cssClass: string, active: boolean) {
-    this._classes[cssClass] = active;
-    this._changeDetectorRef.markForCheck();
-  }
-
   static ngAcceptInputType_tabIndex: NumberInput;
   static ngAcceptInputType_required: BooleanInput;
   static ngAcceptInputType_checked: BooleanInput;