web-dev-qa-db-fra.com

Mise à jour dynamique de 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 de modèle pour ce composant

//home.component.html

<div class="home-component">Some stuff in this div</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 constater, la classe contient 2 propriétés, width et height. Je voudrais que les styles CSS pour la largeur et la hauteur correspondent aux valeurs des propriétés width et height et que, 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?

cssangular
86
tt9

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 le% d'utilisation

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

Pour utiliser% au lieu de px ou em avec la réponse de @ Gaurav, il suffit de

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

Cela devrait le faire:

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

Vous pouvez également utiliser hostbinding:

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.

9
11mb

Vérifiez la démo qui fonctionne 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, []);
6
micronyks

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

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

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

Pour la démonstration en cours, jetez un oeil à ce lecteur ( 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);
  }
}
5
Jorin

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

Pour les styles groupés, vous pouvez également utiliser la directive ngStyle.

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

Les documents officiels sont ici

4
JoshuaTree

Toutes les réponses ci-dessus sont super. 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 depuis import {Renderer} from '@angular/core';

4
WenhaoWu

J'ai aimé le look de l'idée de WenhaoWuI ci-dessus, mais je devais identifier le div avec la classe .ui-tree dans le composant de l’arbre PrimeNG pour définir la hauteur dynamiquement. Toutes les réponses que je pouvais trouver nécessitaient que la div soit nommée (c'est-à-dire #treediv) pour permettre l'utilisation de @ViewChild(), @ViewChildren(), @ContentChild(), @ContentChilden() etc. 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");
}
2
davaus

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

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

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