CODEWITHSUNDEEP
javascriptangulartypescript
kianoush dortaj
kianoush dortaj

Reputation: 73

not set property value on div with javascript in angular

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?

Upvotes: 1

Views: 655

Answers (4)

RateM
RateM

Reputation: 291

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>

Upvotes: 1

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24434

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;
}

Upvotes: 1

Manzer A
Manzer A

Reputation: 3826

<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;
}

Upvotes: 1

jSebesty&#233;n
jSebesty&#233;n

Reputation: 1806

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 = ...;
}

Upvotes: 1

Related Questions