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

Aug 15, 2023

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 StackBlitz: https://stackblitz.com/edit/angular-a…
Code on Github:
https://github.com/soufiane-fadil/ang…

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)

# Please support us on Patreon If you like the video: https://www.patreon.com/codeacademia

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

Content

2.38 -> hi and welcome in angular series in this tutorial we will see how to create a

7.26 -> layout using Angular router, to do this we will create three main pages

11.789 -> home page, posts, and login. home page will use the sidebar, posts also will use it

18.96 -> and the users and the login will use the full width layout

24.88 -> in this tutorial I assume you have already know Nodejs and angular installed

29.38 -> if not please install nodejs and angular please go to angular that and hit

36.37 -> get started go to setup and see how to install angular, it's really quite easy

42.85 -> it will take a few minutes

52.34 -> the very first step is to create a fresh project using angular CLI and then

57.78 -> install Flex layout if you don't know yet about flex layout let's go to a

62.37 -> github

65.089 -> it's simply an intelligent layout that will help us applying some flexbox CSS

71.33 -> there is plenty of examples I suggest you to take a look on them before how

77.33 -> before we start the tutorial

89.56 -> all right so let's create our project first to do so let's go to the terminal

99.54 -> go to the your desired directory and type ng new to create a new project the

108.04 -> project name will be tutorial you can name it whatever you like

116.399 -> it will ask you about the routing yes I do need routing and for CSS I will use s

123.039 -> CSS you can use less or simply CSS

130.58 -> now the project is created let's install flex layout package, to do this go to

138.57 -> github and copy past this one

156.01 -> great now it's all installed

163.67 -> so our layout will be defined as a component, you know in angular there is

169.49 -> no concept of layouts there is only components so our layout will be defined

174.59 -> that as a component in a separate model and we will create two main pages home

180.23 -> page and posts and once that is created we will use the full width layout as a

186.32 -> the parent component in our routing module let's go ahead and do this so to create

193.52 -> a layout or a component as a layout type ng generate component and the layout

202.76 -> will be under a directory called layouts and I would call it simply

207.35 -> default so it's the default layout good creative I will create its module simply

215.45 -> type in G g m4 module and i will put it in the same folder great now I will

224.81 -> created the two other pages to create them create ng G for generates

230.2 -> components but now I will put them in modules and the create home where is my

237.079 -> home

239.32 -> and here is my posts great and now I will run the project simply run in G

249.86 -> serve and open it in the browser good I will open a new terminal and open my

261.29 -> projects in great I will update my HTML file sorry HMF I will remove it all of

270.229 -> it and keep only the router outlet I will go now to hop that module and I

279.14 -> will remove all these declarations

283.21 -> including the inputs and I will go to import section and imports the default

292.61 -> module

295.55 -> just like this save it I will go now to the layouts and now I will add some

305.75 -> declarations the first and foremost the defaults defaults components also the

314.479 -> home page and posts for the imports I need the router module and the Flex

328.34 -> layout module module here I will purchase my only so Flex layouts from

343.779 -> pink / / flex lamps grades in grades in my HTML I will remove this HTML and

361.639 -> replace it by router outlet right just like this and I will go to the approach

373.25 -> in and then they'll go here and use it it default layouts as the balance

378.199 -> component yes that's it so I need a path whole David entry for the components it

388.4 -> will be the default components sorry defaults components the children I need

396.379 -> to children's the first is the home page the same photo lives MJ just for for the

406.61 -> home page and the components will be the home components yes and the other one is

417.52 -> path this time is posts and the component

423.11 -> will be the post components

430.419 -> Paul right that's good great now the whole pages work in I will go to

437.72 -> posts page simply run posts yes there we go and now the routers work in I will go

447.259 -> to the default HTML and add our header right here cost Heather and inside the

459.139 -> header I need a logo yes sorry my net and in

473.24 -> here I need some several links I need a home page posts and login and for

485.09 -> angular it's a bit different we don't use href like this we use router link

