javascript - Definindo um componente de cartão personalizado com conteúdo interno

Estou definindo um componente card personalizado com Angular 6.

Eu tenho os seguintes arquivos:

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

Eu quero usar meu componente personalizado card da seguinte maneira:

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>

Meu problema é que não sei o que colocar no arquivo: card.component.ts para ler o conteúdo interno do meu componente personalizado em: app.component.html.

Alguma ideia de como fazer isso funcionar?

Obrigado!

Resposta #1

Eu tive um caso semelhante para modal,

Por exemplo childComponenet.html

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

ParentComponent.html

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

Para mais detalhes, você pode seguir o guia https://blog.angular-university.io/angular-ng-content/