Module 2.2: Footer Component

Generating the Footer component

• Start by running ng generate component footer

• Notice the FooterComponent was added to the boss-file: app.module.ts

• Let’s include the footer content at the bottom of our app.component.html file. Include the following at the bottom:

  <app-footer></app-footer>

Add HTML and CSS to the Footer

Add the following code for footer.component.html.

<nav class="navbar navbar-dark bg-dark align-bottom" id='footer-content'>
 <div class="row fill">

   <div class="col d-flex justify-content-center align-items-center">
     <p class="white-text">
         Message Board Coders<br>
         12345 Your Street<br>
         Town, IN 44444
     </p>
   </div>

   <div class="col d-flex justify-content-center align-items-center">
     <p class="white-text">
       (c) 2018 by Message Board Coders
     </p>
   </div>

   <div class="col d-flex justify-content-center align-items-center">
     <p class="white-text">
         We build cool websites.<br>
         Just take a look at this<br>
         awesome message board!
     </p>
   </div>

 </div>
</nav>

Then copy and paste the following CSS rules into footer.component.css.

#footer-content {
     border-radius: 0px;
     position: fixed;
     width: 100vw;
     bottom: 0rem;
     text-align: center;
}

.white-text {
     margin-bottom: 0;
}

Serve up your website and you should have a footer after your content! (Again, no errors in the console)

Routing