angular databinding

Currently enrolled in Udemy’s- the complete guide to angular 2. Notes from Lesson 1 and 2

Link to Assignment 2 - Databinding

Databinding

Output Data to Browser:

• String Interpolation

  {{ data }}

  • Example:

    <p>{{ propertyText }}</p>

• Property Binding

  [html property] = "data"

  • Example:

    # html inner text
    <p [innerText]="myElement"></p>
        
    # button example
    <button class="btn btn-primary" 
    [disabled]="conditionalBoolean">Add Server</button>
    

React to User Events from Browser

• Event Binding

  (event) = "expression"

  • Example:

    # button example
    <button class="btn btn-primary" 
    [disabled]="conditionalBoolean"
    (click)="onMethodEvent()">Add Server</button>
    
    # input example
    <input
    type="text"
    class="form-control"
    (input)="onMethodEvent($event)">
    

Two Way Binding

[(ngModel)] = "data"

• Example:

  # input example
  <input
  type="text"
  class="form-control"
  [(ngModel)]="propertyName">