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