DEV Community

Cover image for 😲 Angular pages with Dynamic layouts!

😲 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...
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 • Edited

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

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

Thread Thread
 
lampewebdev profile image
Michael "lampe" Lazarski

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.

Collapse
 
michaeltharrington profile image
Michael Tharrington

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

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

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

Collapse
 
michaeltharrington profile image
Michael Tharrington

No probs at all!

Collapse
 
gaurangdhorda profile image
GaurangDhorda

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..

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

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 😊

Collapse
 
reza1mohammad profile image
reza1mohammad

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