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 de ancho y alto y cuando las propiedades se actualicen, el ancho y el alto del div se actualicen. ¿Cuál es la forma correcta de lograr esto?
Prueba esto
<div class="home-component" [style.width.px]="width" [style.height.px]="height">Some stuff in this div</div>[Actualizado]: Para configurar en % de uso
[style.height.%]="height">Some stuff in this div</div>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>Esto debería hacerlo:
<div class="home-component" [style.width]="width + 'px'" [style.height]="height + 'px'">Some stuff in this div</div>