angular: directivas de atributos

• cambio de estilo de elementos HTML usando atributos de los componentes
• scope de actuación del CSS → propio del componente, no efecta a otros
• añadir/quitar clases CSS según nuestro internés
• directivas personalizadas

• ng c[reate] c[omponent] components/<component> -it -is --spec=false

  • directorio components podría variar a nuestra conveniencia
  • -it: ?
  • -is: ?
  • –spec=false: no crear ficheros de pruebas unitarias

...
template: `<p [ngStyle]="{'font-size': tam + 'px'}">Probando ngStyle...</p>`,
...
export class NgStyleComponent implements OnInit {
    tam: number =15;
}

template: `<p [style.fontSize]="'28px'">Probando ngStyle...</p>`

template: `<p [style.fontSize.px]="tam">Probando ngStyle...</p>`

• para evitar colisiones de estilos, angular se encarga de añadir atributos para que cada componente tenga sus propios estilos
• si queremos estilos a nivel global, deberemos tocar style.css

• más usada y más flexibilidad que ngStyle
• sintaxis:

  • <div [ngClass] ="'first second'">...</div>

  • <div [ngClass] ="['first', 'second']">...</div>

  • <div [ngClass] ="{'first': true, 'second': true}">...</div>

  • <div [ngClass] ="stringExp | arrayExp | objExp">...</div>

  • <div [ngClass] ="{'class1 class2 class3':true}">...</div>