Websites with Angular and Less CSS tutorials
11. The index page and footer components
av_timer3 minute read

So is this like the plot twist tutorial that serves to pad the length of a show?

  1. Topics of discussion
  2. The index page component
  3. The footer component
  4. Global styles for our app

1. Topics of discussion

In this tutorial, we will be adding two final component to our website as well as add a bit of global styles to each component. So, let's have some fun.

2. The index page component

Some of you may have noticed that whenever we open our app, a very empty page is served. That's because our home root is not associated to any component. You may have noticed that whenever we navigate to a different page in our app, the url changes to http://localhost:4200/route_name. But when we launch the app, it launches the http://localhost:4200 url, which has a corresponding route in Angular. The route for this page is empty string ('').

And as you can see, there is nothing associated to said route. That's why, we are going to create an index page component. And after we create it, we are going to associate the '' route to that component.

Generally speaking, index pages can be used to display quick access links to the most recent content on your website, sales offers or general info regarding the website activity that may interest users. In our case, we are going to generate a simple Welcome page for our users.

Let's create a component. This time around, we will place the component inside the AppModule:

ng g c components/Index -m=App --export

Inside the index.component.html file, place the following code:

<div class="container container-fluid">
  <div class="row">
    <div class="col-12">
      <h2>Welcome to ALMO Recipes!</h2>
    </div>
  </div>
</div>

Now, let's add the route in app-routing.module.ts:

{
  path: '',
  component: IndexComponent
}

Now, when you build and open the app again, it should display the IndexComponent upon launch. One more thing to not here is that you can also have a different approach to this. Meaning that you can create an index route for this component and create a redirect from the '' route to the index route. Something like this:

{
  path: 'index',
  component: IndexComponent
},
{
  path: '',
  redirectTo: '/index',
  pathMatch: 'full'
}

Since we have a home page now, let's modify our navigation accordingly. If you remember, we added an image placeholder in one of our first tutorials but it didn't go anywhere at that time. Let's change that:

<a class="home-button" routerLink="/">
  <img src="assets/img/path_to_my_logo.png" />
</a>

This approach covers both cases presented above.

3. The footer component

The last component we are going to create in this course is the footer component. The footer of the page is generally used to display contact information and any and all copyright levels for your work. Let's create a module for it:

ng g m components/Footer

And now, let's create the component:

ng g c components/footer/Footer -m=Footer --export

In the footer.component.html page, place the following code:

<div class="footer-row">
  <p class="text-center">© ALMO Recipes</p>
</div>

In the footer.component.less file, place the following code:

.footer-row {
  background: rgb(6, 38, 57);
  color: #fff;
  padding: 15px 15px 0;
  height: 100px;
}

Now that we have our footer component, we'll want to append it to every page in our app. For that, in our app-navigation.component.html page, place the following line under <router-outlet></router-outlet>:

<app-footer></app-footer>

And in order for this to work, we also need to import the FooterModule insidue the navigation.module.ts file.

4. Global styles for our app

If you build and serve the app now, it will look a bit weird. That's because what should be on the bottom of the page (you know, the footer) is going to be placed somewhere in the middle of your screen. We are going to solve this by adding a class inside styles.less:

.site-container {
  min-height: 773px;
}

Now, inside the index.component.html file, add this class to the first div in that page:

<div class="container container-fluid site-container">

When the page refreshes, you will see that the footer goes all the way to the bottom of the page because we are forcing the container from the index component to have a minimum height of 773px by using that class. In order for our app to have some sort of unity in its design, go ahead and add that class in all the pages (login, register etc) on the first div of each html component page.

And that about covers it for this tutorial. The next one is the final tutorial of this course, where we go through what we have learned during these tutorials. See you then.

COMMENTS
No comments yet...