From e94b7bd3c81a30db13225050e12b5f69765ef4c8 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 5 Mar 2021 04:38:22 +0100 Subject: [PATCH] fix(material-experimental/mdc-progress-bar): run resize observer outside zone (#21564) Runs the `ResizeObserver` from the progress bar outside of the `NgZone` so that it doesn't trigger change detection. (cherry picked from commit bd2c324d5679be149d8295c4d2b3bbe4b78f176e) --- .../mdc-progress-bar/progress-bar.ts | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/material-experimental/mdc-progress-bar/progress-bar.ts b/src/material-experimental/mdc-progress-bar/progress-bar.ts index 8630cc1d0305..619a52f0d384 100644 --- a/src/material-experimental/mdc-progress-bar/progress-bar.ts +++ b/src/material-experimental/mdc-progress-bar/progress-bar.ts @@ -101,15 +101,19 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie (window as unknown as WithMDCResizeObserver).ResizeObserver; if (resizeObserverConstructor) { - const observer = new resizeObserverConstructor(callback); - - // Internal client users found production errors where `observe` was not a function - // on the constructed `observer`. This should not happen, but adding this check for this - // edge case. - if (typeof observer.observe === 'function') { - observer.observe(this._rootElement); - return observer; - } + return this._ngZone.runOutsideAngular(() => { + const observer = new resizeObserverConstructor(callback); + + // Internal client users found production errors where `observe` was not a function + // on the constructed `observer`. This should not happen, but adding this check for this + // edge case. + if (typeof observer.observe === 'function') { + observer.observe(this._rootElement); + return observer; + } + + return null; + }); } return null;