How to resize a DOM element at run time

Question

In Angular 2 project, I am trying to resize a DOM element that I retrieve by id. I set the size as listed below and I don't observe any change. What step am I missing?

        document.getElementById('my_grid').setAttribute("style","height:600px");

What kind of element is this you want to set the height for? — Jan B., Jan 28 '17 at 00:07

score 2 · Answer 1 · answered Jan 28 '17 at 00:44

2

Don't use like this. You can use angular 2 feature.

You can use [style.height.px]="modelvalue"
Second way, you can use <div #mydiv> in html and use @ViewChild in component

Example

@ViewChild mydiv;

resizeDiv() {
    this.mydiv.nativeElement...
}

answered Jan 28 '17 at 00:44

Kishan Mundha

2,989
18
26

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

You need to set the height to a <div> element. Your browser won't interpret the height attribute on an Angular directive.

Furthermore, the prefered way to access elements in your DOM is via the @ViewChild decorator. See accessing native elements in angular2

edited May 23 '17 at 12:09

Community

1
1

answered Jan 28 '17 at 00:34

Jan B.

6,030
5
32
53

score 0 · Answer 3 · answered Jan 28 '17 at 01:03

In angular 2 whenever possible never use core javascript or jquery code to manipulate dom element. Try first with do angular 2 features.

We can use [style.height.px]="height" and whenever you want to change div height change height value from component

How to resize a DOM element at run time

3 Answers3