Homework WK3

Challenges

• Challenge - Data Binding

• Challenge - Login Page

• Challenge - Angular Routing

Angular Structural Directives

Angular 2 way data-binding

In angular in order to accept user input we need to use two-way data binding, between the HTML and Component. We use [(ngModel)] to bind a value from the <input>. This is useful for login page, register pages, search bars and other forms that require user specific input.

Component

Our component

my-component.ts

Import { Component } from "@angular/core"; (

@Component({
  selector: "my-component",
  templateURL: './my.component.html'.
  styles: [['h1 { font-weight: normal; }']]   
})

export class MyComponent {
  name = ""
}

Line 10: the name property the above component is going to store the value from the user <input>, however right now it is just an empty string.

Template

Out template for the component

my.component.html

<input [(ngModel]="name" >

Notice the name in quotes, that is referring to the name on the component in my.component.html. This is how you receive information from the user with angular's two way data binding.