How can you retrieve the preceding sibling using an Angular directive?

Currently, I am utilizing ELEMENTREF to interact with the DOM via Renderer2. Allow me to provide a simple 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 code above was just a demonstration to highlight the syntax in yellow color.

However, I have a query regarding how to access the previous element and retrieve its width in order to set it as the value for a left-style property?

For instance: If the preceding sibling has a width of 400px, I want the current element to have a left style of 400px.

Your collaboration is greatly appreciated.

Answer №1

If you need to access the parent element, you can do so by using the following code:

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

Once you have the parent element, you can then select its child elements by assigning them incrementing IDs like this:

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

You can then retrieve the width of the sibling element with the following code:

let width = sibling.offsetWidth;.

I hope this solution is helpful to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods can be used to get npx to execute a JavaScript cli script on a Windows operating system

The Issue - While my npx scaffolding script runs smoothly on Linux, it encounters difficulties on Windows. I've noticed that many packages run flawlessly on Windows, but the difference in their operations remains elusive to me. Even after consulting A ...

Guide on how to add multiple options to a select element in HTML using prototype.js

What is the best way to add multiple options to a select tag in HTML using prototype js? Appreciate your help. ...

What is the best way to implement an onClick event listener in a TypeScript React application?

Is there a way to properly add an onClick event listener to a div element in my code snippet below? useEffect(() => { if (ref.current === null) { return; } const handleClick = (el: HTMLDivElement, e: MouseEvent) = ...

What is the best way to restore a component's state to its default settings when it receives new props?

I have a Next.js project in development with a custom Layout already set up. I want the header component to reset whenever a new page is navigated to, so that the menu reverts back to its default state. Does anyone know how I can achieve this? import { F ...

Using a single TypeORM connection across various modules in NestJS

In the process of developing a link shortener, I have set up a CRUD REST API for authentication and creating shortened links. Now, I am looking to manage redirects for these shortened URLs without using the same path as my API endpoints (e.g. /api/v1/). Af ...

Tips for implementing resizable Material-UI Dialogs

I'm working on a project that involves creating a dialog box that can be resized and dragged. While I found steps in the Material-UI Dialog documentation on how to make it draggable, I'm still looking for information on how to make it resizable. ...

Tips for embedding Jquery code within Vuejs applications

Trying to code a Vue.js Navbar that changes color when scrolling using Jquery and CSS script. It works, but I encountered an error with Vue.js not supporting the syntax '$' after page refresh, resulting in a "$ not defined" error message. As a ne ...

Exploring and listing the key-value pairs from several arrays within an object

My inquiry pertains to the following function: function loadConfigurations(configs){ console.log(configs); } The 'configs' object received by the loadConfigurations function contains two properties --two arrays named "assigned" and "unassign ...

What is the best way to emphasize specific months and years in an Angular Material datepicker?

I have an array of days, which can be from any year. I am attempting to customize the Angular Material datepicker to highlight specific months and years in the selection views based on the array of days. .html <input [matDatepicker]="picker" ...

Develop a structured type that encompasses the stationary attributes of an object-oriented class

Provided are the following classes: class EnumerationDTO { designation: string; id: number; } class ExecutionStatusDTO extends EnumerationDTO { static readonly open: ExecutionStatusDTO = { id: 0, designation: 'Open' }; static readonl ...

What methods does Enzyme have for determining the visibility of components?

I am facing an issue with a Checkbox component in my project. I have implemented a simple functionality to hide the checkbox by setting its opacity : 0 based on certain conditions within the containing component (MyCheckbox) MyCheckBox.js import React fr ...

Pausing for the completion of AJAX calls within a $.each loop before proceeding with the function execution

I am looking to trigger a function only once all of the AJAX calls within my $.each loop have finished executing. What is the most effective approach to accomplish this task? function recalculateSeatingChartSeatIds() { var table_id = $(".seatingChar ...

Step-by-step guide on implementing Form.create in TypeScript and Ant Design with function components

Having trouble compiling my form created using Form.create(). The error message I'm getting is: Argument of type 'FunctionComponent<MyProps>' is not assignable to parameter of type 'ComponentType<{}>'. Type 'Fu ...

Transform the Object/String into a route query parameter string by hand

We have implemented query params in our Angular app to manage configuration settings that are subject to frequent changes. Currently, we are utilizing the following code snippet: this.router.navigate([], { relativeTo: this.activatedRoute, queryParams ...

The performance of my Angular app is top-notch, but I'm having some trouble with ng

Issues with Loading Controllers in My App After deploying and running my app in a browser, I encountered an issue with loading controllers. While I can reach all the controllers/services successfully, one particular controller is not loading properly. To ...

Switching the children image source by hovering over the parent element

I have a React component that functions as a card containing a title and an image. I want the image to change upon hovering over the entire card, rather than just the img element itself. While CSS and the background property could achieve this, I prefer k ...

I can't seem to get my code to work more than once

My code seems to be working only once. This is the HTML code snippet I am using: <span id="0" class="add-title">add title</span> And here is my JavaScript code: jQuery(document).ready(function($) { var iTitlesArray = []; $(document ...

Is there a more "Angular-esque" approach to implementing this (inter-element communication)?

I have created a custom directive that will automatically add an asterisk to the label of any input field marked as required. The following is my link function with detailed comments: // This is what the DOM structure looks like: // <label id="label-1" ...

VUE 3 inexplicably failing to display the custom component's template, console remains error-free

I am utilizing flask, html, js for building a web application. I am currently facing an issue where the template defined in the component <add-movie> within movies.js is not being rendered into add_movies.html. The add_movies.html extends base_admin ...

Trigger .gif on hover using ng-repeat in AngularJS

Many solutions to this problem involve using jQuery, such as the following examples: Stop a gif animation onload, on mouseover start the activation and Animating a gif on hover. However, I'm interested in achieving the same functionality using Angular ...