css - ngstyle - ng-content angular 6

Actualización dinámica de CSS en Angular 2

Question

Digamos que tengo un componente 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;
} 

El archivo html de plantilla para este componente

//home.component.html

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

Y finalmente el archivo CSS para este componente

//home.component.css

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

Como puede ver, hay 2 propiedades en la clase, width y height . Me gustaría que los estilos CSS para ancho y alto coincidan con los valores de las propiedades ancho y alto y cuando las propiedades se actualizan, el ancho y alto de la actualización div. ¿Cuál es la forma correcta de lograr esto?

Answer 1

Esto debería hacerlo:

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

Answer 2

La respuesta aceptada no es incorrecta.

Para los estilos agrupados también se puede usar la directiva ngStyle.

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

Los documentos oficiales están here

Answer 3

Me gustó el aspecto de la idea anterior de WenhaoWui , pero necesitaba identificar el div con la clase .ui-tree en el componente de árbol PrimeNG para establecer la altura dinámicamente. Todas las respuestas que pude encontrar requerían que se nombrara el div (es decir, #treediv) para permitir el uso de @ViewChild() , @ViewChildren() , @ContentChild() , @ContentChilden() etc. Esto fue complicado con un tercero componente.

Finalmente encontré un fragmento de Günter Zöchbauer :

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

Esto lo hizo fácil:

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

Answer 4

Para usar% en lugar de px o em con la respuesta de @ Gaurav, es solo

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

Answer 5

Prueba esto

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

[Actualizado]: para establecer en% de uso

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

Answer 6

Puede cambiar dinámicamente el estilo (ancho y alto) de div adjuntando el valor dinámico a la propiedad en línea [style.width] y [style.hiegh] de div.

En su caso, puede vincular la propiedad de ancho y alto de la clase HomeComponent con la propiedad de ancho y alto de estilo en línea del div como esta ... Como lo indica Sasxa

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

Para la demostración de trabajo, eche un vistazo a este 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);
  }
}

Answer 7

Si desea establecer el ancho dinámicamente con variable, use llaves [] en su lugar {{}}:

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

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

Answer 8

También puedes usar hostbinding:

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

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

Ahora, cuando cambie la propiedad de ancho o alto desde HomeComponent, esto debería afectar los atributos de estilo.

Answer 9

Todas las respuestas anteriores son geniales. Pero si intenta encontrar una solución que no cambie los archivos html a continuación, es útil

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

Puede importar el renderizador desde import {Renderer} from ''@angular/core'';

Answer 10

Verifique la demostración de trabajo aquí

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