diff --git a/src/material-experimental/mdc-slider/BUILD.bazel b/src/material-experimental/mdc-slider/BUILD.bazel index e33ab704da06..e7de36cab4ed 100644 --- a/src/material-experimental/mdc-slider/BUILD.bazel +++ b/src/material-experimental/mdc-slider/BUILD.bazel @@ -13,6 +13,9 @@ ng_module( assets = [":slider_scss"] + glob(["**/*.html"]), module_name = "@angular/material-experimental/mdc-slider", deps = [ + "//src/cdk/bidi", + "//src/cdk/coercion", + "//src/cdk/platform", "//src/material/core", "@npm//@angular/forms", "@npm//@material/slider", diff --git a/src/material-experimental/mdc-slider/slider.ts b/src/material-experimental/mdc-slider/slider.ts index 7396823d33ad..932e213adddf 100644 --- a/src/material-experimental/mdc-slider/slider.ts +++ b/src/material-experimental/mdc-slider/slider.ts @@ -8,7 +8,7 @@ import {Directionality} from '@angular/cdk/bidi'; import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion'; -import {normalizePassiveListenerOptions} from '@angular/cdk/platform'; +import {normalizePassiveListenerOptions, Platform} from '@angular/cdk/platform'; import { AfterViewInit, Attribute, @@ -322,8 +322,11 @@ export class MatSlider implements AfterViewInit, OnChanges, OnDestroy, ControlVa @ViewChild('trackMarker', {static: false}) _trackMarker: ElementRef; constructor( - private _elementRef: ElementRef, private _changeDetectorRef: ChangeDetectorRef, - private _ngZone: NgZone, @Optional() private _dir: Directionality, + private _elementRef: ElementRef, + private _changeDetectorRef: ChangeDetectorRef, + private _ngZone: NgZone, + private _platform: Platform, + @Optional() private _dir: Directionality, @Attribute('tabindex') tabIndex: string, @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) { this.tabIndex = parseInt(tabIndex) || 0; @@ -342,19 +345,28 @@ export class MatSlider implements AfterViewInit, OnChanges, OnDestroy, ControlVa ngAfterViewInit() { this._isInitialized = true; - this._foundation.init(); - // The standard Angular Material slider is always using discrete values. We always - // want to enable discrete values and support ticks, but want to still provide - // non-discrete slider visual looks if thumb label is disabled. - // TODO(devversion): check if we can get a public API for this. - // Tracked with: https://github.com/material-components/material-components-web/issues/5020 - (this._foundation as any).isDiscrete_ = true; + if (this._platform.isBrowser) { + // The MDC slider foundation accesses DOM globals, so we cannot initialize the + // foundation on the server. The foundation would be needed to move the thumb + // to the proper position and to render the ticks. + this._foundation.init(); + + // The standard Angular Material slider is always using discrete values. We always + // want to enable discrete values and support ticks, but want to still provide + // non-discrete slider visual looks if thumb label is disabled. + // TODO(devversion): check if we can get a public API for this. + // Tracked with: https://github.com/material-components/material-components-web/issues/5020 + (this._foundation as any).isDiscrete_ = true; + + // These bindings cannot be synced in the foundation, as the foundation is not + // initialized and they cause DOM globals to be accessed (to move the thumb) + this._syncStep(); + this._syncValue(); + this._syncMax(); + this._syncMin(); + } - this._syncStep(); - this._syncValue(); - this._syncMax(); - this._syncMin(); this._syncDisabled(); } @@ -385,7 +397,11 @@ export class MatSlider implements AfterViewInit, OnChanges, OnDestroy, ControlVa ngOnDestroy() { this._dirChangeSubscription.unsubscribe(); - this._foundation.destroy(); + // The foundation cannot be destroyed on the server, as the foundation + // has not be initialized on the server. + if (this._platform.isBrowser) { + this._foundation.destroy(); + } } /** Focuses the slider. */ diff --git a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html index 5e23fbe81fae..5b27cc90ad3e 100644 --- a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html +++ b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html @@ -40,3 +40,9 @@

MDC slide-toggle

with a label + +

Slider

+ + + + diff --git a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts index b0f787f48b59..a86fc7aff631 100644 --- a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts +++ b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts @@ -6,6 +6,7 @@ import {MatChipsModule} from '@angular/material-experimental/mdc-chips'; import {MatMenuModule} from '@angular/material-experimental/mdc-menu'; import {MatRadioModule} from '@angular/material-experimental/mdc-radio'; import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-toggle'; +import {MatSliderModule} from '@angular/material-experimental/mdc-slider'; import {MatTabsModule} from '@angular/material-experimental/mdc-tabs'; @Component({ @@ -24,6 +25,7 @@ export class KitchenSinkMdc { MatMenuModule, MatRadioModule, MatSlideToggleModule, + MatSliderModule, MatTabsModule, ], declarations: [KitchenSinkMdc], diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html index 61c3c7292faa..8649bdcd3cea 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.html +++ b/src/universal-app/kitchen-sink/kitchen-sink.html @@ -208,6 +208,7 @@

Slider

+

Tabs