Como chamar a apresentação html de um segundo componente

Olá pessoal, quero solicitar uma ajuda de como consigo chamar a apresentação html de um segundo componente no angular, conforme exemplo abaixo:

No meu arquivo Um.ts tenho o seguinte exemplo:

// Outros imports …
import { ModalService } from ‘@shared/components/common-modal/modal.service’;

@Component({

selector: ‘app-Um’,

templateUrl: ‘./um.component.html’,

styleUrls: [‘./um.component.scss’]

})

export class UmComponent {

constructor(
  private modalService: ModalService
) { }

// Outros codigos …

// Vou chamar a apresentação Html de componente dois

this.modalService.openModal(‘#htmlDoComponenteDois’);

}

E meu segundo componente:

import { Component, OnInit } from “@angular/core”;
import { ModalService } from ‘@shared/components/common-modal/modal.service’;

@Component({

selector: ‘app-dois-componente’,

templateUrl: ‘./dois.component.html’,

styleUrls: [‘dois.component.scss’]

})

export class DoisComponent implements OnInit {

htmlContent: any;

constructor(
  private modalService: ModalService
) { }

ngOnInit(): void {
}

closeModal(nomeDoModal: string) {
  this.modalService.closeModal(nomeDoModal);
}

}

No meu arquivo dois.component.html tenho uma apresentação simples :

<h1>Teste</h1>	
      <div class="modal-rodape justify-content-end">
         <button 
  		type="button" class="btn btn__modal-close" (click)="closeModal('#nomeDoModal')">
  	 </button>
      </div>

Desde já agradeço!