Build Your First Angular Website: Lesson 6 of 18

Creating an Angular Header and Footer

Up Next

Adding an Image/Logo in Angular

Autoplaying in 7 seconds!

Cancel

The header and footer are the two components that we usually start with when building out a new website. Let's go ahead and create these new parts of our site.

Adding a Header and Footer the Wrong Way

Let's talk about how you would normally add a header. We would probably look into our app.component.ts since that houses the overall application template.

We could add the entire header and footer there. We're going to use some pre-built Bulma components copied over from the Bulma Navbar docs and Bulma Footer docs.

Table of Contents

    // src/app/app.component.ts
    
    @Component({
      selector: 'app-root',
      template: `
        <!-- header -->
        <nav class="navbar">
    
          <!-- logo -->
          <div class="navbar-brand">
            <a class="navbar-item">
              <img src="https://bulma.io/images/bulma-logo.png">
            </a>
          </div>
        </nav>
    
        <!-- routes will be rendered here -->
        <router-outlet></router-outlet>
    
        <!-- footer -->
        <footer class="footer">
        <div class="container">
        <div class="content has-text-centered">
          <p>
            Made with <3 by <a href="https://twitter.com/chrisoncode">Chris from Scotch</a>
          </p>
        </div>
        </div>
        </footer>
      `,
      styles: []
    })
    export class AppComponent {}

    While this will work, our site code is already starting to look confusing. Lots of stuff is going on in this main AppComponent and it's not too clear what's happening.

    Here's what our app looks like now:

    Creating Header and Footer the Right Way (Components)

    The JavaScript world and the web have been moving towards components in recent years. Having components that are brought together to build our sites/apps makes them easy to manage and easy to read the code.

    Let's build out a header component and a footer component and see how much cleaner our code will get.

    Use the CLI to Create Header and Footer

    We'll use CLI to create two new components inside of a src/app/components folder:

    ng generate component components/header
    
    # with the shorthand for generate
    ng g component components/footer

    Now we have two clean components that we can use!

    // src/app/components/header.component.ts
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-header',
      template: `
        <p>
          header works!
        </p>
      `,
      styles: []
    })
    export class HeaderComponent implements OnInit {
      constructor() {}
      ngOnInit() {}
    }
    // src/app/components/footer.component.ts
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-footer',
      template: `
        <p>
          footer works!
        </p>
      `,
      styles: []
    })
    export class FooterComponent implements OnInit {
      constructor() {}
      ngOnInit() {}
    }

    We have a selector, template, and styles inside of the @Component() decorator that tells Angular how to create these components.

    We are also given a class that isn't really used for these two components since they are presentational and only display the template. We don't have any data in these two components yet.

    The header may get some authentication in a later date. We'll be handling Angular authentication in another course since the goal of this course is to build a simple Angular site and get familiar with how you'd use Angular to build.

    Components Added to the AppModule

    The main AppModule is our applications main place we register all the parts of this site. The Angular CLI already registered these two new components there so we don't have to!

    // src/app/app.module.ts
    
    ...
    
    @NgModule({
      declarations: [
        AppComponent,
        HeaderComponent,
        FooterComponent
      ],
    
      ...

    declarations is where we put any components that we have created. We'll see in a later lesson more about how we can use these @NgModule()s to organize our application.

    Using Our New Header and Footer Components

    The first thing we can do is try using these components. If you look in each component, you'll see the selector that we can use to insert these components into our app. We currently have app-header and app-footer. Let's add these to the AppComponent template now:

    // src/app/app.component.ts
    ...
    @Component({
      selector: 'app-root',
      template: `
        <!-- header -->
        <app-header></app-header>
    
        <!-- routes will be rendered here -->
        <router-outlet></router-outlet>
    
        <!-- footer -->
        <app-footer></app-footer>
      `,
      styles: []
    })
    ...

    Notice how much cleaner our overall template has gotten. Really easy to read! This is the part of the benefits of using components to compose our application. Next is to add the original templates to both our header and footer components:

    // src/app/components/header.component.ts
    ...
    @Component({
      selector: 'app-header',
      template: `
        <nav class="navbar">
    
          <!-- logo -->
          <div class="navbar-brand">
            <a class="navbar-item">
              <img src="https://bulma.io/images/bulma-logo.png">
            </a>
          </div>
        </nav>
      `,
      styles: []
    })
    ...
    // src/app/components/footer.component.ts
    ...
    @Component({
      selector: 'app-footer',
      template: `
        <footer class="footer">
        <div class="container">
        <div class="content has-text-centered">
          <p>
            Made with <3 by <a href="https://twitter.com/chrisoncode">Chris from Scotch</a>
          </p>
        </div>
        </div>
        </footer>
      `,
      styles: []
    })
    ...

    Our app looks the same as it did earlier, but now our organization is much better.

    Chris Sevilleja

    176 posts

    Founder of Scotch.io. Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.