Accessing elementRef inside MatButton. Angular 6

Question

I'm trying to get boundaries of an element. It works well with div, however when I'm trying to do the same with button with angular material directive I'm getting the MatButton object and I can't use getBoundingClientRect on it. I can do what I need to do with getting the boundaries of div, but it would be less cumbersome with boundaries of button, because it doesn't change size in lifetime of application.

Excerpt from template:

<div #container>
<button #button mat-flat-button>Button</button>

Excerpt from class

@ViewChild('button') button : ElementRef;
@ViewChild('container') container : ElementRef;

checkBoundaries():void [
    const buttonRect = this.button.nativeElement.getBoundingClientRect();
    const containerRect = this.container.nativeElement.getBoundingClientRect();
    console.log(button);
    console.log(container);
}

What I get from logs

MatButton {_elementRef: ElementRef, _disableRipple: false, _disabled: false, _platform: Platform, _focusMonitor: FocusMonitor, …}

ElementRef {nativeElement: div}

When trying to call getBoundingClientRect on button line I get the following error:

ERROR TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')

I would appreciate the guidance

Are you trying to call checkBoundaries in ngOnInit? The view is only ready from ngAfterViewInit onwards. — Will Alexander
– Will Alexander, Commented Feb 24, 2022 at 10:05
checkBoundaries are called way later, to be specific on clicking the other button in the component. Both button and container have value when calling that — dabrowawojciech64
– dabrowawojciech64, Commented Feb 24, 2022 at 10:20
If you change the type of the ViewChild for button to MatButton, you'll be able to access its properties. The "Angular" way of approaching this would be to use a directive, however. — Will Alexander
– Will Alexander, Commented Feb 24, 2022 at 10:23

Adrian Mole · Accepted Answer · 2023-02-17 13:37:48Z

0

Use the static property and set it to true:

@ViewChild('button' , {read: ElementRef, static: true}) private button : ElementRef;

edited Feb 17, 2023 at 13:37

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Feb 13, 2023 at 10:02

Amani Khenafi

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Accessing elementRef inside MatButton. Angular 6

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related