AngularJS Data Binding
AngularJS Data Binding Tutorial
Data binding shows how to bind your data from component to HTML DOM element. It allows interacting easily with the application. In this tutorial you will learn how to bind component property to other elements such as template, CSS etc.
Table of Contents
Event binding
// src/app/app.component.html <h2>Event Binding</h2> <button class="btn btn-primary" (click)="showData($event)">Click Here</button>
// src/app/app.component.tsimport { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'My First APP in AngularJS14 '; clickMe($event: any){
alert("button is clicked!"); if($event) { console.log($event.target); console.log($event.target.value); } } }
Property binding
Property binding is used to bind the data from property of a component to DOM elements.
Two-way data binding
Two-way data binding is a two-way interaction, data flows in both ways (from component to views and views to component).
NgModel:
NgModel
is a standalone directive. ngModel directive binds form control to
property and property to form control. The syntax of ngModel is as
follows −
Let’s try to use ngModel in our test application.
Configure FormsModule in AppModule (src/app/app.module.ts)
// src/app/app.module.tsimport { FormsModule } from '@angular/forms'; @NgModule({
imports: [
BrowserModule,
FormsModule
]
})
export class AppModule { }
// src/app/app.component.html<!-- Page Content --> <div class="container"> <div class="row" class="col-lg-12 text-center" style="padding-top: 150px;"> <h1>Two way Data Binding Demo</h1>
<input type="text" [(ngModel)]="name" /> <h2>Hello {{ name }} </h2>
</div> </div>
Attribute binding
Attribute binding is used to bind the component property to HTML attributes.
In this example,
name property is bind to an attribute of a DOM element <input> tag.
Add the below code in app.component.ts file.
export class AppComponent { name : String = 'John'; // property
Add the below code in app.component.html file.
<input type="text" [value]="name" />
Style binding
Style binding, used to bind the property value from the component into the HTML style property.
Add the below code in app.component.ts file.
export class AppComponent { myParaColor = 'green';
Add the below changes in view test.component.html.
Add the below code in app.component.html file.
<h3 [style.color]="myParaColor"> Some sample style </h3>
Class binding
Class binding is used to bind the property value from component to HTML class property.
export class AppComponent {
myCSSClass = "red";
applyCSSClass = false;
Add the below code in app.component.html file.
<p [class] = "myCSSClass">This paragraph class comes from *myCSSClass* property of component </p> <p [class.blue]= "applyCSSClass">This paragraph class does not apply as it is set to false</p>
Result:
PracticeCode:
Let us implement all the concept learned in this tutorial in our User Component
Open command prompt and go to project root folder (cd myapp).
if not created user component, create one in myapp. using
C:\>myapp> ng generate component user
Create User interface (src/app/User.ts) and add id, username, email, email, phone, address.
export interface User { id: number; username: string; email: string; phone: string; address: string; }
Import User into UserComponent.
and
Create a User object, user as shown below in app.component.ts −
// src/app/user.component.ts import { Component, OnInit } from '@angular/core'; import { User } from '../User'; @Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.css'] }) export class UserComponent implements OnInit { title:string = "";
//user: User = {} as User; // initiate an empty object user: any= []; // initiate an empty object constructor() { } ngOnInit() { this.title = "User Details" ; this.user = {id:1,username:"JohnDoe", email: "john@test.com",phone:"12341234", address : "CA"} } }
Update the component template using user object, src/app/user/user.component.html as specified below − // src/app/user.component.html<!-- Page Content --> <div class="container"> <div class="row"> <div class="col-lg-12 text-center" style="padding-top: 20px;"> <div class="container" style="padding-left: 0px; padding-right: 0px;"> <div class="row"> <div class="col-sm" style="text-align: left;"> {{ title }} </div> <div class="col-sm" style="text-align: right;"> <button type="button" class="btn btn-primary">Edit</button> </div> </div> </div> <div class="container box" style="margin-top: 10px;"> <div class="row"> <div class="col-2" style="text-align: right;"> <strong><em>Username:</em></strong> </div> <div class="col" style="text-align: left;"> {{ user.username }} </div> </div> <div class="row"> <div class="col-2" style="text-align: right;"> <strong><em>Email:</em></strong> </div> <div class="col" style="text-align: left;"> {{ user.email }} </div> </div> <div class="row"> <div class="col-2" style="text-align: right;"> <strong><em>Phone:</em></strong> </div> <div class="col" style="text-align: left;"> {{ user.phone }} </div> </div> <div class="row"> <div class="col-2" style="text-align: right;"> <strong><em>Address:</em></strong> </div> <div class="col" style="text-align: left;"> {{ user.address }} </div> </div> </div> </div> </div> </div>
Add <app-user> select in app.component.html
// src/app/app.component.html <app-user></app-user>
Result:
Comments
Post a Comment