Create the Header & Footer components

Now that we have Saas configured, let’s take a few minutes to create header and footer components for our web application.

Note: At this point I am copying the project from the Module14 folder to a Module15 folder. The pathway I am using for development here is:
C:\Development\FredsCars\FullStack\Module15.
Table Of Contents
  1. Create the Header Component
  2. Create the Footer Component
  3. What's Next

Create the Header Component

Open a command line and navigate to the FredsCars project in the solution.

Type the following command.

ng generate component Header --skip-tests --dry-run

In the above command I am taking a dry run at creating a component named Header and specifiying to forgo the creation of a test file.

And I get the following results telling me “More than one module matches”.

It looks like we will need to use the module switch we talked about earlier. Type the following command.

ng generate component Header --skip-tests --module=app --dry-run

and you should see the following results.

This time the dry run is telling us we will get the results we are expecting. A folder called header will be created and in the new header folder our three component files will be created with no test file and the root module will be updated to register the new home component. Let’s do it for real now! Type the following command.

ng generate component Header --skip-tests --module=app

And you should see the following results.

In Solution Explorer, you should now see the new header component.

If you look at the generated code for the header components TypeScript file, it specifies a selector of app-header.

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
}

So to use the new Header Component, we need to put an <app-header> element somewhere in the HTML. Open the app.component.html file in the FredsCars/src/app folder and make the following modification in bold blue font.

<app-header></app-header>
<app-nav-menu></app-nav-menu>
<div class="container">
  <router-outlet></router-outlet>
</div>

The results in your browser window should now look similar to the screenshot below.

In the above screenshot the Header component is now rendering above our MatToolbar in AppComponent with the autogenerated HTML, “Header works”.

All is looking good. Right? Well we could probably continue down this road and get everything looking the way we want. But we are running into a slight problem. If we look back at Chapter one, Module three, “Mock your site with HTML, we laid out the header and title of our website with the following HTML where the header and title is in bold blue font.

<html>
<head>
	<title>Fred's Cars, Trucks & Jeeps</title>
</head>
<body>
    <header>
	Fred's Cars, Trucks & Jeeps
    </header>

    <h1>Welcome to Fred's Cars!</h1>

    Thank you for visiting our site.
</body>
</html>

which after adding styling renders like this.

But here in our full-stack application we have already used the <header> element in our NavMenuComponent HTML to contain our MatToolbar component with our navigation buttons. I would like our Angular Header component to also live in the HTML <header> element along with the top navigation. How can we accomplish this?

MatToolbarRow

Well, it turns out MatToolbar also supports multiple rows with MatToolbarRow. Let’s make some modifications to make our Header and NavMenu Components live in the HTML <header> element seamlessly together.

First let’s take the <app-header> element out of app.component.html and put it back like we had it.

FredsCars/src/app/app.component.html

<app-nav-menu></app-nav-menu>
<div class="container">
  <router-outlet></router-outlet>
</div>

Next make the following modifications to nav-menu.component.html.

FredsCars/src/app/nav-menu/nav-menu.component.html

<header>
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <app-header></app-header>
    </mat-toolbar-row>
    <mat-toolbar-row>
      <a mat-icon-button [routerLink]="['/']">
        <mat-icon>
          home
        </mat-icon>
      </a>
      <a mat-flat-button [routerLink]="['/vehicles']">
        Vehicles
      </a>
    </mat-toolbar-row>
  </mat-toolbar>
</header>

And the results in your browser should look similar to the results in the following screenshot.

It does look like our Header and NavMenu components are coexisting quite nicely together in the <header> element. Let’s take a look at the html and Angular component structure in the web development tools. In your browser window hit the F12 key to bring up the web development tools window. Below is a screenshot highlighting with red borders the important elements and attributes to pay attention too for this exercise.

In the screenshot above we can see in the elements tab of the web development tools window the mixture of HTML elements and Angular components. The root component, AppComponent, represented by the <app-root> element is the top component laid out in the single index.html page that is served up by the application.

AppComponent loads up our NavMenu Component.

The HTML in NavMenuComponent contains the HTML <header> element for the dynamic webpage.

Inside of the <header> element sits an Angular Material MatToolbar Component.

The MatToolbar component contains two Angular Material MatToobarRow Components.

The first MatToolbarRow component contains our Header component.

And the second MatToolbarRow component contains the MatIconButton and MatFlatButton <a> elements.

Next let’s add our “Fred’s Cars, Trucks & Jeeps” text into our Header component with black background and white text like we had back in Chapter one.

Open header.component.html from the FredsCars/src/app/header folder and replace the html contents with the code below.

FredsCars/src/app/header/header.component.html

