Mettre à jour dynamicment 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 du modèle pour ce composant

 //home.component.html 
Some stuff in this div

Et enfin le fichier css pour 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, la width et la height . Je voudrais que les styles CSS pour width et height correspondent aux valeurs des propriétés width et height 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’y parvenir?

Essaye ça

  
Some stuff in this div

[Mise à jour]: Pour définir dans% utilisation

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

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

 
Some stuff in this div

Cela devrait le faire:

 
Some stuff in this div

Vous pouvez également utiliser la liaison hôte:

 import { HostBinding } from '@angular/core'; export class HomeComponent { @HostBinding('style.width') width: Number; @HostBinding('style.height') height: Number; } 

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

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: `  
my width={{width}} & height={{height}}
`, 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, []);

Vous pouvez modifier dynamicment le style (largeur et hauteur) de div en attachant une valeur dynamic à 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 du div comme ceci … Comme indiqué par Sasxa

 
Some stuff in this div

Pour la démo 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: ` 
Some this div

width:
Height:
`, 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); } }

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 le rendu de l’ import {Renderer} from '@angular/core';

J’ai aimé l’aspect de l’ idée de WenhaoWuI ci-dessus, mais j’avais besoin d’identifier la div avec la classe “.ui-tree” dans le composant d’arbre PrimeNG pour définir la hauteur de manière dynamic. Toutes les réponses que j’ai pu trouver nécessitaient que la div soit nommée (c’est-à-dire #treediv) pour permettre l’utilisation de @ViewChild (), @ViewChildren (), @ContentChild (), @ContentChilden (), etc. composant.

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

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

Cela a facilité la tâche:

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

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

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

 ... 

Les documents officiels sont ici