491.259 -> just like that for the homes with slash router link to the past's slash posts

501.61 -> and here also router link to the body all right I do need also a footer yes

520.419 -> footer works so grades in the content in the content I need to split it into two

531.55 -> one for for the sidebar say when sidebar works just like that and use the router

544.25 -> outlet inside and not so this is gonna be made my layout let's

549.76 -> check it out in Firefox yes this is great

553.09 -> if I go to the home page

558.81 -> voila so we have the logo the links sidebar indeed content which is here and

568.15 -> the footer if I click on posts ok so the page changes and I will keep and then we

575.23 -> still have the the header sidebar and the footer ok so it's gonna be bad it's

584.41 -> gonna be bad to use it in here because if we want to create another layout so

588.82 -> we need to copy past the header and the footer a logical idea is to try to

593.23 -> extract the header sidebar and the footer and reuse it as common parts so

599.08 -> to do this we need to create what we call it shared modules

607.34 -> okay so let's go ahead and create that open in terminal

613.51 -> so in G G component is you generate components the components I will add

622.1 -> them inside the shared folder components because like in the field folder we may

629.24 -> have sorry we may have components may have pipes

633.7 -> directives and so on yeah so this our header sidebar and footer our parts of

640.79 -> components so it's gonna be a good idea to keep them in inside components folder

646.33 -> yeah so first thing is the header boom it's now created yes that's what once

656.29 -> second one in the sidebar sidebar third one is the footer effect so now I will

669.62 -> create a shared module for all of them module inside Sherrod just like that now

678.83 -> I will go ahead and update the a shared module I will add all of them to the

685.94 -> Declaration we have sorry we have the header other components we have sidebar

695.78 -> components also footer components for the imports we need we need the router

705.05 -> module we need flexbox module flex layout module and for the exports I need

715.97 -> to expose all the header sidebar and footer

724.769 -> and this should work so now I will to be able to reuse it I will move the arm the

735.61 -> HTML that we have in here and to move it to its component for example the header

741.07 -> should go to the header close that Heather xjl yes right there buddy and I

753.639 -> will replace it with a footer I'm sorry I'll replace it I will place it with up

762.48 -> Heather if you are wondering how did I came when up Heather please go to your

770.43 -> components you will find that in the selector in here yeah right that's how

775.329 -> you can reuse it whatever you like in your app the same for the footer

780.91 -> I will color it by its name footer and they go to the footer footer HTML and

794.139 -> footer will close this one's okay I will go now to the default module and import

802.87 -> our own header and footer on of this so it's called shared module and I will go

811.81 -> to the app touch module and remove all of this from the Declaration it's added

818.079 -> automatically by by the CLI so I remove it's my only so I don't need it here

823.54 -> it's part of other modules good let's go to do to the to the browser and see what

829.839 -> is happening good so nothing changed that means it is

834.639 -> working boom asked spoon login now start it's

838.75 -> not working we don't have a page dedicated for it so all we have is this

843.519 -> one and now we will use some CSS to make it a bit pure good

850.8 -> okay let's go now to the default components HTML in here this should be a

858.069 -> column so it's flex layouts common okay the same for the footer right there and

872.35 -> this should be a row perfect and this for the all this should be changed this

887.949 -> should be changed this should have only 20% of the documents document read and

898 -> in here side wash oops so it more just like that

907.62 -> okay and this one should should take 80% of the home of the documents okay

917.98 -> perfect I will simply give it a class name just

922.36 -> like content whatever good one thing left is in this toilets in here for the

933.91 -> body and the travel I will remove the padding and the margin right just like

946.839 -> this and for the hate I will give it a hundred percent effect

954.86 -> and for the hosts or the component itself will change the display - thanks

964.06 -> yes and all of it should be a column so it's affects the x-direction column and

973.45 -> the head should be at hundred percents there we go

979.9 -> for the contents the class that we have I will give it a pattern of 20 X that's

989.27 -> it let's see how that is performing there we go we have the photo right on

