Angular - Reusable Layout Templates Using Angular Routing and Flex-layout Flexbox

In this tutorial, you will see how to create your Layout Template using Angular Routing and Flex Layout.

Code on Github:

We will mainly:
- Create 2 Components as Layout (Full-Width Layout and Sidebar Layout )
- Create 3 Components as Pages (Home, Posts, and Login)
- Update the App Routing (Angular Routing) to support the Parent and Child Routes
- Create a Shared Module for the Header, Sidebar, and Footer. Will be considered as reusable parts in the App.

- 00:00 Introduction
- 00:24 Requirements (Nodejs installation + Angular CLI installation)
- 00:48 Create Project using Angular CLI + Install Flex Layout
- 10:04 Create Shared Module for the Header, Sidebar, and Footer (Reusable Components)

#angular #angular-layout #angular-template #angular-new-project #angular-routing

[salvatorepassanisi]

Clearly explained tutorial. Got it working the first time. Excellent example great for any starter project. Nicely Done!!

[sankalpjainbansalcla]

very well explained with the right amount of pace. Thanks a lot.

[irshadahmadhukkeri]

Great tutorial buddy. Been struggling with this all day today. I see my mistake is I created a router in each layout and I actually want these and I hope to see your videos more <3

[SuperChikna]

Thanks for the tutorial. Worked perfectly for me except for sticky footer. Had to us below code in footer.component.scss to make it sticky to bottom of page.
footer{
padding: 5px;
background-color: skyblue;
position:fixed;
bottom:0px;
width:100%;
}

[vikasarora]

Well explained. Thanks for the tutorial !

[developerfellow]

It was actually very helpful. Thank you.

[manit]

nice tutorial, you spent and great deal of time and was very clear and thorough. for beginners this is a gold mine.

[Sunny-qeel]

You taught in such a way that It becomes very simple to understand.

Great Tutorial. Keep it up :)

[nicole_baker]

Exactly what I was looking for...Thank you 👍

[SiphoMkhwanazi]

Great tutorial bud. Been struggling with this all day today. I see my mistake is I created a router in each layout.

[starsmeteorIAN]

thanks for your clearly explained tutorial

[dariosemenzato]

Great tutorial!. Thanks a lot!!! It allow me to understand how work with diferents modules and their routes. If you generate the module before the components, these are imported into de module that you have generated and not into de app.module.ts, so you haven't go to remove the imports from there

[TruptiJagtap]

One of the best video 👏✨Thank You Very Much🙌

[AbdusSalamAzad]

Thanks a lot. A great tutorial to implement layout.

[soneegupta]

Very Useful video thanks code-academia

[blitztech]

hi brother for begginner add this type more video ur tutorial its good

[meetingattender]

Very nice and helpful thank you very much

[loquebarrell]

very helpful!!!If you have knowledge doing layouts for primeng will be really help

[hamza]

Thanks! Unfortunately, flex-layout is not maintained anymore.

[asagiri_genkun]

Hii,
I'm very thankful for this easy to understand to the point video. But
I'm referring to this video in now 2023 and did exact same code but somehow it is just showing blank webpage on Chrome. Any idea or solution to make it show up on screen.
It will be very helpful.