Data Binding in Angular 6

Data binding is a powerful feature in Angular, which allows us to communicate between the component and its view. Data Binding can be either one-way data binding [Angular Interpolation / String Interpolation, Property Binding, Event Binding] or two-way data binding.

In one-way data binding, the value of the Model is inserted into an HTML (DOM) element and there is no way to update the Model from the View. In two-way binding automatic synchronization of data happens between the Model and the View (whenever the Model changes it will be reflected in the View and vice-versa)

Angular supports four types of Data binding

1. Interpolation / String Interpolation (one-way data binding)
2. Property Binding (one-way data binding)
3. Event Binding (one-way data binding)
4. Two-Way Binding

Dollar sign event will simply be the data emitted with that event.So input and click are default events provided by the dorm you could say. And they ship some data when they are fired the click event gives us an object which for example holds the coordinates where we clicked and the event also gives us some data or some information about the event that we can capture this data with Dollar Sign event passed.

app.component.html

<div class="conatiner">


    <!--Interpolation / String Interpolation (one-way data binding)-->
    <div class="col-md-4 form-group">
        <h1 class="text-center">{{title}}</h1>
        <ul>
            <li>{{5+5}}</li>
            <li *ngFor="let cur of currency">
                {{ cur }}
            </li>
        </ul>
    </div>
    <div class="col-md-4 form-group">
        <input class="form-control" type="text" #msg (input)="0">
        <h4>Input value : {{msg.value}}</h4>
    </div>


    <!--Property Binding (one-way data binding)-->
    <div class="col-md-4 form-group">
            <img [src]="timage" width="100%">
            <br/>
            <button class="btn btn-success" [disabled]="buttonStatus === '1'">My Button</button>
    </div>


    <!--Event Binding (one-way data binding)-->
    <div class="col-md-4 form-group">
            <button class="btn btn-primary" (click)="show()">Show Me</button> &nbsp;&nbsp;
            <button class="btn btn-danger" (click)="hide()">Hide Me</button>
            <h2 *ngIf="display">{{myname}}</h2> 
    </div>


    <!--Two-Way Binding-->


    <!-- [value]=”username” - Binds the expression username to the input element’s value property
        (input)=”expression” - Is a declarative way of binding an expression to the input element’s input event (yes there’s such event)
        username = $event.target.value - The expression that gets executed when the input event is fired
        $event - Is an expression exposed in event bindings by Angular, which has the value of the event’s payload 
        (input)="username = $event.target.value" is the same as:  [(input)]="username" -->


    <div class="col-md-4 form-group">


        <!-- There’s one directive in Angular >= 2.x that implements two-way data binding: ngModel. On the surface, 
            it looks and behaves as magical as we’re used to (from AngularJS). 
            But how does it really work? It’s not that hard really. 
            In fact, it turns out that two-way data binding really just boils down to event binding and property binding. -->
        <input [(ngModel)]="username">
        <p>Input value : Hello {{username}}!</p>



        <!-- since version 2.x, two-way data binding in Angular really just boils down to property binding and event binding. 
            There is no such thing as two-way data binding. Without the ngModel directive, we could easily implement two-way data binding just like this: 
            This expression assigns the value of $event.target.value to the username model.-->
        <input [value]="username" (input)="username = $event.target.value">
        <p>Input value : Hello {{username}}!</p>


    </div>


    <div class="col-md-4 form-group">
        <!-- Safe Navigation Operator ( ?. ) in Interpolation 
        Safe Navigation Operator ( ?. ) is an angular template expression operator, 
        safe navigation operator prevents angular from throwing an exception when there is a null or undefined property. 
        Safe Navigation Operation “?.” can also be called as “Elvis Operator”. 
        Elvis Operator prevents the angular engine from complaining if you try to access values on objects that are null or undefined.-->
        <ol>
            <li *ngFor="let user of userLists">
                {{user?.name}} : {{user?.id}}
            </li>
        </ol>
    </div>

</div>

app.component.ts

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



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Data Binding';
  currency = ['Rupees', 'Dollar', 'Euro', 'Pound'];
  username = 'piyali';
  userLists = [
    {
      name : 'User 1',
      id : '123456'
    },
    {
      name : 'User 2',
      id : '234324'
    }
  ];
  timage = 'https://i.ytimg.com/vi/_UbDeqPdUek/maxresdefault.jpg';
  buttonStatus = '1';
  display = false;
  myname = '';


  show() {
    this.display = true;
    this.myname = 'Piyali Das';
  }
  hide() {
    this.display = false;
    this.myname = '';
  }
}

app.module.ts

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


import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }