logongas

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 11. Angular: Atributos de componentes ======
Hemos visto como crear un componente que genera todo el HTML:

<sxh html>
<boton funcion="peligrosa" (onClick)="alerta()"  >Hola mundo</boton>
</sxh>

Sin embargo este componente tiene dos problemas. 
  * No podemos elegir si genera un ''<nowiki><a></nowiki>'' o ''<nowiki><button></nowiki>''
  * No es tan personalizable porque no podemos cambiar nada si no es modificando el propio componente botón.


Para mejorar eso, podríamos modificar el componente botón y hacer que solo fuera un atributo de la siguiente forma:

<sxh html>
<a boton funcion="peligrosa" (click)="alerta()"  >Hola mundo</a>
</sxh>

¿Qué hemos ganado ahora? Pues que tenemos ahora toda la potencia del tag ''<nowiki><a></nowiki>''. Y podemos hacer cosas como las siguientes sin modificar el componente ''<nowiki><boton></nowiki>'':

<sxh html>
<a boton funcion="peligrosa" routerLink="/login" style="padding:8px" class="destacado">Hola mundo</a>
</sxh>

Es decir podemos añadir todos los atributos que habría en un ''<nowiki><a></nowiki>'' sin perder la funcionalidad de un ''<nowiki><boton></nowiki>''.



Empecemos desde el principio del fichero ''boton.ts'':