<div>
  Fred's Cars, Trucks & Jeeps
</div>

Next open header.component.scss and fill the contents with the following CSS.

FredsCars/src/app/header/header.component.scss

div {
  font-size:16pt;
}

At this point the title would render to the left of the top MatToolbarRow. The next couple steps will center the title message and give the top MatToolbarRow a black background.

Center the title message

Now open the nav-menu.component.html file in the FredsCars/src/app/nav-menu folder and modify its contents with the code highlighted in bold blue font.

FredsCars/src/app/nav-menu/nav-menu.component.html

<header>
  <mat-toolbar color="primary">
    <mat-toolbar-row class="matToolbar-header-title">
      <span class="spacer"></span>
        <app-header></app-header>
      <span class="spacer"></span>
    </mat-toolbar-row>
    <mat-toolbar-row>
      <a mat-icon-button [routerLink]="['/']">
        <mat-icon>
          home
        </mat-icon>
      </a>
      <a mat-flat-button [routerLink]="['/vehicles']">
        Vehicles
      </a>
    </mat-toolbar-row>
  </mat-toolbar>
</header>

Finally open nav-menu.component.scss and fill it with the CSS below.

FredsCars/src/app/nav-menu/nav-menu.component.scss

.matToolbar-header-title {
  background-color: black;
}

.spacer {
  flex: 1 1 auto;
}

And now the results in your browser should look similar to the following.

In the code above we took the following steps.

  • header.component.html – Added our “Fred’s Cars, Trucks & Jeeps message wrapped in a DIV element.
  • header.component.scss – targeted our DIV message element and gave it a font size of 16pt.
  • nav-menu.component.html – Added to our top MatToolbarRow element a class called “matToobar-header-title so we can target the top row and give it a background color of black with CSS. Wrapped the <app-header> element, which is our Header component, between two SPAN elements with a class of “spacer”. We use this class in nav-menu-component.scss to center the top row title message, “Fred’s Cars, Trucks & Jeeps”.
  • nav-menu.component.scss – set the top MatToolbarRow’s background color to black.
    Use the flex system to make any element with the class, “spacer” grow horizontally and take up all available space. Since the top row message in the toolbar is wrapped between two SPAN elements with this class, the effect will be to center the message.

Create the Footer Component

Now that we have a nice Header title message, let’s move on and create the Footer component.

Open a command line and navigate to the FredsCars project in the solution.

Run the following command. (Remember, you can do a dry run first if you want to make sure the new Header component will be registered in the root module rather then the AppRouting or AngularMaterial modules).

ng generate component Footer --skip-tests --module=app

You should now have a new Footer folder in the FredsCars/src/app folder with the three new Header component files.

Open the app.component.html file and modify the code with contents below.

FredsCars/src/app/app.component.html

<app-nav-menu></app-nav-menu>
<div class="container">
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

The results in your browser should look like the following screenshot.

In the above screenshot we can see the Footer comonent is now showing at the bottom of the screen. Let’s finish it.

Modify the contents of footer.component.html with the code below.

FredsCars\src\app\footer\footer.component.html

<footer>
  Contact us: (555)555-5555<br />
  121 Fredway St.<br />
  Cartown USA
</footer>

Now modify the footer css in footer.component.scss with the code below.

FredsCars/src/app/footer/footer.component.scss

footer {
  background-color: black;
  color: white;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 15px;
}

Now the results in your browser should look like the following screenshot.

The Header component and accompanying CSS is pretty simple. We basically used the same <footer> element and contents from Chapter One and dressed it up with CSS to:

  • Center align the text.
  • Make the background color black and the text color white.
  • Give the footer a width of 100% so it will fit all the way accross the screen horizontally.
  • Give it some padding of 15 pixels.
  • Make the footer “sticky” to stay on the bottom of the screen as the user scrolls if there is enough content vertically to create a scrollbar.
    • Set position to fixed and bottom to 0.

This approach to a sticky footer is a little different then the approach used in Chapter one. In Chapter One if there is a lot of content in the browser you have to scroll down to the end of the content to see the footer. The term sticky there just refers to the fact that the footer is not sitting in the middle of the screen even if there is not enough content to push it down.

Here the footer is truly sticky and stays at the bottom of the screen no matter what position the scroll bar is at.

What’s Next

In this module we created Header and Footer components and the look of our application is progressing quickly. It is no longer bombarded by the purplish blue in the Indigo-Pink theme we chose when installing Angular Material. The white on black text in the header and footer and the light blue alternating rows in the Vehicles table is starting to give our application it’s own brand, look & feel.

In the next module we will add some functionality to the Vehicles table with paging and sorting using the Angular Material MatTable component.

< Prev
Next >

Leave a Reply