Proyectar contenido en componentes con ng-content

En Angular, hay muchas formas de pasar los datos en nuestra aplicación. Pero a veces tenemos códigos HTML/TypeScripts complejos que se necesitan para pasar al componente desde el exterior. Entonces, si queremos un código simplificado y no queremos configurar los códigos HTML/TypeScripts dentro de server-component.html, entonces podemos escribir el fragmento de código entre la apertura y el elemento de cierre de la etiqueta del componente del servidor (es decir, entre ‹app-server›‹∕app-server›la etiqueta ) y debe cambiar las variables del componente en consecuencia.

Ejemplo:

serverElement : 
{type:'server', name:'some-name', content:'some-value'}

app-component.html

<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-1">
<app-server-element *ngFor=
         "let ele of serverElements" [element]="ele">
    <div class="card-text" 
        *ngIf="ele.type === 'server'" style="color: yellow;" > 
         Element name rendered is {{ele.name}} 
         Element content rendered is {{ele.content}}
    </div>
</app-server-element>
</div>
</div>
</div>

ng-content:
hay una directiva especial ( ‹ng-content›‹∕ng-content›) que se debe agregar en la plantilla server-component.html, en el lugar donde queremos representar el contenido. Sirve como un gancho que coloca en un componente, para marcar el lugar del componente donde debe agregar cualquier contenido que encuentre entre la etiqueta de apertura y cierre.
componente-servidor.html

<div class="card">
    <div class="card-body"> 
        <h5 class="card-header text-uppercase">
            <strong>{{element.type}}</strong>
        </h5>
            <ng-content></ng-content> 
    </div>
</div>

elemento del servidor:

{type:'server', name:'some-name', content:'some-value'}

app-component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
serverelements=[{type:'server', 
                name:"TestServer",
                comp:'Just a Test!'}];
onAddedServer(data: {servername: string, 
                     servercomponent: string}){
  this.serverelements.push({
    type:'server',
    name:data.servername,
    comp:data.servercomponent
  })
}

Producción:

Element name rendered is "some-name"
Element content rendered is "some-value"

Aquí, agregamos el código HTML a través de ng-content Hook, lo agregamos entre las etiquetas de apertura y cierre y, por lo tanto, se proyectará en el componente del servidor. Es una buena característica, que es especial si pensamos en construir widgets reutilizables. Pero si se trata de un código Html más complejo, entonces el enlace de propiedad no es realmente la mejor solución porque angular escapará del texto HTML allí, y luego ng-content es la gran herramienta para tener.