Skip to content

Commit

Permalink
fix(module:icon): re-enter Angular zone after icons have been loaded (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
arturovt authored Nov 15, 2022
1 parent 726ded3 commit 754ded6
Showing 1 changed file with 21 additions and 12 deletions.
33 changes: 21 additions & 12 deletions components/icon/icon.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -136,23 +136,32 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
private changeIcon2(): void {
this.setClassName();

// We don't need to re-enter the Angular zone for adding classes or attributes through the renderer.
// The Angular zone is left deliberately before the SVG is set
// since `_changeIcon` spawns asynchronous tasks as promise and
// HTTP calls. This is used to reduce the number of change detections
// while the icon is being loaded dynamically.
this.ngZone.runOutsideAngular(() => {
from(this._changeIcon())
.pipe(takeUntil(this.destroy$))
.subscribe({
next: svgOrRemove => {
// The _changeIcon method would call Renderer to remove the element of the old icon,
// which would call `markElementAsRemoved` eventually,
// so we should call `detectChanges` to tell Angular remove the DOM node.
// #7186
this.changeDetectorRef.detectChanges();

if (svgOrRemove) {
this.setSVGData(svgOrRemove);
this.handleSpin(svgOrRemove);
this.handleRotate(svgOrRemove);
}
// Get back into the Angular zone after completing all the tasks.
// Since we manually run change detection locally, we have to re-enter
// the zone because the change detection might also be run on other local
// components, leading them to handle template functions outside of the Angular zone.
this.ngZone.run(() => {
// The _changeIcon method would call Renderer to remove the element of the old icon,
// which would call `markElementAsRemoved` eventually,
// so we should call `detectChanges` to tell Angular remove the DOM node.
// #7186
this.changeDetectorRef.detectChanges();

if (svgOrRemove) {
this.setSVGData(svgOrRemove);
this.handleSpin(svgOrRemove);
this.handleRotate(svgOrRemove);
}
});
},
error: warn
});
Expand Down

0 comments on commit 754ded6

Please sign in to comment.