# Homework WK3

## Challenges

* [ ] [Challenge - Data Binding](https://softstack-factory.gitbook.io/mean-stack/angular/wk3/untitled/data-binding-challenge)
* [ ] [Challenge - Login Page](https://softstack-factory.gitbook.io/mean-stack/angular/wk3/untitled/login-page-challenge)
* [ ] [Challenge - Angular Routing](https://softstack-factory.gitbook.io/mean-stack/angular/wk3/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.<br>

{% 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>" %}

\ <br>