角度变化检测，在视图更新后根据 svg 对象几何属性更新视图的正确方法

Question

I am not sure if there is a proper way of doing this in Angular...

What I want to do is related to text objects overlap management, in short :

1. Get a list of objects with a date and a text description from the backend.
2. These objects should display on an SVG timeline, the horizontal position is based on the date.
3. Once the view is updated, I want to set a top attribute on each text object based on the width property to detect if two objects overlap.

The way I am doing this now :
In the ngAfterViewChecked , I am checking the this.svgObj.nativeElement.children['textObjId'].textLength.baseVal.value . I am using this width property to determine if two text objects overlap.

My problem:
Obviously this is raising a ExpressionChangedAfterItHasBeenCheckedError as I am changing the top property after the view has been checked...

Is there any other "angular way" of achieving what I am trying to do ?

Answer 1

I found my mistake and sharing here in case that helps.

My problem : I was setting a property on my objects based on the dimensions of my SVG element after it was drawn. Then binding that calculated property to some positioning property of my SVG element in my template. That was raising the ExpressionChangedAfterItHasBeenCheckedError.

Solution : Setting the SVG position property directly from the ngAfterViewChecked method by accessing the element from there. Something like that :

export class SampleComponent implements AfterViewChecked {    
    @ViewChild('sampleSVG') sampleSVG: ElementRef;    
    ngAfterViewChecked(): void {
        this.sampleSVG.nativeElement.children['element-id-123'].y.baseVal.value = 12345;
    }
}