angular: directivas de atributos [miguel angel torres egea]

Aquesta pàgina és només de lectura. Podeu veure'n el codi font, però no podeu canviar-la. Consulteu el vostre administrador si penseu que això és degut a algun error.

= angular: directivas de atributos
== ngStyle
  * 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
  * <code bash>ng c[reate] c[omponent] components/<component> -it -is --spec=false</code>
    * directorio **components** podría variar a nuestra conveniencia
    * ''-it'': ?
    * ''-is'': ?
    * ''--spec=false'': no crear ficheros de pruebas unitarias

<sxh typescript; title: prueba ngStyle>
...
template: `<p [ngStyle]="{'font-size': tam + 'px'}">Probando ngStyle...</p>`,
...
export class NgStyleComponent implements OnInit {
    tam: number =15;
}</sxh>
<sxh typescript; title: otra forma de ngStyle>
template: `<p [style.fontSize]="'28px'">Probando ngStyle...</p>`
</sxh>
<sxh typescript; title: otra forma más de ngStyle>
template: `<p [style.fontSize.px]="tam">Probando ngStyle...</p>`
</sxh>

== ámbito CSS
  * 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**

== ngClass
  * más usada y más flexibilidad que **ngStyle**
  * sintaxis:
    * <sxh typescript; title: ngClass><div [ngClass] ="'first second'">...</div></sxh>
    * <sxh typescript; title: ngClass><div [ngClass] ="['first', 'second']">...</div></sxh>
    * <sxh typescript; title: ngClass><div [ngClass] ="{'first': true, 'second': true}">...</div></sxh>
    * <sxh typescript; title: ngClass><div [ngClass] ="stringExp | arrayExp | objExp">...</div></sxh>
    * <sxh typescript; title: ngClass><div [ngClass] ="{'class1 class2 class3':true}">...</div></sxh>