Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

fix(fxLayoutGap): mutation observer should run outside the ngZone #370

Merged
merged 1 commit into from
Aug 9, 2017
Merged

fix(fxLayoutGap): mutation observer should run outside the ngZone #370

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 19 additions & 16 deletions src/lib/flexbox/api/layout-gap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
AfterContentInit,
Optional,
OnDestroy,
NgZone,
} from '@angular/core';
import {Subscription} from 'rxjs/Subscription';

Expand Down Expand Up @@ -65,7 +66,8 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
constructor(monitor: MediaMonitor,
elRef: ElementRef,
renderer: Renderer,
@Optional() @Self() container: LayoutDirective) {
@Optional() @Self() container: LayoutDirective,
private _zone: NgZone) {
super(monitor, elRef, renderer);

if (container) { // Subscribe to layout direction changes
Expand Down Expand Up @@ -114,22 +116,23 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
* NOTE: this does NOT! differentiate between viewChildren and contentChildren
*/
protected _watchContentChanges() {
let onMutationCallback = (mutations) => {
let validatedChanges = (it: MutationRecord) => {
return (it.addedNodes && it.addedNodes.length) ||
(it.removedNodes && it.removedNodes.length);
};

// update gap styles only for child 'added' or 'removed' events
if (mutations.filter(validatedChanges).length) {
this._updateWithValue();
this._zone.runOutsideAngular(() => {

if (typeof MutationObserver !== 'undefined') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a big deal, but you can move the MutationObserver support check outside of the runOutsideAngular to avoid hitting runOutsideAngular completely if it's unsupported.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

true. minor nit. agreed ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it's pretty minor, no need to change it.

this._observer = new MutationObserver((mutations: MutationRecord[]) => {
let validatedChanges = (it: MutationRecord): boolean => {
return (it.addedNodes && it.addedNodes.length > 0) ||
(it.removedNodes && it.removedNodes.length > 0);
};

// update gap styles only for child 'added' or 'removed' events
if (mutations.some(validatedChanges)) {
this._updateWithValue();
}
});
this._observer.observe(this._elementRef.nativeElement, {childList: true});
}
};

if (typeof MutationObserver !== 'undefined') {
this._observer = new MutationObserver(onMutationCallback);
this._observer.observe(this._elementRef.nativeElement, {childList: true});
}
});
}

/**
Expand Down