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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - https://code-sample.com and https://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions