Input Output และ ตัวดำเนินการนิพจน์ของ template ใน Angular

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <input #phone placeholder="phone number">
  <button (click)="callPhone(phone.value)">Call</button>
  `,
})
export class AppComponent  { 

  callPhone(phonenumber:string){
    console.log(phonenumber);
  }

}

<input #phone placeholder="phone number">

<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <input #phone placeholder="phone number">
  <button (click)="callPhone(phone)">Call</button>
  `,
})
export class AppComponent  { 

  callPhone(phonenumber:any){
    console.log(phonenumber);
    console.log(typeof phonenumber);
    console.log(phonenumber.value);
    console.dir(phonenumber);   
  }

}

<input ref-fax placeholder="fax number">
<button (click)="callFax(fax)">Call</button>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <img [src]="iconUrl"/>
  <button (click)="onSave()">Save</button>
  <hr>
  <p myHighlight (myClick)="clickMessage=$event">
  Highlight me!</p>
  {{clickMessage}}
  <hr>
  <staff [myHighlight]="color" (myClick)="clickMessage2=$event"></staff>
  {{clickMessage2}}
  `,
})
export class AppComponent  { 
  color:string;
  clickMessage:string;
  clickMessage2:string;
  iconUrl:string;

  constructor(){
    this.iconUrl = "mypic.png"
    this.color = "blue";
  }
  onSave(){
    console.log("click");
  }

}

<img [src]="iconUrl"/>
<button (click)="onSave()">Save</button>

<p myHighlight (myClick)="clickMessage=$event">Highlight me!</p>

<staff [myHighlight]="color" (myClick)="clickMessage2=$event"></staff>

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { StaffpComponent } from './components/staff.component';

import { HighlightDirective } from './directives/highlight.directive';
import { ClickDirective } from './directives/myclick.directive';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ 
    AppComponent,
    StaffpComponent,
    HighlightDirective,
    ClickDirective 
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({ 
    selector: '[myHighlight]' 
})
export class HighlightDirective {
  constructor(private el: ElementRef) { }

  @Input() defaultColor: string;
  @Input('myHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || this.defaultColor || 'red');
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }
  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

@Input() defaultColor: string;
@Input('myHighlight') highlightColor: string;

<staff [myHighlight]="color" (myClick)="clickMessage2=$event"></staff>

<staff [myHighlight]="color" defaultColor="violet" (myClick)="clickMessage2=$event"></staff>

<staff [myHighlight]="color" [defaultColor]="color" (myClick)="clickMessage2=$event"></staff>

@Input() myHighlight: string;

<p myHighlight (myClick)="clickMessage=$event">Highlight me!</p>

@Input() defaultColor: string;
@Input() highlightColor: string;
@Input() myHighlight: string;

<p myHighlight [highlightColor]="color">test</p>

<p [myHighlight]="color">test</p>

@Input() defaultColor: string;
@Input('myHighlight') highlightColor: string;

import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';

@Directive({
    selector: '[myClick]'
})
export class ClickDirective {
  @Output('myClick') clicks = new EventEmitter<string>(); // 

  toggle = false;

  constructor(el: ElementRef) {
    el.nativeElement
      .addEventListener('click', (event: Event) => {
        this.toggle = !this.toggle;
        this.clicks.emit(this.toggle ? 'Click!' : '');
      });
  }
}

@Output('myClick') clicks = new EventEmitter<string>();

@Directive({ 
    selector: '[myHighlight]',
    inputs:['defaultColor','highlightColor:myHighlight'] 
})

@Directive({
    selector: '[myClick]',
    outputs:['clicks:myClick']
})

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div>{{title | uppercase}}</div>
  <hr/>
  <div>{{title | uppercase | lowercase}}</div>
  <hr/>
  <div>My's birthday is {{ birthday | date:"MM/dd/yy" }} </div>
  <hr/>
  <div>{{myObject | json}}</div>
  `,
})
export class AppComponent  { 

  title:string;
  birthday:Date;
  myObject:{};
  constructor(){
    this.title = 'Title through uppercase pipe';
    this.birthday = new Date(2017, 3, 10); 
    this.myObject = {
      id:1,name:'john'
    };
  }

}

<div>{{title | uppercase}}</div>

<div>{{title | uppercase | lowercase}}</div>

<div>My's birthday is {{ birthday | date:"MM/dd/yy" }} </div>

<div>{{myObject | json}}</div>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div>The title is {{title}}</div>
  <div>myObject age property is {{myObject.age}}</div>
  <div *ngIf="myObject">myObject age property is {{myObject.age}}</div>
  <div>myObject age property is {{myObject && myObject.age}}</div>
  <div>myObject age property is {{myObject?.age}}</div>
  `,
})
export class AppComponent  { 

  title:string;
  myObject:{};
  constructor(){
    // this.myObject = {
    //     id:1,
    //     name:'john'
    // };
  }

}

<div>The title is {{title}}</div>

<div>myObject age property is {{myObject.age}}</div>

<div *ngIf="myObject">myObject age property is {{myObject.age}}</div>

<div>myObject age property is {{myObject && myObject.age}}</div>

<div>myObject age property is {{myObject?.age}}</div>