[SOLVED] Load self in modal - Angular component

Load self in modal - Angular component

I need to load component in a modal when you access it via it's URL. Need help figuring how that setup should be, I have ngxbootstrap on an angular component and can popup modals in response to e.g.a button click. Can't find anything that shows how entire component template would be loaded in modal when component URL is accessed.

Thanks

Solution

You need to have one component for the route, and in it's ngOnInit you can open a modal with the component you want in the modal.

To make it reusable, you could have a route component that opens a modal with any component passed to it in route data. I assume this would only make sense for child routes, otherwise it'd just be a modal on a blank background, so example:

const childRoutes = [
    { path: 'route1', component: ModalRouteComponent, data: { component: MyModalComponent1 }},
    { path: 'route2', component: ModalRouteComponent, data: { component: MyModalComponent2 }}
];

ModalRouteComponent:

ngOnInit() {
    this.route.data.subscribe(data => this.openModal(data.component));
}