Skip to content

Commit

Permalink
fix(module:graph): remove NgZone dependency (#8460)
Browse files Browse the repository at this point in the history
This commit eliminates the `NgZone` dependency from the graph edge component.
Since zone.js is becoming optional, `onStable` won't emit any value when `provideZonelessChangeDetection`
is used in the application config. Instead, we now use the alternative approach provided by `afterNextRender`.
Most of the code that was using `onStable` should be replaced with `afterNextRender`.
  • Loading branch information
arturovt committed Mar 22, 2024
1 parent 3bd6d48 commit a4ec21a
Showing 1 changed file with 19 additions and 12 deletions.
31 changes: 19 additions & 12 deletions components/graph/graph-edge.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@ import {
ChangeDetectorRef,
Component,
ElementRef,
Injector,
Input,
NgZone,
OnChanges,
OnInit,
SimpleChanges,
TemplateRef
TemplateRef,
afterNextRender,
inject
} from '@angular/core';
import { take } from 'rxjs/operators';

import { curveBasis, curveLinear, line } from 'd3-shape';

Expand Down Expand Up @@ -61,9 +62,10 @@ export class NzGraphEdgeComponent implements OnInit, OnChanges {
.y(d => d.y)
.curve(curveLinear);

private injector = inject(Injector);

constructor(
private elementRef: ElementRef<SVGGElement>,
private ngZone: NgZone,
private cdr: ChangeDetectorRef
) {
this.el = this.elementRef.nativeElement;
Expand All @@ -75,17 +77,22 @@ export class NzGraphEdgeComponent implements OnInit, OnChanges {

ngOnChanges(changes: SimpleChanges): void {
const { edge, customTemplate, edgeType } = changes;

if (edge) {
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
// Update path element if customTemplate set
if (customTemplate) {
this.initElementStyle();
}
afterNextRender(
() => {
// Update path element if customTemplate set
if (customTemplate) {
this.initElementStyle();
}

this.setLine();
this.cdr.markForCheck();
});
this.setLine();
this.cdr.markForCheck();
},
{ injector: this.injector }
);
}

if (edgeType) {
const type = this.edgeType === NzGraphEdgeType.LINE ? curveLinear : curveBasis;
this.line = line<{ x: number; y: number }>()
Expand Down

0 comments on commit a4ec21a

Please sign in to comment.