Estoy tratando de crear una plantilla de impresión dinámica en Angular 12. Me gustaría completar el texto del cuerpo html dinámicamente según el parámetro pasado en el selector utilizado en la vista del componente principal. El componente de diseño de impresión está en el módulo compartido y ambas plantillas html están en la carpeta de la aplicación.

Mis requisitos son:

1. Quiero leer el archivo html en el componente de diseño de impresión y mostrarlo. No quiero crear un componente y renderizar el componente en el diseño de impresión.

2. No quiero guardar el archivo html en el backend y activar la API para obtener el html

print-layout.component.html

 <div [innerHtml]="myTemplate"></div>

print-layout.component.ts

 @Component({ selector: 'app-print-layout', templateUrl: './print-layout.component.html', styleUrls: ['./print-layout.component.scss'] }) export class PrintLayoutComponent implements OnInit{ @Input() modalID; myTemplate; ngOnInit() { if(modalID == "1") template = '../../app/tools/test/test-message1.html'; else (modalID == "2") template = '../../app/tools/test/test-message2.html'; } }

Además, he pasado por esta solución ¿Leer el archivo HTML en la plantilla en Angular 2? donde están creando componentes dinámicamente desde el archivo del componente principal.

¿Hay alguna forma de mostrar el archivo de plantilla html en el componente principal sin crear un componente? Además, sugiera que es la forma correcta de mostrar contenido html sin crear un componente en Angular ...?