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; } ]
