Module 3.1: Breaking down the Component

Let's look at header.component.ts

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  nameToDisplay = '';
  constructor() { }

  ngOnInit() {
  }

  login() {
    this.nameToDisplay = window.prompt('Enter your name');
  }
  logout() {
    this.nameToDisplay = '';
  }

}

Let's look at the class itself. 1. At the top of the file we see we've declared nameToDisplay = '';. We put our global variable declarations at the top of the file like this. 2. Next, we have the “constructor” function. This function runs when the component is being constructed, when the view is first loaded. If you want something to happen as the component is being built, put the logic inside this function. 3. Next, we see ngOnInit(), this method is a lifecycle hook. Lifecycle hooks in Angular are very similar to lifecycle methods in React. We want these lifecycle hooks to go underneath the constructor. Angular starts us off with one of them already added in. The “ngOnInit” function runs when the component is initialized (which occurs after the constructor). There are a few other lifecycle hook functions to choose from, see the documentation if you’re curious - we won’t be using any until late in this project, we’ll just leave the existing “ngOnInit” sitting there untouched and empty. 4. Then, last we have the functions we made (login and logout), these should go after the lifecycle hooks.

this in Angular

Inside functions, whether the constructor function, a lifecycle function, or a function that we created… if you want to access a variable in the global scope, you need to preface that variable with “this.” to indicate it references the overall component. This is very similar to react. Notice in our login() and logout() methods, that we've use this.nameToDisplay, becuase nameToDisplay is a global variable.

Conditional Rendering in Angular

Right now the Register, Login, and Logout buttons are ALWAYS visible. That doesn't look great. Let’s hide the Logout button to start with, and when someone logs in, then hide the Register and Login buttons instead. Angular has a way of controlling visibility with “*ngIf”. Let’s look at this example:

<img *ngIf="true" src="img.png" />
<img *ngIf="false" src="img2.png" />

Only the img.png will be shown. If the content inside the quote marks is “truthy” then the tag will be shown. On the other hand, if the content inside the quote marks is “falsy” then the tag will be hidden. We can even apply this to a <div> tag and control the visibility for an entire section of HTML, it doesn’t have to be a lonely image tag.

We only want the Register and Login buttons to appear if the nameToDisplay variable is an empty string… and the Logout button to appear only if the nameToDisplay variable is NOT an empty string. Since empty strings are falsy, we could simply write it as below in our header.component.html file:

<!-- Right side of navbar -->
      <div class="btn-group" role="group">
        <button *ngIf="!nameToDisplay" type="button" class="btn btn-lg btn-outline-primary" routerLink="/register">Register</button>
        <button *ngIf="!nameToDisplay" type="button" class="btn btn-lg btn-outline-primary" (click)="login()">Login</button>
        <button *ngIf="nameToDisplay" type="button" class="btn btn-lg btn-outline-danger red-btn" (click)="logout()">Logout of {{nameToDisplay}}</button>
      </div>

Cool, serve your website and try it out! On page load you should no longer see the Logout button. After logging in, you should no longer see the Register or Login button - instead you should see logout.

Next, we'll learn about data binding in Angular.

Data Binding in Angular