Module 2.1: Header Component

1. Cancel your “ng serve” command - remember, Ctrl (or Cmd) + c. (and then Windows users need to say “y” to the terminate prompt.)

2. One of the many handy features of the Angular CLI is generating new components for us. Let’s generate a “header” component. In the terminal, type: ng generate component header. This command tells the Angular CLI to generate a component named “header”.

3. The CLI now tells us that it created 4 files (notice there is one HTML, CSS, TS, and SPEC.TS file) and that it updated app.module.ts. You might also have noticed 2 things changed in the File Explorer. A new folder named “header” appeared, and the app.module.ts file is colored tan, indicating a modification.

Take a quick glance at app.module.ts and you’ll see there is a new “HeaderComponent” imported and declared. It should look like below:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Take a look in the new header.component.ts file and notice the selector is “app-header”. So, hopefully, anytime we put <app-header></app-header> tags in an HTML file, it will load our header! Right now, you’ll notice the HTML file is very empty, just a simple:

<p>
  header works!
</p>

Switch over to the app.component.html file and add <app-header></app-header> to the top of the file, and save. Type ng serve in your terminal and take a look at your website. It should now have that paragraph tag displayed at the top of your page.

Adding a Bootstrap Nav Bar

Now let’s add in a more fancy bootstrap navbar. Make your header.component.html file look like the following:

<div class="row">
 <div class="col">
   <nav class="navbar navbar-expand-lg justify-content-between navbar-dark bg-dark">


     <!-- Left side of navbar -->
     <div class="row">

       <a class="white-text navbar-brand">Message Board 💬</a>

       <ul class="navbar-nav">
         <li><a class="white-text bg-dark navbar-dark nav-link">Home</a></li>
         <li><a class="white-text bg-dark navbar-dark nav-link">Create</a></li>
       </ul>

     </div>


     <!-- Right side of navbar -->
     <div class="btn-group" role="group">
       <button type="button" class="btn btn-lg btn-outline-primary">Register</button>
       <button type="button" class="btn btn-lg btn-outline-primary">Login</button>
       <button type="button" class="btn btn-lg btn-outline-danger red-btn">Logout</button>
     </div>

   </nav>
 </div>
</div>

Add the following CSS rules to header.component.css.

/* Remove rounded borders and make it the whole width of the page */
.navbar {
     width: 100%;
     border-radius: 0px;
}

/* Move the brand away from the edge of the page */
.navbar-brand {
     margin-left: 1rem;
}

/* Set the text color of the links on the left side of the navbar */
li:hover a {
     color: #007bff !important;
}

/* Style the Register, Login, and Logout buttons on the right side of the navbar */
.btn {
     border-radius: 0px;
     border: 0;
}
.btn:hover,
.btn:active,
.btn:focus {
     background-color: #007bff;
     color: #343a40;
}
.red-btn:hover,
.red-btn:active,
.red-btn:focus {
     background-color: #dc3545;
     color: #343a40;
}

Finally, let’s add some global style rules. We want these to apply to every component - so we should place them in the styles.cssfile.

/* You can add global styles to this file, and also import other style files */
body {
     margin: 0px;
     padding: 0px;
     height: 100vh;
     overflow-x: hidden;
}
.white-text {
     color: white !important;
}
.fill {
     width: 100%;
}

Next, we'll do the same process with our footer.

Footer Component