Uso de la etiqueta 'ng-content' en Angular

La etiqueta 'ng-content' en Angular se utiliza para la proyección de contenido en componentes. Esto significa que permite insertar contenido HTML definido fuera del componente en el template del componente.

La proyección de contenido es una forma de reutilización de código en Angular, ya que permite construir componentes de forma más flexible y con una alta reusabilidad.

Ejemplo práctico de 'ng-content'

Supongamos que tenemos un componente de diálogo (DialogComponent) que queremos reutilizar en varias partes de nuestra aplicación. Sin embargo, el contenido específico del diálogo será diferente en cada caso. Aquí es donde 'ng-content' resulta útil.

Dentro del template de DialogComponent, podríamos tener algo como esto:

<div class='dialog'>
  <ng-content></ng-content> 
</div>

Ahora, cada vez que usemos DialogComponent en otro componente, podríamos insertar contenido diferente, así:

<app-dialog>
  <p>Este es un diálogo específico de este componente.</p>
</app-dialog>

El párrafo definido en el componente externo se proyectará en el lugar donde se encuentra 'ng-content' dentro de DialogComponent. Esto nos da la flexibilidad de reutilizar DialogComponent con diferentes contenidos.

Mejores prácticas

Aunque 'ng-content' ofrece mucha flexibilidad, es importante usarlo con cuidado para mantener nuestro código manejable y evitar problemas. Un uso excesivo de 'ng-content' puede hacer que nuestro código sea confuso y difícil de mantener. Además, 'ng-content' no puede ser objetivo de consultas de contenido (@ContentChild, @ContentChildren), lo que puede limitar su utilidad en algunos casos. Por lo tanto, es aconsejable usar 'ng-content' solo cuando sea necesario y siempre en combinación con un diseño de componente adecuado.