notes:Get Started with Angular

https://egghead.io/courses/get-started-with-angular
https://egghead.io/lessons/angular-2-say-hello-world-to-angular-2
notes:
1 install angular js
2 simple.ts define <app-simple-form>
app.component.ts use <app-simple-form>
selector: 'app-simple-form'  //it is outest(name) for template 
template: ``
3
<input #myInput type="text"> 
button (click)="onClick(myInput.value)" //  bind deal with function and pass parameter
export class SimpleFormComponent implements ... {
onClick(value) { //deal with function
console.log(value);
}
}
4: it is the same with 3
5 import ./Mail.service //import
[providers]: [MailService]  //providers
template: `
{{mail.message}}  //use
`
export class SimpleFormComponent implements ... {
constructor (private mail:MailService) //define
}
6
remove import MailService
template: `
{{mail.message}}  //use
`
providers: 
[
{provide:'mail', useClass:MailService}
{provide:'api', "http://localhost:3000"}
]
export class SimpleFormComponent implements ... {
constructor (
@Inject('mail'),private mail
@Inject('api'),private api)  //Inject providers(don;t use import service)
}
7 *ngFor ="let message of mail.messages"
8 @Input (pass value from app.component.ts to simple.ts)
<app-simple-form *ngFor ="let message of mail.messages">// it is cool. ngFor pass value message to app-simple-form
{{message}}
[message]="message"
</app-simple-form>
template: `
{{message}}  //use (passed value)
`
export class SimpleFormComponent implements OnInit {
@input message //receive [message] pass value
}
9 [(ngModel)]
template
'{{message}}
<input #myInput type="text" [(ngModel)]="message"> 
'


export class SimpleFormComponent implements OnInit {
@input message //the message(ngModel) is input
}
10 @output
<app-simple-form *ngFor ="let message of mail.messages">// it is cool. ngFor pass value message to app-simple-form
{{message}}
[message]="message"
(update)="onUpdate(messge.id)"  //bind function like (click)
</app-simple-form>


export class AppComponent {
onUpdate(event) {
this.message = this.messages.map (m=>
m.id===id
? {id, text}
: m
}
}


template: `
<input #myInput type="text" [(ngModel)]="message"> 
<button (click)="update.emit{{text:message}}">Click me!</button> //trigger emit. pass "text:message" to (update),then call onUpdate
`
export class SimpleFormComponent implements OnInit {
@input() message //receive [message] pass value
@output() update = new EventEmitter();
}


11 css
12 css
<input
[ngClass]="{mousedown:isMousedown}"  //use css with variable to control
(mousedown)="isMousedown = true"
(mouseup)="isMousedown = false"
>


styles: [
.mousedown { //css with "." to start
border: 2px solid green;
}
]