Dynamically updating css in Angular 2

Question

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?

Gaurav Mukherjee · Accepted Answer · 2017-11-12T07:44:29.207

351

Try this

 <div class="home-component" 
 [style.width.px]="width" 
 [style.height.px]="height">Some stuff in this div</div>

[Updated]: To set in % use

[style.height.%]="height">Some stuff in this div</div>

edited Nov 12 '17 at 07:44

answered Mar 09 '16 at 08:32

Gaurav Mukherjee

6,205
2
23
33

Wow! Too simple! – Boshra N Sep 07 '20 at 06:01
Can you help me and tell me why `[style.marginLeft.%]="this.triangleMargin"` does not work? :( The other parts work like you showed us, thank you :) – Siminho Dec 22 '20 at 10:59
If I want to perform operation , can i do like this, [style.height.px]="someVariable * 5" – vishnu Apr 01 '21 at 08:11
to @Siminho don't use this. It's implied in the html template. – Nik Dow Aug 05 '21 at 07:42
is there a way to be more programmatic like `[style.width]="100px"` or `[style.width]="90%"` meaning that I would set CSS like text value to indicate px or % – Pawel Cioch Feb 17 '23 at 21:44

score 52 · Answer 2 · answered Feb 13 '17 at 01:44

52

To use % instead of px or em with @Gaurav's answer, it's just

<div class="home-component" [style.width.%]="80" [style.height.%]="95">
Some stuff in this div</div>

answered Feb 13 '17 at 01:44

Helen

727
8
13

score 19 · Answer 3 · answered Mar 09 '16 at 04:09

19

This should do it:

<div class="home-component" 
     [style.width]="width + 'px'" 
     [style.height]="height + 'px'">Some stuff in this div</div>

answered Mar 09 '16 at 04:09

Sasxa

40,334
16
88
102

How to make it work with method? `[style.width]="getWidth()"` `getWidth() { return "100px" }` doesn't work, tried `"'100px'"`, nope and `"100 + 'px'"` nope – Pawel Cioch Feb 17 '23 at 21:54
JS is tricky had to return without double quote like `return '100px'` or `return '90%'` – Pawel Cioch Feb 17 '23 at 21:59

11mb · Answer 4 · 2017-12-13T14:12:11.423

12

You can also use hostbinding:

import { HostBinding } from '@angular/core';

export class HomeComponent {
    @HostBinding('style.width') width: Number;
    @HostBinding('style.height') height: Number;
}

Now when you change the width or height property from within the HomeComponent, this should affect the style attributes.

edited Dec 13 '17 at 14:12

answered Nov 25 '16 at 15:46

11mb

1,339
2
16
33

Would you explaining how to use those width and height vars ? and what is the diff b/w normal width: number and @HostBinding ? – Adeel Shekhani Jan 02 '22 at 18:52

score 11 · Answer 5 · answered Nov 01 '18 at 05:54

11

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>

answered Nov 01 '18 at 05:54

Govind Samrow

9,981
13
53
90

score 8 · Answer 6 · answered Apr 13 '18 at 07:58

8

The accepted answer is not incorrect.

For grouped styles one can also use the ngStyle directive.

<some-element [ngStyle]="{'font-style': styleExpression, 'font-weight': 12}">...</some-element>

The official docs are here

answered Apr 13 '18 at 07:58

JoshuaTree

1,211
14
19

score 7 · Answer 7 · answered Mar 09 '16 at 05:23

Check working Demo here

