python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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';

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

  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.username = '';
    this.count = this.users.length;

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

The result looks like –

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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions