Angular 4 - The Basics 筆記（3）:Databinding

 

• String Interpolation

　　out put variables in the template file

1. add variables in name.component.ts

   export class HeaderComponent{
   
       //property
       appTitle: string = 'Angular';
       version: number = 4;
   
       //method
       getVersion(){
           return this.version;
       }
   }    

    

2. edit name.component.html template file to use the data

   <h3>{{ appTitle }}_{{ getVersion() }}</h3>

    

• Property Binding

1. edit name.component.ts

   status = false;

    

2. edit name.component.html

   <button [disabled]="status">Button</button>
   <!-- or do this-->
   <img [src]="bannerImg">

    

• Event Binding

1.  edit name.component.ts

   changeMessage(){
       this.message = 'new content has been posted!';
   }
   
   updateContent(event: any){
       this.content = event.target.value;
   }

2. edit name.component.html

   <p>message: <i> {{message}}</i></p>
   <p>preview: <i>{{content}}</i></p>
   
   <input type="text" (input)="updateContent($event)">
   <button  (click)="changeMessage()">post</button>

　　 

 

 

• Two-Way-Binding

 

1. edit name.component.html

   <input type="text" class="form-control" [(ngModel)]="content">
   <p>{{content}}</p>

2. edit name.component.ts

   content: string = 'empty';