DEV Community

loading...

Discussion on: 😲 Angular pages with Dynamic layouts!

Collapse
qortex profile image
Michael Monerau

Thanks for your approach!
Also you should realize it prevents any lazy loading, and could end up with a big switch in your main component.

I usually rather go with sub-routing: basically you are re-implementing a routing facility. You could instead use <ng-router name="contents"></ng-router> and your routes would define the routes with the outlet property. Then you get best of both worlds and don't have to centralize a list of all possible layout components.

Hope it helps!

Collapse
lampewebdev profile image
Michael "lampe" Lazarski Author

I did not know about that!

Do you maybe have a repo with an example implementation?

Collapse
qortex profile image
Michael Monerau

Nope unfortunately, only on a private project. But the official doc is pretty extensive, you'll figure things out very quickly. Might be a good follow-up article!

Basically, you do:

The "container" layout:

<my-layout...>
<ng-router name="contents"></ng-router>
...
</my-layout>

Then in your routes, you just add the outlet: 'contents' where you want to specify what should be projected in the contents placeholders.

Thread Thread
lampewebdev profile image
Michael "lampe" Lazarski Author

I can have a look at that :D

As far as I remember I don't see a problem with lazy loading and my solution 🤔.
You just need to change the routes definitions.

  {
    path: 'SomePath',
    loadChildren: () => import('./something/someThing.module').then(m => m.someThingModule)
  },
Thread Thread
qortex profile image
Michael Monerau

I mean, your layouts cannot be lazy-loaded (nor cascaded, which is a nice feature).

In my app, I have several levels of such layouts. Let's say you have a layout:

--------- topbar ----------------------------
left menu  |  page_contents                      |

You can have a first layout:

topbar
router "contents"

and then in contents you can inject a layout with two router-outlets, left-menu & page_contents.

And the left menu + contents layout does not have to be loaded if you don't navigate to this part.

I hope it's clear :)

Thread Thread
lampewebdev profile image
Michael "lampe" Lazarski Author

Ahh okay yeah :D
Sure that's also not bad.

My idea was more when you have completely different layouts like in the example.
You have your app layout and then you have a layout for login/register.
Which have not much in common

And yes then if you don't need the topbar it could be configured via routes too :)

Thread Thread
qortex profile image
Michael Monerau

Yup, especially in that case: I don't want to pull in the code for the login page module when the user is already logged in and won't hit the login page, if you see what I mean.

But anyway you're right, the cost is usually not that high with simple components like that.