not set property value on div with javascript in angular

Question

I need to set these properties when click on the div in angular with javascript:

maximunWidth() {
    var parentDiv = document.querySelector(".cadr");
    parentDiv.setAttribute("width",(this.size.width - 2).toString());
    parentDiv.setAttribute("height",(this.size.height - 41).toString());
}

and this is my html code :

<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6"></div>
<div class="minmize" (click)="maximunWidth()"></div>

What's the problem? how can I solve this problem?

What version of angular are you using? Did you try ng-click="maximunWidth()" in your HTML (if you're using angularjs v1.x)? — N'Bayramberdiyev
– N'Bayramberdiyev, Commented Aug 22, 2019 at 7:05
Possible duplicate of Set component style from variable in Angular 2 — Alfa Bravo
– Alfa Bravo, Commented Aug 22, 2019 at 7:23

Muhammed Albarmavi · Accepted Answer · 2019-08-22 07:17:10Z

1

It is not recommended to change the dom element directly you can use ngStyle directive

template

<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6" 
     [ngStyle]="{'width.px':width ,'height.px':height  }"></div>
<div class="minmize" (click)="maximunWidth()"></div>

component

public width = 'initial'; // 👈 default value 
public height  = 'initial'; // 👈 default value 

public maximunWidth() { 
 this.width = this.size.width - 2;
 this.height = this.size.height - 41;
}

edited Aug 22, 2019 at 7:17

answered Aug 22, 2019 at 7:11

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

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

Comments

jSebestyén · Accepted Answer · 2019-08-22 07:13:30Z

1

Try to avoid accessing the html elements directly. The whole point of Angular is (very much simplified) to take care of the DOM for you.

Instead of setting attributes directly let Angular take care of this for you:

<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6"
     [ngStyle]="{'width': calculatedWidth, 'height': calculatedHeight}"></div>
<div class="minmize" (click)="maximunWidth()"></div>

And populate these values with the computed values in your typescript:

maximunWidth() {
    this.calculatedWidth = ...;
    this.calculatedHeight = ...;
}

answered Aug 22, 2019 at 7:13

jSebestyén

1,8362 gold badges19 silver badges27 bronze badges

Comments

Manzer A · Accepted Answer · 2019-08-22 07:16:03Z

1

<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6"  [style.width]="widthDiv+'%'" [style.height]="heightDiv+'%'"></div>
<div class="minmize" (click)="maximunWidth()"></div>

or,

<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6"  [style.width]="widthDiv+'px'" [style.height]="heightDiv+'px'"></div>
<div class="minmize" (click)="maximunWidth()"></div>

.ts

public maximunWidth() { 
 this.widthDiv= this.size.width - 2;
 this.heightDiv= this.size.height - 41;
}

answered Aug 22, 2019 at 7:16

Manzer A

3,9266 gold badges41 silver badges79 bronze badges

Comments

RateM · Accepted Answer · 2019-08-22 07:27:48Z

1

In your way of implementation whenever you click it will decrease the dimesion of that div tag. Try using property binding.

cssClass = 'oldSize'
maximunWidth() {
    this.cssClass = 'newSize'
}

In your html

<div id="cadr" [class]=" 'cadr ' + 'col-md-6 ' + 'col-xl-6 ' + 'col-sm-12 ' + 'col-lg-6 ' + cssClass"></div>
<div class="minmize" (click)="maximunWidth()"></div>

edited Aug 22, 2019 at 7:27

answered Aug 22, 2019 at 7:19

RateM

3011 gold badge6 silver badges19 bronze badges

2 Comments

Muhammed Albarmavi Over a year ago

there is a small error 'cadr' 'col-md-6' => 'cadr' + 'col-md-6' ... 👍

Muhammed Albarmavi Over a year ago

I think it 's better to use [ngClass ] ="{'cadr col-md-6 col-xl-6 col-sm-12 col-lg-6' : true ,newSize : toggleState , oldSize : !toggleState" I just like to use ngStle and ngClass 😅😅

Collectives™ on Stack Overflow

not set property value on div with javascript in angular

4 Answers 4

Comments

Comments

.ts

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

.ts

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related