javascript - Definiendo un componente de tarjeta personalizado con contenido interno

Estoy definiendo un componente card personalizado con Angular 6.

Tengo los siguientes archivos:

card.component.html

<mat-card>
    <mat-card-content>
        <ng-content></ng-content>
    </mat-card-content>
    <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
    </mat-card-actions>
</mat-card>

card.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-card',
    templateUrl: 'card.component.html',
    styleUrls: [ 'card.component.css' ],
})
export class CardComponent implements OnInit {

    private content: string;

    ngOnInit() {
        // I need to replace each 'a' by an 'e' to the innerHtml
        this.content = ??? what to put here ???;
    }
}

Quiero usar mi componente personalizado card de la siguiente manera:

app.component.html

<app-card>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</app-card>

Mi problema es que no sé qué poner en el archivo: card.component.ts para leer el contenido interno de mi componente personalizado en: app.component.html.

¿Alguna idea de cómo hacer que esto funcione?

¡Gracias!

Respuesta #1

Tuve un caso similar con el modal,

Por ejemplo childComponenet.html

<div> 
 <span>
     <ng-content></ng-content> -- your html will replace here
 </span>
</div>

ParentComponent.html

    <abc>
       <new html here>
    </abc>

Para más detalles, puede seguir la guía https://blog.angular-university.io/angular-ng-content/