Angular 16 load a standalone component as a dialog without routing or preloading

Question

I have been googling this an there are many versions, most are old. I have an angular 16 project which was not made with standalone components but I've created this 1 standalone component which I want to load as a dialog.

My question is, in angular 16, how do I go about loading a standalone component without the use of routing or preloading it?

Can it be done?

Any guidance would be appreciated as there's just too many versions on the internet.

Answer 1

you can load components lazily with standard es imports

async loadLazyComp() { 
  const component = import('./path/to/component').then(r => r.MyComponent)
}

But rendering them as a modal is another piece of work.

For example you could use angular material dialog and it could look like this:

openLazyDialog() {
  import('./path/to/component').then(result => this.matDialog.open(result.MyComponent));
}