CODEWITHSUNDEEP
javascriptangulardom
reza
reza

Reputation: 6358

How to resize a DOM element at run time

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");

Upvotes: 1

Views: 445

Answers (3)

nisha
nisha

Reputation: 1

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

Upvotes: 0

Kishan Mundha
Kishan Mundha

Reputation: 3141

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

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

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

Upvotes: 2

Jan B.
Jan B.

Reputation: 6448

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

Upvotes: 0

Related Questions