Module 3: Angular Data Binding

Goals

• Learn about Angular “data-binding”

• Dive further into the TypeScript file

• Learn about showing and hiding content with Angular

• Pass information between the HTML and TypeScript files

• Set up a basic Angular form

JavaScript/TypeScript in HTML the Angular way

Open up header.component.ts and create a variable called nameToDisplay, set it equal to any name you like.

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

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

  ngOnInit() {
  }

}

Now update the logout button in the header.component.html file to show the value of our variable.

<!-- Right side of navbar -->
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-lg btn-outline-primary" routerLink="/register">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 of {{nameToDisplay}}</button>
      </div>

See those double curly braces? This how you pass data from JavaScript/TypeScripts to html in Angular. It’s a one-way deal, nothing gets sent back to the TypeScript file, and it’s updated in real time. If the value of “nameToDisplay” was to change for any reason, that change would be immediately reflected in the HTML file.

Passing Functions in Angular

If you think back to react, you may remember, running functions onClick, Angular does things similarly but the syntax is a bit different. Edit your header.component.html to look like the following:

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

Angular knows that when it receives a click, to run the function (either called login or logout). So, let's define those methods so it can use them. Add the following in your header.component.ts file, underneath your ngOnInit but still inside of your component.

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

Let's also, have nameToDisplay start out as an empty string. Your whole header.component.ts file should look like this:

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 = '';
  }

}

Now, open up your app in the browser, and click login and type your name. Make sure that it correctly displays your name, and that when you click logout it clears your name.

Next, we'll break down the Angular Component.

Breaking down the Component