Bindings

Angular Bindings

In the previous example of using Models in Angular, we have seen how independently models work in the architecture, but we use Bindings in the view to refer the model object. Though bindings provides just a connection to Model but there are several types of Bindings to make the functionality more crisp and easier to implement.

Types of Bindings (refer the BookStoreView.html below):

  1. Interpolation {{text}}
  2. Event Bindings (click)
  3. Property Bindings [value]
  4. Two-way Model Bindings [(ngModel)]

BookStoreView.html

  <table style="border: blue; border: 1px;">
    <tr>
      <td>
        Book ID
      </td>
      <td>
        <input [(ngModel)]="BookModel.BookID" type="text" /> 
      </td> 
    </tr>

    <tr>
      <td>
        Book Name
      </td>
      <td>
        <input [(ngModel)]="BookModel.BookName" type="text" /> 
      </td> 
    </tr>

    <tr>
      <td>
        Book Author
      </td>
      <td>
        <input [(ngModel)]="BookModel.BookAuthor" type="text" /> 
      </td> 
    </tr>

    <tr>
      <td>
        Book Price
      </td>
      <td>
        <input [(ngModel)]="BookModel.BookPrice" type="text" /> 
      </td> 
    </tr>

    <tr>
      <td>
        
          <input (click)="Submit()" type="button" value="Submit" /> <br>

      </td> 
    </tr>
  </table>


  <table class="gradienttable">
    <tr>
      <td>Book ID</td>
      <td>Book Name</td>
      <td>Book Author</td>
      <td>Book Price</td>
    </tr>

    <tr *ngFor="let book of LstBookModel"> 
        <td>{{book.BookID}}</td>
        <td>{{book.BookName}}</td>
        <td>{{book.BookAuthor}}</td>
        <td>{{book.BookPrice}}</td>
    </tr>

</table>

<table>
  <tr>
    <td>
      Property Binding:The book author is: <input type="text" [value]="BookModel.BookAuthor">  
    </td>
  </tr>
</table>

Interpolation {{ text }}

The expression in the interpolation will be bind to the registered component and display on the view accordingly.

Event Bindings (click)

It is bind to input control and triggered when a certain event occurs eg: Button Click.

<input (click)="Submit()" type="button" value="Submit" /> <br>

The event bindings goes under round brackets (<event>) which can be handled in the Component.

Submit()
  {
	//Write something here…
  }

Property Bindings [value]

The property bindings are for reading the values from the source and goes under square brackets

[ <value> ]

Property Binding:The book author is: 
<input type="text" [value]="BookModel.BookAuthor">  

Two-way Model Bindings [(ngModel)]

Two-way bindings enables the Source-Target properties as and when the value changes. In Angular, two-way bindings geos under [( ngModel )].

In the below example, we bind the textbox to the BookModel object using ngModel.

<input [(ngModel)]="BookModel.BookPrice" type="text" /> 

UI

Prev
Next