3. Creación de componentes: Atributos

Hemos visto como crear un componente que genera todo el HTML:

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

Sin embargo este componente tiene dos problemas.

• No podemos elegir si genera un <a> o <button>
• No es tan personlizable porque no podemos cambiar nada sino 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:

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

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

<a boton funcion="peligrosa" routerLink="/login" style="padding:var(-mlt-sys-padding-2)" class="g--background-color-verde-5">Hola mundo</a>

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

Empecemos desde el principio del :

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';


}

• El valor del selector ahora es button[boton], a[boton]. Y es para decir que se aplica este componente cuando un tag <a> o un <boton> tiene el atributo boton.
• Ya no usamos templateUrl sino template que es paraa indicar directamente la plantilla en vez referenciar un fichero. Y lo hacemos porque ahora la plantilla es solo '<ng-content></ng-content> 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 nos genera un problema porque tenemos las clases CSS funcion–normal tanto en <boton> como en <panel>. Y son distintos

¿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 que el el que está "fuera" en la página HTML. A ese tag se le llama Host.

Veamos unos ejemplo de que es Host

• Host hace referencia a la etiqueta <a>

<a boton funcion="peligrosa" routerLink="/login" style="padding:var(-mlt-sys-padding-2)" class="g--background-color-verde-5">Hola mundo</a>

• Host hace referencia a la etiqueta <button>

<button boton funcion="peligrosa" >Hola mundo</button>

Pues lo que queremos es que nuestro componente modifique el atributo class de nuestro host. Pues para ello usamos el decorador de Angular @HostBinding(hostPropertyName?: string)

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 implements OnChanges  {
  @Input() funcion:'normal' | 'alternativa' | 'peligrosa'='normal';

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

}

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

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

El problema aquí el 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 g–bg-color-verde-5:

<a boton  class="g--background-color-verde-5">Hola mundo</a>

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

<a boton  routerLink="/login" style="padding:var(--mlt-sys-padding-2)">Hola mundo</a>

Así que ¿como 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.

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',
    };
  }

}

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.

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

Nos falta por explicar el valor de encapsulation que depende del enumerado ViewEncapsulation

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';
  @Input() importancia : 'primaria' | 'secundaria' | 'terciaria'="primaria";

  @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',

    };
  }

}

El enumerado 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.

¿Porque es importante ahora esta propiedad y porque 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 <boton> como en <panel>. 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:

• BEM
• SUIT CSS

Más adelante en el curso se explicará en que consisten estas nomenclaturas.

Pero los estilos ahora quedan de la siguiente forma:

.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;
}

Y el código queda finalmente así:

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',

    };
  }

}