DEV Community

😲 Angular pages with Dynamic layouts!

Michael "lampe" Lazarski on April 19, 2020

⏳ A few months ago I wrote an article about dynamic layouts in Vue. Currently, I have the same problem but with Angular. I could not find one satis...

Read full post

Michael Monerau • Apr 22 '20

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!

Michael "lampe" Lazarski • Apr 22 '20 • Edited

I did not know about that!

Do you maybe have a repo with an example implementation?

Michael Monerau • Apr 22 '20

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.

Michael "lampe" Lazarski • Apr 22 '20

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

Michael Monerau • Apr 22 '20 • Edited

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 :)

Michael "lampe" Lazarski • Apr 22 '20

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 :)

Michael Monerau • Apr 22 '20

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.

Michael Tharrington • Apr 20 '20

Heya! Just a heads up that I think the link to the Vue article up top is acting a bit screwy. Cool article though! 🙂

Michael "lampe" Lazarski • Apr 20 '20

Thanks, and yeah the link was broken.
It is now fixed! Thanks 👍

Michael Tharrington • Apr 20 '20

No probs at all!

GaurangDhorda • Apr 21 '20

Is this not possible, if you put login component outside of main components... Means, one shell component having all other components and login component is alone..

Michael "lampe" Lazarski • Apr 21 '20

I'm not sure if I understand your comment correctly 🤔

In general this is just an example.
Imagine you would have a login, register, reset password and new password component. Now you would use the same layout for all of them.

Now you want to have your logo in all 4 of them on the top right. You could change this simple in the layout file.

The same goes for the other component. In the example, we just have the dashboard but almost every other page could be in this layout.

Maybe you will need another layout for fullscreen pages without the menu.

So this is more like a starter for your app/page 😊

reza1mohammad • Feb 12 '22

Hi. Thanls for sharing. How could I login to see layout changes dynamically?
I mean whats the Email and Password?