Tips for obtaining the width of a child element during a resize event in an Angular application

  • When resizing the window, I am attempting to determine the width of a specific sub-component.
  • If I want to retrieve the entire app's width, I can use the following code:

      @HostListener('window:resize', ['$event']) 
       onResize(event) {
        event.target.innerWidth;
        console.log('Window resize: ' + event.target.innerWidth);
     }  
    

However, I'm uncertain about how to focus ONLY on a particular sub-component and obtain its width during window resizing.

<div class = 'panel-2'></div>

If anyone has insight into what steps I might be overlooking, please let me know. Thank you very much in advance!

 <div class = "main">
     <div class = 'left-section'>Left bar</div>
         <div class = 'right-section'>
             <div class = 'panel-1'></div>
             <div class = 'panel-2'></div>
         </div>
</div>

Answer №1

Make sure you include #pane2 in your panel 2 HTML code and then add @ViewChild('panel2') pane2; to your TypeScript file as a property of the respective class.

Once the ngOnInit function is called, you will have access to this.pane2.nativeElement, which can also be utilized within a HostListener, eliminating the need to depend on the event's target!

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 are the benefits of maintaining a property as non-observable instead of observable in knockout.js?

In my TypeScript project utilizing Knockout.js, I have a class with several properties. One of these properties is 'description', which is not directly tied to the DOM but needs to be used in popups triggered by certain mouse events (such as butt ...

Cross-Origin Resource Sharing problem with identical URL

I encountered a CORS issue with my Angular 6 application running on port 4200 and using an API on port 3000. To address this, I implemented the following code snippet on the server side: app.use(function(req, res, next) { res.header("Access-Control-Allo ...

What is the best way to create a memoized function in React?

I am currently developing an application using react and typescript, and I am facing a challenge in memoizing a function. const formatData = ( data: number[], gradientFill?: CanvasGradient ): Chart.ChartData => ({ labels: ["a", ...

The async pipeline fails to update with fresh data from the array

I have a challenge with my app that requires making approximately 500 API requests and displaying the data as it is being fetched. Currently, I am using an async pipe with an observable to achieve this. While attempting to update the view upon completion ...

An issue has been detected with the width attribute in Typescript when using

I have a question regarding the TypeScript error related to the width property. I've created a component called ProgressBar where I'm using Stitches for styling. However, TypeScript is throwing an error even when I specify the type as ANY. impor ...

What is the best way to find a match for {0} while still allowing for proper

I am working on developing a text templating system that allows for defining placeholders using {0}, similar to the functionality of .Net's string.format method. Here is an example of what I am aiming for: format("{0}", 42), // output ...

Mastering unit testing: A guide to implementing Apollo and Angular tests

Working on setting up my Angular 5 project, I noticed that it generated some unit tests for my components and services automatically. However, when trying to use Apollo with certain components, I encountered an error stating NullInjectorError: No provider ...

Getting the version from package.json in Next.js can be easily achieved by accessing the `version

In my quest to retrieve the "version" from the package.json in a Next.js application, I encountered a roadblock. I attempted using process.env.npm_package_version, similar to how it is done in a Node application, but unfortunately, it returned undefined. ...

What is the best way to utilize await in promises instead of using then?

How can I correctly handle the Promise.all() method? I'm experiencing issues with resolving the promise that generates a series of asynchronous requests (simple database queries in supabase-pg SQL). After iterating through the results with a forEach l ...

What is the process for defining an opaque type in programming?

[ This is not this ] Take a look at this snippet of code: interface Machine<OpaqueType> { get(): OpaqueType, update(t: OpaqueType); } const f = <U, V>(uMachine: Machine<U>, vMachine: Machine<V>) => { const u = uMach ...

Creating a variety of themes with unique color palettes for Angular Material along with custom-designed components

One of the goals for my app is to have multiple themes, including Angular Material themes, with the ability to define custom colors for specific components and elements that are not part of Angular Material. It's important that when I change a theme, ...

component is receiving an incompatible argument in its props

I am facing a situation where I have a component that works with a list of items, each with an ID, and a filtering function. The generic type for the items includes an ID property that all items share. Specific types of items may have additional properti ...

Developers beware: A functional component is generating a warning during development. Remember, function components do not support refs. Perhaps you intended to utilize React.forwardRef

Hey there! I have a question about a plugin that I've created and integrated into an application called HRnet (React 18). During development, I'm not encountering any warnings on the plugin side. However, when developing on the application side, ...

The plugin "proposal-numeric-separator" was not found. Please make sure that there is a corresponding entry for it in the ./available-plugins.js file

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "myProjects", "projects": { "uniqueApp": { "projectType": "web-app", "schematics": {}, "root": "", "sourceRoot": "src", ...

Is it possible to alter the meaning of a word using the ngIf condition?

As a newcomer to Angular and Ionic, I am experimenting with retrieving JSON data from a URL and translating the words received to another language. My initial attempt using ngif did not yield the desired result! This is what I tried to do in order to chan ...

Automate the process of opening an ngbpopover from an Angular 2 component using programming techniques

Currently, I am referring to this specific article in order to integrate Bootstrap with Angular 2. While the instructions in the article are helpful, there seems to be a lack of information on how to pass the popover reference to a component method. The on ...

Typescript: Transforming generic types into concrete types

I am utilizing a Generic type type GenericType = { [key: string]: { prop1: string, prop2?: string, prop3?: number, }, }; The purpose of the Generic type is to assist in constructing / validating a new object that I have created. const NewO ...

The bubble test encountered an error while attempting to install npm

Every time I run npm install, the installation process goes smoothly until the very end, where this error suddenly pops up: npm ERR! 436 passing (12s) npm ERR! 3 pending npm ERR! 2 failing ... I'm currently working on an Angular App and even af ...

How to load a PFX certificate from a file in NodeJS

For my current project involving Node.JS and TypeScript, one of the key requirements is to encrypt the payload body using a PFX certificate read from a .pfx file. The certificate I have is named cert1.pfx, and my code necessitates utilizing this certifica ...

Modify FrameColor of Material UI Inputs when Reset button is clicked

When using Angular Material UI in the Registermenu, I am facing an issue where clicking on the reset button deletes the content but leaves the red frames unchanged. Can anyone provide assistance with this problem? Thank you. Screenshot Here is the code f ...