995.15 -> the bottom the logging in here sidebar the content

999.56 -> in our rights will change the color will go to the home page in here so it's the

1006.46 -> Heather I will give it a padding of 20 pixel I will change also the color to

1012.85 -> background color sky-blue maybe okay I'll go to the footer yes also a padding

1023.89 -> of 20 pixel and the background color should be green yeah in green

1033.06 -> it's the sidebar this sidebar in here I will give it a different color and then

1044.38 -> 20 pixel and I will use the maybe in college yeah what about the English yeah

1053.05 -> sounds good let's see yeah not a problem yup the sidebar here 7 bits like that

1061.53 -> let's go to the default rights I will give that oops - right here FX Thanks

1074.19 -> yep Tara this is working I will fix now the hither to be to adjust alignment in

1083.67 -> the header before I go to the hither I will change an alignment its FX layout

1093.56 -> Colleen I will use States spacing in between and should be in the center this

1102.39 -> should be a row yes and I need a gap between the links my guess 20 is okay so

1112.71 -> I will use a gap of 20 pixel yeah that's okay let's save it and see how that look

1121.5 -> like very good so the home page pasts home page boss all works fine

1129.9 -> okay so now the login should have a different a different layout okay so

1135.48 -> here is an exercise for you take 20 minutes from your time and try to redo

1142.17 -> what I've done to create my first layout and see if you can make it if you not

1148.08 -> please continue to see how that is how that will be created

1153.8 -> okay I will go to the terminal to create another another layout simply I will run

1161.19 -> a we use angular cell line generates components inside my notes and they

1169.53 -> would call that full with full sorry start forward for all the wait yes

1178.71 -> good here it is created to create a module for us good

1188.36 -> this is created okay hold go to the module have the declaration for my for

1197.64 -> my forum for my full width component half it's hard to say

1201.57 -> so it's for with components in here also I will need the router module router

1212.66 -> router module also I need the Flex layouts just like that also I will need

1223.17 -> the header and the footer I will grab them phone from the sharing audio so I

1228.48 -> need to share the module also good so one step ahead to be fully set I will

1236.91 -> pass the HTML and use the router outlet that's one oops

1246.11 -> good I will go to the update module and remove this one from the Declaration the

1255.69 -> same from the imports I will rather add it here

1261.66 -> it's the forward module good so now I've created my second my second layout

1272.28 -> it's called forward what is left now is to create my other page which is the

1278.34 -> login' to do this simply login torture modules of color blocking the same as

1287.82 -> always I will go to the update module and remove it from the declaration

1296.08 -> I would go to my forward module and got the Declaration of the login in here

1305.22 -> good what is left now is a routing help go in here and create another another

1316.33 -> route okay the path I'll leave it empty components

1323.92 -> parents should be the full-width components and from the children

1330.04 -> I have only one which is the login so but again and the component is the login

1342.1 -> components only this let's go ahead and see what is happening okay home post

1352.8 -> login okay good the reason why it's emptied simply we

1359.71 -> don't have any HTML in our in our form module components

1365.11 -> that's it should be the same except for the left panel our cap you bastard

1370 -> how will we use it I would go to the full width just like that and I will

1376.45 -> remove all this one okay 100% and we are all set let's go to our browser

1392.1 -> yes home posts login reflects the CSS by adding a host in here so should should

1405.58 -> fix the display to effects flex direction it's a column right and

1417.45 -> the height is 100% good or good home page with the sidebar posts with a

1427.919 -> sidebar in the login with the fold with only this perfect let's do a recap

1438.86 -> program so to create a layout simply create a component okay

1444.539 -> the component should have a this router outlet for the routing and a couple of

1451.409 -> HTML stuff depends on your templates this layout should be imported in up

1458.46 -> touch module and you should create a route for it

1463.35 -> so all components should be balanced opponents and that's it

1467.94 -> um if you like it please thumbs up and subscribe to my channel thank you

Source: https://www.youtube.com/watch?v=U4ftsqSt81w