This is probably a dumb question with a simple answer but I didn't really know how to find the answer.

I'm using Angular with Micro Frontends and created my own UI library. Now I want to use one of my custom components the "Card - < ng-mfe-card >" and insert HTML inside the imported component. Simplified like this ->

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

Login component where I import the Card component and want to insert the HTML inside the Card component.

<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>

Card UI component imported from Library, tag the importee can use to insert HTML under < 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>

card.component.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 {
  }

}