Discussion on: Criando um modal com conteúdo dinâmico - Angular

Obrigado por este conteúdo, foi muito legal seguir. Testei usando Angular 12 e funcionou perfeitamente seguindo seus passos.

O ponto negativo é que tive que adicionar uma biblioteca extra usando o comando abaixo.

ng add @angular/cdk

Isto por causa do tipo ComponentType que está em @angular/cdk/overlay.

É possível substituir o ComponentType pelo Type que está em @angular/core.

Então, eu fiz as seguintes substituições:

// Troquei isto:
openModal(entry: ViewContainerRef, modalTitle: string, modalBody: ComponentType<{}>) {

// Por isto:
openModal(entry: ViewContainerRef, modalTitle: string, modalBody: Type<unknown>) {

// E isto:
@Input() body!: ComponentType<{}>;

// Por isto:
@Input() body!: Type<unknown>;

A vantagem de fazer estas substituições, além de não precisar depender do @angular/cdk que é uma biblioteca separada, é que o tipo fica certinho com o que é esperado pelo método resolveComponentFactory. Assim a gente não precisa mais fazer o cast para any. Ou seja:

// Isto:
const factory = this.resolverFactory.resolveComponentFactory(this.body as any);

// Vira isto (sem cast):
const factory = this.resolverFactory.resolveComponentFactory(this.body);

Outra mudança que eu fiz foi trocar <div #modal></div> por <ng-container #modal></ng-container>. Eu achei melhor fazer assim porque como a div só serve meio que para marcar o local que a modal será adicionada, é desnecessário que ela apareça e esteja presente no template e como o ng-container é um element invisivel, fez mais sentido para mim usá-lo.