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

Issue

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.

Solution

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));
}

Answered By - Andrei