3.1: Angular Layout

Update Styles.scss

In our Styles.scss, we'll add some color variables

$red: #D9514E;
$cyan: #86BAD3;

$text: #3e3e3e;

$theme-colors: (
    "primary": $red,
    "secondary": $cyan
);

@import "~bootstrap/scss/bootstrap";

$fa-font-path: "~font-awesome/fonts";

@import "~font-awesome/scss/font-awesome";

// bootstrap overrides

body {
    color: $text;
}

.btn {
    font-weight: bold;
    color: white;
}

.btn-secondary.disabled[_ngcontent-c1], .btn-secondary[_ngcontent-c1]:disabled {
    color: white;
    cursor: disabled;
}

Add Nav Component

Navigate to the EFConnectSPA/src/app folder and run the following command:

ng g c nav --no-spec

Make sure it is registered in app.module.ts.

We'll add a navbar to our the top of our page.

In app.component.html add this to the top of the file:

<app-nav></app-nav>
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>

  ...

Now, in nav.component.html, we'll add a basic navbar with a login form:

<nav class="navbar navbar-expand-lg navbar-dark nav-red">
  <div class="container">
    <a class="navbar-brand" href="#">1150Connect</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Users</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Followers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Messages</a>
        </li>
      </ul>

      <form class="form-inline my-2 my-lg-0 ml-auto">
        <input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Login">
        <input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Login">
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Sign in</button>
      </form>

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

To style the navbar, we'll add this to our nav.component.scss:

@import '../../styles.scss';

.nav-red {
    background-color: $red;
    color: white;
}

Add Template Form

Right now, our form doesn't do much. We'll add some basic functionality to test.

First, import the FormsModule in app.module.ts:

import { FormsModule } from '@angular/forms';

//...

imports: [
    BrowserModule,
    FormsModule

In the <form> section of the nav.component.html, make the following changes:

<form #loginForm="ngForm" class="form-inline my-2 my-lg-0" (ngSubmit)="login()">
  <input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Login" name="username" #username="ngModel" [(ngModel)]="model.username" required>
  <input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Login" name="password" #password="ngModel" [(ngModel)]="model.password" required>
  <button [disabled]="!loginForm.valid" class="btn btn-secondary my-2 my-sm-0" type="submit">Sign in</button>
</form>

Next, in the nav.component.ts, we'll add a model property and a login() method.

The login() method will just log out the form data to the console right now to make sure the basic Angular functionality is working in our form.

export class NavComponent implements OnInit {
  model: any = {};              //  <---- added

  constructor() { }

  ngOnInit() {
  }

  login() {
    console.log(this.model);    //  <---- added
  }

}

Next, start the Angular app up by navigating to your EFConnectSPA root folder and run this command:

ng serve -o

Login in with any username and password. We aren't talking to the backend yet, so just verify that it is logging whatever you type into the form and you aren't getting any errors.

LoginConsoleTest