Mise à jour dynamique du CSS dans Angular 2

Disons que j'ai un composant Angular2

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

Le fichier HTML modèle pour ce composant

//home.component.html

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

Et enfin le fichier css de ce composant

//home.component.css

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

Comme vous pouvez le voir, il y a 2 propriétés dans la classe, widthet height. Je voudrais que les styles css pour la largeur et la hauteur correspondent aux valeurs des propriétés de largeur et de hauteur et lorsque les propriétés sont mises à jour, la largeur et la hauteur de la mise à jour div. Quelle est la bonne façon d'accomplir cela?

Essaye ça

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

[Mis à jour]: Pour définir en% d'utilisation

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

Pour utiliser% au lieu de px ou em avec la réponse de @ Gaurav, c'est juste

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

Cela devrait le faire:

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

Vous pouvez également utiliser la liaison d'hôte:

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

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

Désormais, lorsque vous modifiez la propriété width ou height à partir de HomeComponent, cela devrait affecter les attributs de style.

La réponse acceptée n'est pas incorrecte.

Pour les styles groupés, on peut également utiliser la directive ngStyle.

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

Les documents officiels sont ici

Vérifiez la démo de travail ici

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, []);

Si vous souhaitez définir la largeur dynamiquement avec une variable, utilisez plutôt [] accolades {{}}:

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

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

Vous pouvez modifier dynamiquement le style (largeur et hauteur) de div en attachant une valeur dynamique à la propriété inline [style.width] et [style.hiegh] de div.

Dans votre cas, vous pouvez lier la propriété width et height de la classe HomeComponent avec la propriété width et height de style en ligne de div comme ceci ... Comme indiqué par Sasxa

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

Pour la démonstration de travail, jetez un œil à ce 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);
  }
}

J'ai aimé l'apparence de l' idée de WenhaoWuI ci-dessus, mais j'avais besoin d'identifier le div avec la classe .ui-tree dans le composant d'arbre PrimeNG pour définir la hauteur de manière dynamique. Toutes les réponsesje pouvais trouver le nécessaire div être nommé (c.#treediv) pour permettre l'utilisation de@ViewChild(),@ViewChildren(),@ContentChild(),@ContentChilden()etc. C'étaitdésordre avec un composant tiers.

J'ai finalement trouvé un extrait de Günter Zöchbauer :

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

Cela a facilité les choses:

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

Toutes les réponses ci-dessus sont excellentes. Mais si vous essayez de trouver une solution qui ne changera pas les fichiers html ci-dessous est utile

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

Vous pouvez importer un moteur de rendu depuis import {Renderer} from '@angular/core';

vous pouvez y parvenir en appelant également une fonction

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

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

En Html:

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

Dans Ts

this.maxHeightForScrollContainer = 200 //your custom maxheight