Esta es probablemente una pregunta tonta con una respuesta simple, pero realmente no sabía cómo encontrar la respuesta.

Estoy usando Angular con Micro Frontends y creé mi propia biblioteca de interfaz de usuario. Ahora quiero usar uno de mis componentes personalizados, la "Tarjeta - < ng-mfe-card >" e insertar HTML dentro del componente importado. Simplificado así ->

 <ng-mfe-card> <div class='someClass'></div> </ng-mfe-card>

Componente de inicio de sesión donde importo el componente Tarjeta y quiero insertar el HTML dentro del componente Tarjeta.

 <ng-mfe-card [title]="'Login'"> <form class="login-form" (ngSubmit)="login()"> <label> Username: <input type="text" name="username" [(ngModel)]="username" /> </label> <label> Password: <input type="password" name="password" [(ngModel)]="password" /> </label> <button type="submit">Login</button> </form> <div *ngIf="isLoggedIn$ | async">User is logged in!</div> </ng-mfe-card>

Componente de interfaz de usuario de la tarjeta importado de la biblioteca, etiqueta que el importado puede usar para insertar HTML en < div class="card-content" >

 <div class="card"> <div class="card-header"> <img class="card-header-image" src="{{ imageURL }}" width="100vw"> <h1 class="card-header-title">{{ title }}</h1> </div> <div class="card-content"> <!-- HTML from component that imports this Card component --> </div> <div *ngIf="footer != ''" class="card-footer">{{ footer }}</div> </div>

tarjeta.componente.ts

 import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'ng-mfe-card', templateUrl: './card.component.html', styleUrls: ['./card.component.css'] }) export class CardComponent implements OnInit { @Input() imageURL: string = 'https://image.url'; @Input() title: string = 'Title'; @Input() footer: string = 'Footer'; constructor() { } ngOnInit(): void { } }