Skip to content

Commit 5d25d1b

Browse files
authored
fix(material-experimental): better server-side rendering support for progress bar (#19036)
I got some changes in with material-components/material-components-web#5792 which allow us to properly render a progress bar during server-side rendering, instead of turning it into a noop. These changes remove all of the `isBrowser` checks. I also removed the `isBrowser` check from the MDC checkbox, because the `offsetWidth` access is safe, even though the property might be undefined.
1 parent f6be153 commit 5d25d1b

File tree

6 files changed

+530
-536
lines changed

6 files changed

+530
-536
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
"@types/youtube": "^0.0.38",
5959
"@webcomponents/custom-elements": "^1.1.0",
6060
"core-js": "^2.6.9",
61-
"material-components-web": "6.0.0-canary.9930d9cc5.0",
61+
"material-components-web": "6.0.0-canary.927fa902c.0",
6262
"rxjs": "^6.5.3",
6363
"systemjs": "0.19.43",
6464
"tslib": "^1.10.0",

src/material-experimental/mdc-checkbox/BUILD.bazel

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ ng_module(
2323
module_name = "@angular/material-experimental/mdc-checkbox",
2424
deps = [
2525
"//src/cdk/coercion",
26-
"//src/cdk/platform",
2726
"//src/material/checkbox",
2827
"//src/material/core",
2928
"@npm//@angular/animations",

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
*/
88

99
import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
10-
import {Platform} from '@angular/cdk/platform';
1110
import {
1211
AfterViewInit,
1312
Attribute,
@@ -211,7 +210,7 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
211210
private _checkboxAdapter: MDCCheckboxAdapter = {
212211
addClass: (className) => this._setClass(className, true),
213212
removeClass: (className) => this._setClass(className, false),
214-
forceLayout: () => this._platform.isBrowser && this._checkbox.nativeElement.offsetWidth,
213+
forceLayout: () => this._checkbox.nativeElement.offsetWidth,
215214
hasNativeControl: () => !!this._nativeCheckbox,
216215
isAttachedToDOM: () => !!this._checkbox.nativeElement.parentNode,
217216
isChecked: () => this.checked,
@@ -233,7 +232,6 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
233232

234233
constructor(
235234
private _changeDetectorRef: ChangeDetectorRef,
236-
private _platform: Platform,
237235
@Attribute('tabindex') tabIndex: string,
238236
/**
239237
* @deprecated `_clickAction` parameter to be removed, use

src/material-experimental/mdc-progress-bar/BUILD.bazel

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ ng_module(
2323
module_name = "@angular/material-experimental/mdc-progress-bar",
2424
deps = [
2525
"//src/cdk/bidi",
26-
"//src/cdk/platform",
2726
"//src/material/core",
2827
"//src/material/progress-bar",
2928
"@npm//@angular/core",

src/material-experimental/mdc-progress-bar/progress-bar.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ import {MDCLinearProgressAdapter, MDCLinearProgressFoundation} from '@material/l
2727
import {Subscription, fromEvent, Observable} from 'rxjs';
2828
import {filter} from 'rxjs/operators';
2929
import {Directionality} from '@angular/cdk/bidi';
30-
import {Platform} from '@angular/cdk/platform';
3130

3231
// Boilerplate for applying mixins to MatProgressBar.
3332
/** @docs-private */
@@ -63,7 +62,6 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
6362

6463
constructor(public _elementRef: ElementRef<HTMLElement>,
6564
private _ngZone: NgZone,
66-
private _platform: Platform,
6765
@Optional() private _dir?: Directionality,
6866
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
6967
super(_elementRef);
@@ -79,7 +77,7 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
7977
/** Adapter used by MDC to interact with the DOM. */
8078
private _adapter: MDCLinearProgressAdapter = {
8179
addClass: (className: string) => this._rootElement.classList.add(className),
82-
forceLayout: () => this._platform.isBrowser && this._rootElement.offsetWidth,
80+
forceLayout: () => this._rootElement.offsetWidth,
8381
removeAttribute: (name: string) => this._rootElement.removeAttribute(name),
8482
setAttribute: (name: string, value: string) => this._rootElement.setAttribute(name, value),
8583
hasClass: (className: string) => this._rootElement.classList.contains(className),
@@ -184,8 +182,7 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
184182
private _syncFoundation() {
185183
const foundation = this._foundation;
186184

187-
// Don't sync any state if we're not in a browser, because MDC uses some window APIs.
188-
if (foundation && this._platform.isBrowser) {
185+
if (foundation) {
189186
const direction = this._dir ? this._dir.value : 'ltr';
190187
const mode = this.mode;
191188

0 commit comments

Comments
 (0)