Angular 5 vs Angular 6

Data Binding in Angular 5 and 4 Using Visual Studio Code

Learning Outcomes –
ü  What Is Data Binding in Angular 5 and 4?
ü  How To Bind Select Dropdown List in Angular 5?
ü  How to bind dropdown list using Angular 5?
ü  Angular 5 Interpolations, Property Binding & Event Binding Examples
Stayed Informed – Angular 4 and Angular 5 Docs

What Is Data Binding?
The Data binding is one of the most powerful and important features in a development language.

Types of Binding in Angular 5 and 4 –
1.      Interpolation
2.      Property Binding
3.      Two-Way Data Binding
4.      Event Binding
The examples for Angular data binding -

Interpolation - The format for defining interpolation in a template is - {{ propertyName }}
<input type="submit" class="default" value="{{username}}">

Property Binding - 
<input type="submit" class="default" [value]="username">

Two-Way Data Binding
<input type="text" class="default" name="item" [(ngModel)]= "username">
<span>User Name - {{ username }}</span>

Event Binding -
// employee.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {

  //Property
  count: number = 5;
  users = [];
  username: string = 'Anil Singh';

  //Employee Aray List
  employees =['Anil', 'Sunil','Alok', 'Raju','Sunny'];

  ngOnInit() {
    this.count = this.users.length;
  }

  addItem() {
    this.users.push(this.username);
    this.username = '';
    this.count = this.users.length;
  }
}


// employee.component.html
<h2>Select Employee -</h2>
<div>
  <select>
    <option *ngFor="let emp of employees">{{emp}}</option>
  </select>
</div>
<form>
  <h2>Add User - </h2>
  <div>
    <input type="submit" class="default" value="{{username}}" (click)="addUser()">
  </div>
</form>

The result looks like –

I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^