notes:Get Started with Angular

https://egghead.io/courses/get-started-with-angularhttps://egghead.io/lessons/angular-2-say-hello-world-to-angular-2notes:1 install angular js2 simple.ts define <app-simple-form>app.component.ts use <app-simple-form>selector: 'app-simple-form' //it is outest(name) for templatetemplate: ``3<input #myInput type="text">button (click)="onClick(myInput.value)" // bind deal with function and pass parameterexport class SimpleFormComponent implements ... {onClick(value) { //deal with functionconsole.log(value);}}4: it is the same with 35 import ./Mail.service //import[providers]: [MailService] //providerstemplate: `{{mail.message}} //use`export class SimpleFormComponent implements ... {constructor (private mail:MailService) //define}6remove import MailServicetemplate: `{{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 css12 css<input[ngClass]="{mousedown:isMousedown}" //use css with variable to control(mousedown)="isMousedown = true"(mouseup)="isMousedown = false" >styles: [.mousedown { //css with "." to startborder: 2px solid green;}]