import {Component,bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from 'angular2/form';

import {Directive, ElementRef, Renderer, Input,ViewChild,AfterViewInit} from 'angular2/core';

@Component({
  selector: 'my-app',
    template: `
    <style>
       .myStyle{
        width:200px;
        height:100px;
        border:1px solid;
        margin-top:20px;
        background:gray;
        text-align:center;
       }
    </style>

          <div [class.myStyle]="my" [style.background-color]="randomColor" [style.width]="width+'px'" [style.height]="height+'px'"> my width={{width}} & height={{height}}</div>
    `,
    directives: []
})

export class AppComponent {
  my:boolean=true;
  width:number=200px;
  height:number=100px;
  randomColor;
  randomNumber;
  intervalId;
  textArray = [
    'blue',
    'green',
    'yellow',
    'orange',
    'pink'
  ];


  constructor() 
  {
    this.start();
  }

      start()
      { 
        this.randomNumber = Math.floor(Math.random()*this.textArray.length);
        this.randomColor=this.textArray[this.randomNumber];
        console.log('start' + this.randomNumber);
        this.intervalId = setInterval(()=>{
         this.width=this.width+20;
         this.height=this.height+10;
         console.log(this.width +" "+ this.height)
         if(this.width==300)
         {
           this.stop();
         }

        }, 1000);
      }
      stop()
      {
        console.log('stop');
        clearInterval(this.intervalId);
        this.width=200;
        this.height=100;
        this.start();

      }
 }

bootstrap(AppComponent, []);

score 7 · Answer 8 · answered Mar 09 '16 at 06:11

You can dynamically change the style(width and height) of div by attaching dynamic value to inline [style.width] and [style.hiegh] property of div.

In your case you can bind width and height property of HomeComponent class with the div's inline style width and height property like this... As directed by Sasxa

<div class="home-component" 
     [style.width]="width + 'px'" 
     [style.height]="height + 'px'">Some stuff in this div
</div>

For the working demo take a look at this plunker(http://plnkr.co/edit/cUbbo2?p=preview)

   //our root app component
import {Component} from 'angular2/core';
import {FORM_DIRECTIVES,FormBuilder,AbstractControl,ControlGroup,} from "angular2/common";

@Component({
  selector: 'home',
  providers: [],
  template: `
     <div class="home-component" [style.width]="width+'px'" [style.height]="height+'px'">Some this div</div>
     <br/>
     <form [ngFormModel]="testForm">
        width:<input type="number" [ngFormControl]="txtWidth"/> <br>
        Height:<input type="number"[ngFormControl]="txtHeight" />
     </form>
  `,
  styles:[`

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

  `],
  directives: [FORM_DIRECTIVES]
})
export class App {
  testForm:ControlGroup;
  public width: Number;
  public height: Number;
  public txtWidth:AbstractControl;
  public txtHeight:AbstractControl;

  constructor(private _fb:FormBuilder) {
      this.testForm=_fb.group({
        'txtWidth':['50'],
        'txtHeight':['50']
      });

      this.txtWidth=this.testForm.controls['txtWidth'];
      this.txtHeight=this.testForm.controls['txtHeight'];

      this.txtWidth.valueChanges.subscribe(val=>this.width=val);
      this.txtHeight.valueChanges.subscribe(val=>this.height =val);
  }
}

score 6 · Answer 9 · answered Feb 23 '17 at 11:05

6

All the above answers are great. But if you were trying to find a solution that won't change the html files below is helpful

 ngAfterViewChecked(){
    this.renderer.setElementStyle(targetItem.nativeElement, 'height', textHeight+"px");
}

You can import renderer from import {Renderer} from '@angular/core';

answered Feb 23 '17 at 11:05

WenhaoWu

115
1
2
10

2

Since this answer was posted, Renderer was deprecated. Use Renderer2 instead, and replace setElementStyle() by setStyle() – Chris Feb 11 '19 at 00:37
Nice! Its my choice – Leandro Roura Sixto Jul 07 '21 at 09:41

score 6 · Answer 10 · edited Oct 15 '18 at 15:16

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

score 6 · Answer 11 · answered Feb 10 '20 at 05:35

6

you can achive this by calling a function also

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

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

answered Feb 10 '20 at 05:35

Shelly

301
5
18

score 3 · Answer 12 · answered Jul 23 '20 at 12:48

3

In Html:

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

In Ts

this.maxHeightForScrollContainer = 200 //your custom maxheight

answered Jul 23 '20 at 12:48

Bharat chaudhari

484
5
7

score 1 · Answer 13 · answered May 23 '22 at 13:10

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

Dynamically updating css in Angular 2

13 Answers13

Linked