Binding with Angular v4 And Above

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  // Added for Interpolation
  title = 'Binding APP';

  // Added for Property Binding
  btntext = 'Add data';

  // Added for Style Binding
  styleProperty: string = "red";

  // Added for Class Binding
  classproperty: boolean = true;

  // Added for Event Binding   
  secondbuttontext = "new button";

  // Added for Two Way Binding
  inputdata: string = 'My data';

  // Using Event binding update the value of button
  changevalue() {
    this.secondbuttontext = "Update data";
  }
}

<div style="text-align:left;border: 1px solid">
    <h3 style="color:blue">Using Interpolation</h3>
    <!-- Interpolation example: here title are showing using Interpolation -->
    <h2>Welcome to {{ title }}!</h2>
    <hr size="4">
    <h2>One way binding (From Component to template)</h2>
    <!-- One way binding: Type 1: From Component to template -->
    <!-- Property Binding -->
    <h3 style="color:blue">Property Binding Example</h3> <input type="button" [value]='btntext' />
    <h3 style="color:blue">Style binding</h3> <button [style.color]="styleProperty ? 'red' : 'green'">Red</button>
    <h3 style="color:blue">Class Binding</h3>
    <div [class.myclass]="classproperty">Class Heading</div>
    <h3 style="color:blue">attribute binding</h3>
    <table border=1>
        <tr>
            <td [attr.colspan]="1 + 1">One-Two</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
    <hr size="4">
    <h2>One way binding (From template to component)</h2>
    <!-- One way binding: Type 2: From template to component -->
    <!-- Event Binding -->
    <h3 style="color:blue">Event Binding Example</h3> <input type="button" [value]='secondbuttontext' (click)="changevalue();" />
</div>

<hr size="4"> <br>
<h2>Two way binding (Combination of Property and Event Binding)</h2>
<!-- two way binding with property and event binding combination --><span>Input Text: </span>
<input type="text" name="data" placeholder="modal data" [(ngModel)]="inputdata"> <br> <br>
 <span>{{ inputdata }}</span> <br>

// added for Interpolation
title = 'Binding APP';

<!-- Interpolation example: here title are showing using Interpolation -->
<h2> Welcome to {{ title }}! </h2>

btntext='Add data';

<!-- One way binding: Type 1: From Component to template -->
<!-- Property Binding -->
<h3 style="color:blue">Property Binding Example</h3>
<input type="button" [value]='btntext' />

// added for Style Binding
styleProperty: string = "red";

<h3 style="color:blue">Style binding</h3>
<button [style.color]="styleProperty ? 'red' : 'green'">Red</button>

As you can see, I have added the styleProperty variable which I have added in the typescript file, and in html we are showing the styles as style. color with the help of value style binding. If styleProperty has value it will show red text in the button otherwise it will show green text with the value text of the button.

Class Binding

app.component.ts

// added for Class Binding
classproperty: boolean = true;

app.component.html

<h3 style="color:blue">Class Binding</h3>
<div [class.myclass]="classproperty">Class Heading</div>

styles.css

.myclass {
    font-size: 28px;
}

As you can see above, I have added the classproperty variable which I have added in the typescript file, and in HTML we are showing the text with added style in the style.css file using class binding. If the class-property variable is true then my class CSS will show with the div text else the css will not apply.

Attribute Binding

app.component.html

<h3 style="color:blue">attribute binding</h3>

<table border="1">
  <tr>
    <td [attr.colspan]="1 + 1">One-Two</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

As you can see above, I am using the colspan attribute property of td as [attr. colspan] so here with the help of attribute binding the table cell (td) will use colspan property and the added data will show within two tds.

One-way Binding (From template view to component)

Event Binding

It’s another method of binding in Angular as below.

app.component.ts

// added for Event Binding   
secondbuttontext = "new button";

// Using Event binding update the value of button   
changevalue() {   
  this.secondbuttontext = "Update data";   
}  

app.component.html

<hr size="4"> <br>
<h2>One way binding (From template to component)</h2>
<!-- One way binding: Type 2: From template to component -->
<!-- Event Binding -->
<h3 style="color:blue">Event Binding Example</h3>
<input type="button" [value]='secondbuttontext' (click)="changevalue();"> 
Please click on the button to see the event binding 
<hr size="4"> <br>

As you can see above, I have added the second button text for the button. I have added (click) the change value method which I have defined in the typescript file. When you click on the button the previous button value text will change to new text which is in the changevalue method so here I am using Event Binding. With the help of the event, the button value text will be updated.

Two-Way Binding

It's another type of binding that is mostly used in Angular applications. It’s a combination of Property Binding and Event Binding. For example:

app.component.ts

// added for Two-Way Binding   
inputdata: string = 'My data';

app.component.html

<h2>Two way binding (Combination of Property and Event Binding)</h2>
<!-- Two-Way binding with property and event binding combination -->
<span>Input Text:</span>
<input type="text" name="data" placeholder="modal data" [(ngModel)]="inputdata">

<br>
<br>

<span>{{ inputdata }}</span><br>

As you can see above I have added an input data string variable within the typescript file and in the HTML file, I have used ngModel with both the binding, which means property and event binding. I am showing the input data with interpolation with the span. When the view shows the first time in the application the value of input data will display within input control and span which we have added in the app.componet.ts file

When we add any text with the input control the added text will show with span and within input control so here we are using Two-Way Binding.

When we use ngModel it will run successfully or show an error. Yes, it will show the error because we can use ngModel with FormsModule only so it will show the below error.

Error

We have to use FormsModule within the app.module.ts file to solve the error.

app.module.ts

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

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

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

When we use FormsModule the ngModel will work properly so with the help of [(ngModel)] we can implement the Two-Way Binding.

Now, according to all the above binding, the application will show the below output when we run as localhost:4200 which is the default.

Output

You need to know more information about Binding. We have a few more types of Property and Event Binding.

Property Binding

1. Element property

<img [src]="myImageUrl">

Here src is the element property that is used to get the URL of the image.

2. Component property

<child-component [childdata]="parentdata"></child-component>

Here we are using @input decorator by which we are passing the parent component value to the child component.

3. Directive property

<div [ngClass]="{active: isActive}"></div>

Here we are using the Built-in directive ngClass which we are using for applying the active class if isActive is true.

Event Binding

1. Element Event

<button (click)="getdata()">GetData</button>

Here click is the element event by which we are using the getdata method.

2. Component Event

<div>
  <!-- Child component -->
  <input [ngModel]="count">
  <button (click)="increment()">+</button>
</div>

Here we are using EventEmitter for updating the value of count which is @Input() so with the help of Component Event we are showing the value of count.

3. Directive Event

It's also another type of Event Binding that we will use with the Directive and Output EventEmitter.

The details about all the above types of Property and Event Binding will be in my later tutorial.

Conclusion

So we can say we have many bindings that we can use with our Angular application and with the help of these we can use the required data according to our requirements.

I hope you liked this -- please share it if you did. I will define the Angular Routing in my later tutorial which is one of the main features in Angular applications.