Angular change detection, proper way to update a view based on svg object geometrical properties after the view is updated

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;
    }
}