# Homework WK3

## Challenges

* [ ] [Challenge - Data Binding](untitled/data-binding-challenge)
* [ ] [Challenge - Login Page](untitled/login-page-challenge)
* [ ] [Challenge - Angular Routing](untitled-1/routing-challenges)

## Angular Structural Directives

{% embed url="https://www.youtube.com/watch?v=LtT01ZCHRjk" %}

## 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>.**&#x20;_&#x20;This is useful for login page, register pages, search bars and other forms that require user specific input.\


{% tabs %}
{% tab title="Component" %}
Our component

{% code title="my-component.ts" %}
```typescript
Import { Component } from "@angular/core"; (

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

export class MyComponent {
  name = ""
}

```
{% endcode %}

**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.
{% endtab %}

{% tab title="Template" %}
Out template for the component

{% code title="my.component.html" %}
```
<input [(ngModel]="name" >
```
{% endcode %}

**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.&#x20;
{% endtab %}
{% endtabs %}

{% embed url="https://www.youtube.com/watch?v=CacMOuzTiJU" %}



\
\






