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

Front-end
#1

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!

#2

Se entendi certo, vc vai precisar configurar as rotas no seu projeto, onde cada roda irá apontar para um componente.