How to access the previous sibling through an angular directive?

Question

At the moment, I'm using ELEMENTREF to access the DOM through the Redenrer2. Here's a basic example:

import { Directive, Renderer2, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private renderer: Renderer2, private el: ElementRef) {
    this.renderer.setStyle(this.el.nativeElement, 'background', 'yellow');
  }

}

The above code was just a test to leave the syntax highlight with the yellow color.

However, I need to know how do I access the previous element and capture the width of it to move to a left-style property?

Ex: Former brother has the width of 400px. The current element has the left of 400px.

I'm counting on the collaboration.

Answer 1

You can get the parent element:

let parent = this.renderer.parentNode(this.elementRef.nativeElement);

and then select his child somehow, maybe give them incrementing ID's:

let sibling = parent.querySelector('#child5');

and then you have siblings width:

let width = sibling.offsetWidth;.

Hope that helps.