I'm currently working on creating a json-based dynamic template using Angular 6.
There are certain scenarios where I need to fetch external html content (which could be stored in a database) along with its corresponding css (also stored separately in the database as text) to use in a router-outlet component in my application.
For example, I have a home.html and home.ts file that need to be linked through routing. Instead of having the html code directly in the home.html file, I want to pull it from the database and display it. Additionally, I want to retrieve the css code from the database without embedding it directly in the html.
Furthermore, I require the JavaScript functions for the dynamic html content (such as a delete link or cancel link) to be stored in a separate file, similar to TypeScript. Is it possible to load TypeScript files dynamically as well?
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' }
]
One possible approach I am considering is outlined in the following link: How do I load an HTML page in a <div> using JavaScript?
However, I am exploring if there are better practices or approaches specifically tailored for Angular 6 that could be used in this scenario.