<sxh ts;title:boton.ts; highlight: [4, 5,7]>
import {Component,  Input, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'button[boton], a[boton]',
  template: '<ng-content></ng-content>',
  styleUrl: './boton.scss',
  encapsulation: ViewEncapsulation.None
})
export class Boton   {
  @Input() funcion:'normal' | 'alternativa' | 'peligrosa'='normal';


}
</sxh>

  * El valor del ''selector'' ahora es ''button[boton], a[boton]''. Y es para decir que se aplica este componente cuando un tag ''<nowiki><a></nowiki>'' o un ''<nowiki><button></nowiki>'' tiene el atributo ''boton''.
  * Ya no usamos ''templateUrl'' sino ''template'' que es para indicar directamente la plantilla en vez referenciar un fichero. Y lo hacemos porque ahora la plantilla es solo ''<nowiki>'<ng-content></ng-content></nowiki>'' y no necesitamos un fichero solo para eso.
  * Por último decimos en ''encapsulation'' que ahora los estilos ya no son privados a nuestro componente sino que son "públicos". Eso genera un problema que se explica en [[#viewencapsulation|ViewEncapsulation]].

===== Etiqueta Host =====
¿Que queremos que haga realmente nuestro componente? Pues simplemente es establecer el valor del atributo ''class'', pero en el tag que ha escrito el usuario . 
Es decir, el que está "fuera" en la página HTML. A ese tag se le llama **Host**.

Veamos unos ejemplos de qué es **Host**


  * **Host** hace referencia a la etiqueta ''<nowiki><a></nowiki>''
<sxh html>
<a boton funcion="peligrosa" routerLink="/login" style="padding:8px" class="destacado">Hola mundo</a>
</sxh>

  * **Host** hace referencia a la etiqueta ''<nowiki><button></nowiki>''
<sxh html>
<button boton funcion="peligrosa" >Hola mundo</button>
</sxh>



===== @HostBinding =====
Pues lo que queremos es que nuestro componente modifique el atributo ''class'' de nuestro **host**. Pues para ello usamos el decorador de Angular [[https://angular.dev/api/core/HostBinding|@HostBinding(hostPropertyName?: string)]]

<sxh ts;title:boton.ts; highlight: [12-15]>
import {Component,  Input, ViewEncapsulation, HostBinding} from '@angular/core';

@Component({
  selector: 'button[boton], a[boton]',
  template: '<ng-content></ng-content>',
  styleUrl: './boton.scss',
  encapsulation: ViewEncapsulation.None
})
export class Boton  {
  @Input() funcion:'normal' | 'alternativa' | 'peligrosa'='normal';

  @HostBinding('class')
  get clazz(): string {
    return `boton funcion--${this.funcion}`;
  }

}
</sxh>

El decorador ''@HostBinding('class')'' hace que el valor de la propiedad ''class'' siempre sea el valor que tiene la propiedad ''clazz''

<note tip>  
Recuerda que ''clazz'' es una propiedad solo que calculada a través de la función ''clazz()''
<sxh ts>
get clazz(): string {
  return `boton funcion--${this.funcion}`;
}
</sxh>
</note>


El problema aquí es que no podríamos tener valores en ''class'' en el **Host** ya que la propiedad ''clazz'' elimina lo que hay y pone los datos de únicamente nuestras clases.

Es decir que el siguiente ejemplo no funcionaría, ya que eliminaría ''destacado'':

<sxh html>
<a boton  class="destacado">Hola mundo</a>
</sxh>

Aunque sí que funcionaría el siguiente ya que nuestro componente no modifica ni el atributo ''routerLink'' ni ''style'':

<sxh html>
<a boton  routerLink="/login" style="padding:8px">Hola mundo</a>
</sxh>

Así que ¿cómo lo arreglamos? Pues retornando un objeto con las clases que vamos a añadir en vez de un ''string'' y de esa forma no se modifica lo que ya hay.

<sxh ts; title:boton.ts;highlight: [13-22]>
import {Component, Input, ViewEncapsulation, HostBinding} from '@angular/core';

@Component({
  selector: 'button[boton], a[boton]',
  template: '<ng-content></ng-content>',
  styleUrl: './boton.scss',
  encapsulation: ViewEncapsulation.None
})
export class Boton   {
  @Input() funcion:'normal' | 'alternativa' | 'peligrosa'='normal';


  @HostBinding('class')
  get clazz(): Record<string, boolean> {
    return {
      'boton': true,

      'funcion--normal': this.funcion === 'normal',
      'funcion--alternativa': this.funcion === 'alternativa',
      'funcion--peligrosa': this.funcion === 'peligrosa',
    };
  }

}
</sxh>

Ahora retornamos un objeto con las clases CSS que podrían haber y son un booleano indicando si está finalmente o no, dejando sin tocar el resto de clases.

<note tip>  
Fíjate en que el tipo de datos de la propiedad ''clazz'' es ''Record<string, boolean>'' que es simplemente como decir que retorna ''{ [key: string]: boolean }''.
Que significa que es un objeto cuyas claves son un ''string'' y cuyos valores son un ''boolean''.


La definición de ''Record'' es exactamente la siguiente:
<sxh ts>
type Record<K extends keyof any, T> = {
    [P in K]: T;
};
</sxh>

Mas información:
  * [[https://blog.logrocket.com/typescript-record-types/|Level up your TypeScript with Record types]]

</note>

===== ViewEncapsulation =====
Nos falta por explicar el valor de ''encapsulation'' que depende del enumerado [[https://angular.dev/api/core/ViewEncapsulation|ViewEncapsulation]]

<sxh ts; title:boton.ts;highlight: [7]>
import {Component, Input, ViewEncapsulation, HostBinding} from '@angular/core';

@Component({
  selector: 'button[boton], a[boton]',
  template: '<ng-content></ng-content>',
  styleUrl: './boton.scss',
  encapsulation: ViewEncapsulation.None
})
export class Boton   {
  @Input() funcion:'normal' | 'alternativa' | 'peligrosa'='normal';

  @HostBinding('class')
  get clazz(): Record<string, boolean> {
    return {
      'boton': true,

      'funcion--normal': this.funcion === 'normal',
      'funcion--alternativa': this.funcion === 'alternativa',
      'funcion--peligrosa': this.funcion === 'peligrosa',

    };
  }

}
</sxh>

El enumerado [[https://angular.dev/api/core/ViewEncapsulation|ViewEncapsulation]] indica la visibilidad de los estilos CSS de un componente.
  * ''ViewEncapsulation.None'' : Los estilos CSS del componente son visibles desde cualquier otra parte de la aplicación es como hacer **los estilos CSS como públicos**.
  * ''ViewEncapsulation.ShadowDom'' : Los estilos CSS del componente solo se pueden ver en las etiquetas del propio ''template'' del componente es como hacer **los estilos CSS como privados**. Para implementarlo se usa el API de Shadow DOM del navegador.
  * ''ViewEncapsulation.Emulated'' : Los estilos CSS del componente solo se pueden ver en las etiquetas del propio ''template'' del componente es como hacer **los estilos CSS como privados**. Para implementarlo se ocupa Angular sin el soporte del navegador. Este es el valor por defecto.

Existe ''ViewEncapsulation.Emulated'' además de ''ViewEncapsulation.ShadowDom'' ya que el soporte del API de Shadow DOM en el navegador ha sido muy malo durante mucho tiempo.

¿Por qué es importante ahora esta propiedad y por qué la hemos cambiado a ''ViewEncapsulation.None''?

Resulta que si ponemos el valor por defecto de ''ViewEncapsulation.Emulated'' o su alternativa ''ViewEncapsulation.ShadowDom'' los estilos solo se pueden usar en los tag que hay dentro de ''template''.
Sin embargo , con el cambio que hemos hecho , los estilos CSS se van a usar ahora fuera de los tags de ''template'' porque los vamos a usar en **Host**, 
así que es necesario hacer los estilos CSS públicos, no //encapsularlos// y por lo tanto usar ''ViewEncapsulation.None''

Vale, pero ahora tenemos un problema. Tenemos las clases CSS ''funcion--normal'' tanto en ''<nowiki><boton></nowiki>'' como en ''<nowiki><panel></nowiki>''. Y son distintos. 
Por lo tanto debemos cambiar los estilos de los componentes para que no //choquen// entre los distintos componentes. 

Para evitar que choquen los nombres de los estilos CSS entre los distintos componentes se usan las nomenclaturas de:
  * [[https://getbem.com/|BEM]]
  * [[https://suitcss.github.io/|SUIT CSS]]

En el tema [[clase:daw:diw:sistema-diseno-bem|Sistema de diseño: BEM]] se explica BEM.

Pero los estilos ahora quedan de la siguiente forma:

<sxh css;title:boton.scss>
.boton {
  font-family: sans-serif;
  font-size: 16px;
  padding: 6px;
 
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
 
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
 
 
  border-color: #0056b8;
  background-color: #0056b8;
  color: #ffffff;
}
 
.boton--funcion-normal {
  border-color: #0056b8;
  background-color: #0056b8;
  color: #ffffff;
}
 
.boton--funcion-alternativa {
  border-color: #ed8936;
  background-color: #ed8936;
  color: #ffffff;
}
 
.boton--funcion-peligrosa {
  border-color: #c53030;
  background-color: #c53030;
  color: #ffffff;
}
</sxh>

Y el código queda finalmente así:

<sxh ts;title:boton.ts; highlight: [17-19]>
import {Component, Input, ViewEncapsulation, HostBinding} from '@angular/core';

@Component({
  selector: 'button[boton], a[boton]',
  template: '<ng-content></ng-content>',
  styleUrl: './boton.scss',
  encapsulation: ViewEncapsulation.None
})
export class Boton   {
  @Input() funcion:'normal' | 'alternativa' | 'peligrosa'='normal';

  @HostBinding('class')
  get clazz(): Record<string, boolean> {
    return {
      'boton': true,

      'boton--funcion-normal': this.funcion === 'normal',
      'boton--funcion-alternativa': this.funcion === 'alternativa',
      'boton--funcion-peligrosa': this.funcion === 'peligrosa',

    };
  }

}
</sxh>