Enhance the presentation layer of your multi-layout Angular app

featured_image

Check out the example of a multi-layout Angular application templates complemented with Bootstrap styles.

What we are going to build

Our application provides two separate layouts – one served on a landing page view, the other used on a dashboard view. We will create a horizontal navigation and a footer for the landing page and a vertical navigation for a dashboard.

All views will be complemented with Bootstrap classes.

The finished project is available in the following GitHub repository: little-pinecone/angular-multi-layout-scaffolding.

Requirements

I try to keep the project up to date. Visit the releases list to keep track of the current versions of frameworks and libraries used.

Add html and scss to components

Center the content of all pages

To center the content of all pages, update the page-content.component.scss file:

and set html and body heights to 100%:

Adjust the guest view

Style the guest layout by adding the wrapper class to it:

Add the top navigation to the guest-top-nav.component.html:

Create a footer by editing the guest-footer.component.html:

Fill the content of the landing page with the follwing example view:

With Bootstrap included into your project, the landing page should look like this:

The landing page screenshot

The work done in this section is contained in the commit 5e2b80b4f3f7a2fba42e3d49542aa8b71f3d5a5e.

Adjust the view for an authorised user

Style the authorised layout by adding the wrapper class to it:

The full-width class has been already defined in the page-content.component.scss file.

Edit the authorised-side-nav.component.html:

Add styles to the component:

Edit the dashboard.component.html:

Adjust styles of the dashboard page:

The content of the dashboard page should look like this:

The dashboard page screenshot

The work done in this section is contained in the commit 4b51190ea37246cfdb009b24569ad7060660ea64.

Update tests

The new html content should be accounted for in the tests. Copy the example tests from the following snippets:

Run the following command: $ ng test and check out the output:

Karma DEBUG RUNNER screenshot
Karma DEBUG RUNNER output

The work done in this section is contained in the commit 431b9cdd6ddd7da9e5185fc3114b4c7bd1157d08.

Photo by  JD MasonToa Heftiba on StockSnap

One thought on “Enhance the presentation layer of your multi-layout Angular app

Leave a Reply to Daya Stark Cancel reply

Your email address will not be published. Required fields are marked *