¿Sabes qué es el elemento host del componente? Sí, supongo que sí, pero… ¿qué es eso de hacerlo invisible? Bueno pues nos referimos a que ese elemento host (o caja contenedora) no exista o se ignore si usas alguna técnica de layout como CSS grid, flex o flow layout de manera que los hijos de ese elemento host se comporten como si fueran nodos adyacentes (al mismo nivel que el elemento host).

¿Cómo se hace?

La respuesta es tan simple como que a ese elemento host (anfitrión) se le asigne la propiedad CSS «display: contents» (puedes ver en qué navegadores es compatible en la web de caniuse).

Aplicándolo al componente Angular

Hay varias maneras de aplicar un estilo al elemento host del componente que te vamos a mostrar:

En el archivo de estilos asociado al componente

Añade al archivo de estilos (*.component.(css|scss) las siguientes líneas:

:host {
    display: contents;
}

El selector «:host» nos permite referirnos al elemento host y por tanto aplicará a dicho elemento, en este caso el «display: contents». Puedes añadir más estilos si lo deseas: colores, bordes, tamaños, … Solamente un inciso: aquí has de tener en cuenta el tipo de «encapsulation» del componente que vayas a usar para estilar el componente, es decir, solo funcionará si es «ViewEncapsulation.Emulated» (que es el por defecto) y el «ViewEncapsulation.ShadowDom«, si asignas el «ViewEncapsulation.None» no funcionará.

Binding al elemento host

Tenemos aquí un par opciones:

Aplicar el estilo directamente

@Component({
  ...,
  host: {
    'style': 'display: contents'
  }
})
export class TextButtonComponent {
  /* ... */
}

Aunque funciona para todos los tipos de «encapsulation» no es la más recomentable a nivel de diseño, puesto que está muy acoplado a a dicho estilo. Mejor usar una clase CSS como veremos a continuación con la que podremos ampliar con más características.

Aplicar una clase CSS

El procedimiento es el mismo que el anterior pero con una clase CSS:

@Component({
  ...,
  host: {
    'class': 'af_button--host'
  }
})
export class TextButtonComponent {
  /* ... */
}

La clase puede estar en alguna librería de estilos o tema:

.af_button--host {
  display: contents;
}

Llevar el estilo a una clase CSS nos ofrece muchas más ventajas.

¿Alguna otra forma más?

En un próximo artículo hablaremos sobre el «Directive composition API» de Angular para ver otra forma de aplicarlo.