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

A standard procedure for evaluating an application using JavaScript on the client side

I am looking to streamline E2E testing for a web application. The frontend of the app is built on a JavaScript framework, while the backend uses Java technology. While I am aware of the tools and frameworks available for JavaScript testing, I am curious ...

Incorporating Dynamic Events into HTML Generated on the Fly within a Vue.js Component

Currently, I am facing an issue where I am trying to dynamically generate HTML in a Vue.js component. While I have successfully rendered the HTML, I am struggling to connect the events for these dynamically generated elements. To illustrate this problem, I ...

What could be the reason for the selection box in my form not changing the items when togg

I'm having an issue with my form selection box code that used to work but is now not functioning properly. Could someone please help me identify where the error lies? Essentially, I have a form with the ID #main and a select box named #chart-type. Th ...

What is causing my React-Testing Library queries to not work at all?

In my current project, I am using Jest along with Testing-Library to create UI unit tests. One issue that I encountered was that the components were not rendering on the DOM. After some investigation, I found that the main culprit was a component called & ...

Tips for receiving accurate HTML content in an Ajax request

I have used an Ajax call to fetch data from a function that returns an entire HTML table. $.ajax({ url: "/admin/project/getProjectTrackedTimes", headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('cont ...

What causes me to create components with incorrect paths?

Can someone assist me with creating a new component in the dynamic-print folder instead of it being created in the app? Thank you ...

Create a dedicated component to specify the column definition for an Angular Material table

While I have reviewed the documentation on material, I aim to take it a step further with the following customization: wrapper-table.html <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-content>& ...

Angular class mapping of web API response

I have a web API action method that returns a chapter ID and chapter name. I would like to convert this into an Angular class with an additional field called 'Edit', which by default is set to false. export class Chapter { chapterid: number; ...

Create your own AngularJS directive for displaying or hiding elements using ng-show/ng

Caution: Angular rookie in action. I'm attempting to craft a personalized widget that initially displays a "Reply" link, and upon clicking it, should hide the link and reveal a textarea. Here's my current progress, but unfortunately, it's n ...

Setting the Height of a Fixed Element to Extend to the Bottom of the Browser Window

I currently have a webpage layout featuring a header at the top, a fixed sidebar on the left side, and main content displayed on the right. A demo version of this layout can be viewed at http://jsbin.com/iqibew/3. The challenge I'm facing is ensuring ...

Executing two AJAX requests simultaneously with Django, AJAX, and jQuery in a single event

I believe I'm on the right track to getting this to work, but I could really use some assistance with the JQuery aspect. It seems that everything functions as expected after the second click onwards, but there is an issue with the functionality on the ...

Strategies for passing multiple props to a function in React using TypeScript, such as useState([]) and useState(boolean)

Dealing with API Structure { "default": [ { "id": 1, "name": "A" }, { "id": 2, "name": "B" }, { "id": 3, "name" ...

Steps for implementing remote modals in Bootstrap 5 using CS HTML

I'm attempting to implement a remote modal window in Bootstrap 5 with C# MVC. The endpoint for the modal partial view is configured correctly. According to this discussion on Github, all that needs to be done is to call some JavaScript. However, it ...

Unable to run any npm scripts in a React project

My React application has been running smoothly for a while, but recently all the npm commands in the package.JSON file have stopped working. { "name": "fitness-appication-frontend", "version": "0.1.0", "private": true, "dependencies": { "reac ...

What is the best way to halt the execution of content scripts in the active tab?

I am currently developing a Google Chrome Extension and have come across a bug that I am struggling to fix on my own. The extension works as intended when switching to Youtube's Dark Mode on a single tab. However, if you are on Youtube and open a new ...

Why does the error message "$(…).functionName() is not a function" occur and what steps can be taken to prevent it from

I have encountered a console error message: $(...).functionName() is not a function Here is my function call: $("button").functionName(); This is the actual function: $.fn.functionName = function() { //Do Something }(jQuery); What ca ...

Display a loading progress bar with jQuery AJAX as your single page website content loads

I am currently working on a simple web page layout that consists of a navigation bar at the top and a body wrapper. Whenever a user clicks on a link in the navigation bar, I use .load to load the content of the page into the wrapper div. $(this).ajaxStar ...

Looking to send an HTTP request to submit a form within a Node.js application to an external website?

Can someone help me with submitting a form on a different site and receiving a response? I'm having trouble figuring out how to do this. Here is the website I am targeting: Below is my code snippet: var http = require('http'); var options ...

Sending information from popup to primary controller wit the use of AngularJS - (Plunker example provided) with an autocomplete field embedded in the popup

My scenario is a bit unique compared to passing regular data from a modal to the main controller. The input field in my modal has an autocomplete feature. Here is the Plunker I have included for reference: http://plnkr.co/edit/lpcg6pPSbspjkjmpaX1q?p=prev ...

What is causing the width discrepancy in my header section on mobile devices?

Help needed with website responsiveness issue! The site works fine on most screen sizes, but when it reaches around 414px in width, the intro section becomes too wide for the screen. Any ideas on what could be causing this problem? html: <nav id="m ...