Finding the width of a div element in Angular 2

Question

Finding the width of a div element in Angular 2

I have encountered several posts, but none of them quite achieve what I am trying to do. I am dealing with a table that exceeds the width of the page and, due to certain requirements, I need to measure its width.

I attempted:

@ViewChild('tableToMeasure') elementView: ElementRef;

And then added #tableToMeasure to the table. However, this resulted in an error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined

Even though it works only on the parent div of the page.

Any suggestions? I need to determine its width both on page load and when the page is resized, and adjust another div's width accordingly.

angular typescript

Answer 1

Answer №1

@Component({
    selector: 'custom-selector',
    template: `<button #tableToCalculate>Press here</button>`
})
export class CustomComponent implements AfterViewInit {

    @ViewChild('tableToCalculate') elementView;

    constructor() {
    }

    ngAfterViewInit() {
        console.log(this.elementView.nativeElement);
    }
}

Answer 2

@Component({
    selector: 'custom-selector',
    template: `<button #tableToCalculate>Press here</button>`
})
export class CustomComponent implements AfterViewInit {

    @ViewChild('tableToCalculate') elementView;

    constructor() {
    }

    ngAfterViewInit() {
        console.log(this.elementView.nativeElement);
    }
}

Answer 3

Answer №2

elementView won't be assigned until ngAfterViewInit has been executed. If your code is in the ngOnInit method or constructor, you will encounter this issue.

Answer 4

elementView won't be assigned until ngAfterViewInit has been executed. If your code is in the ngOnInit method or constructor, you will encounter this issue.

Answer 5

Answer №3

I encountered a similar issue and was able to resolve it quite easily. The reason you are getting an 'undefined' error is because the identifier 'tableToMeasure' is not defined in your HTML file.

To fix this, simply include #tableToMeasure within your HTML element.

Here's an example of how you can structure your HTML code:

<div #tableToMeasure style="width: 100px; height: 100px">
   <span>Some content!</span
</div>

In your TypeScript file, make sure to add the following line:

@ViewChild('tableToMeasure')elementView: ElementRef;

Don't forget to import ViewChild and ElementRef from @angular/core.

Best of luck with your implementation!

Answer 6

I encountered a similar issue and was able to resolve it quite easily. The reason you are getting an 'undefined' error is because the identifier 'tableToMeasure' is not defined in your HTML file.

To fix this, simply include #tableToMeasure within your HTML element.

Here's an example of how you can structure your HTML code:

<div #tableToMeasure style="width: 100px; height: 100px">
   <span>Some content!</span
</div>

In your TypeScript file, make sure to add the following line:

@ViewChild('tableToMeasure')elementView: ElementRef;

Don't forget to import ViewChild and ElementRef from @angular/core.

Best of luck with your implementation!

Finding the width of a div element in Angular 2

Answer №1

Answer №2

Answer №3

Similar questions

Convert angular-tree-component JSON into a suitable format and dynamically generate checkboxes or radio buttons

Error in Angular Apollo V3: Jest unable to locate module 'apollo-angular'

The video in the TypeScript code within the Owl Carousel is not displaying properly - only the sound is playing. The video screen remains stationary

Demonstration of basic geometric shapes being generated using Forge Viewer Angular

Error: ngModel does not reflect dynamic changes in value

Innovative coding solution to modify designated variables in Angular 2 and beyond

Encountering Compilation Error in @microsoft/mgt Graph Toolkit Upon Transition from Angular 11 to Angular 13

Converting a TypeScript array into a generic array of a specific class

Ensure Standardized Schema Type in Universal Restriction

Modify table cell content based on boolean value - HTML

Strategies for handling uncaught promise rejections within a Promise catch block

Searching for a data grid component in Angular 2

Distinguishing between the practical aspects of directly subscribing to an Observable versus employing the subscribe() method with a parameter

You cannot assign multiple properties with the same name to an object literal

What is the best way to iterate through an object of objects in Vue.js using mapping?

When aot is enabled, ngClass and ngIf condition may not compile successfully

efficiently managing errors in a Nest Jest microservice with RabbitMQ

Update the reducer with accurate data typing

Encountering a deadly mistake with LNK1181 while attempting to npm install web3

Utilizing Asp.Net for Developing Microservices