Dynamically updating css in Angular 2

user_2313300 0
Viewed 232640

Let's say I have an Angular2 Component

//home.component.ts

import { Component } from 'angular2/core';

@Component({
    selector: "home",
    templateUrl: "app/components/templates/home.component.html",
    styleUrls: ["app/components/styles/home.component.css"]
})
export class HomeComponent {
    public width: Number;
    public height: Number;
}

The template html file for this component

//home.component.html

<div class="home-component">Some stuff in this div</div>

And finally the css file for this component

//home.component.css

.home-component{
    background-color: red;
    width: 50px;
    height: 50px;
}

As you can see there are 2 properties in the class, width and height. I would like the css styles for width and height to match the values of the width and height properties and when the properties update, the width and height of the div update. What is the proper way to accomplish this?

angular css
13 Answers

If you want to set width dynamically with variable than use [] braces instead {{}}:

 <div [style.width.px]="[widthVal]"  [style.height.px]="[heightVal]"></div>

 <div [style.width.%]="[widthVal]"  [style.height.%]="[heightVal]"></div>
user_33051190

I liked the look of WenhaoWuI's idea above, but I needed to identify the div with class .ui-tree in the PrimeNG tree component to set the height dynamically. All the answers I could find required the div to be named (ie #treediv) to enable the use of @ViewChild(), @ViewChildren(), @ContentChild(), @ContentChilden() etc. This was messy with a third party component.

I finally found a snippet from Günter Zöchbauer :

ngAfterViewInit() {
  this.elRef.nativeElement.querySelector('.myClass');
}

This made it easy:

@Input() height: number;
treeheight: number = 400; //default value

constructor(private renderer: Renderer2, private elRef: ElementRef) {  }

ngOnInit() {
    this.loading = true;
    if (this.height != null) {
        this.treeheight = this.height;
    }   
}

ngAfterViewInit() {
    this.renderer.setStyle(this.elRef.nativeElement.querySelector('.ui-tree'), 'height', this.treeheight + "px");
}
user_17228050

you can achive this by calling a function also

<div [style.width.px]="getCustomeWidth()"></div>

  getCustomeWidth() {
    //do what ever you want here
    return customeWidth;
  }
user_44319020

In Html:

<div [style.maxHeight]="maxHeightForScrollContainer + 'px'">
</div>

In Ts

this.maxHeightForScrollContainer = 200 //your custom maxheight
user_92296850

My solution was a combination of the @ViewChild() and ngAfterViewInit() function.

HTML:

<div
  class="form-field text-form-field"
  #textInputContainer
>
  <label *ngIf="field?.label"> My Label </label>
  <input type="text"/>
</div>

TS:

  @ViewChild("textInputContainer") textInputContainer;

  constructor() {}

  ngOnInit(): void {}

  ngAfterViewInit(): void   {
    this.textInputContainer.nativeElement.style.width = "50%";
  }
user_111054960
Related