Scribd
Upload
16 views

Unit II

Uploaded by

srihitha1403
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

Unit II

Uploaded by

srihitha1403
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Data binding

Data binding is the most important feature of Angular. It allows for defining communication
between a component and the DOM. In Angular, there are two types of Data Binding.

1. One-Way Data Binding


2. Two-Way Data Binding

Prerequisites

Basic knowledge of Angular

One-Way Data Binding

One-way data binding is unidirectional. You can only bind the data from component to the
DOM or from DOM to the component.

From Component -----> DOM

Interpolation:{{ value}}

Allows users to bind a value to an HTML element.

Let's consider an example using interpolation technique.

app.component.ts file

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


2.
3. @Component({
4. selector: 'app-root',
5. templateUrl: './app.component.html',
6. styleUrls: ['./app.component.css']
7. })
8. export class AppComponent {
9. companyName:string='Just Compile';
10. }

In the above shared snapshot, I have one property, ‘CompanyName’, of type string which
will bind to the View, enclosed in double curly braces: {{property Name}}.

app.component.html file

1. <div class="container" style="margin-top: 180px;text-align: center">


2. <h2>Company Name
3. <span style="color:#ff4081;">
4. {{ companyName }}
5. </span>
6. </h2>
7. </div>
In app.component.html file, we use ‘companyName’ to display its value. Here, Binding data
is done from component to the view. If value changes in the component it will be reflected in
the view.

Property Binding [property]=’value’

Property binding is used to bind values to the DOM properties of the HTML elements.

Let’s consider an example for Property Binding which will create a property named as
‘companyWebsite’ of type string and assign value to that string.

app.component.ts file

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


2.
3. @Component({
4. selector: 'app-root',
5. templateUrl: './app.component.html',
6. styleUrls: ['./app.component.css']
7. })
8. export class AppComponent {
9. companyWebsite:string='https://justcompile.com/';
10. }

app.component.html file

1. <div class="container" style="margin-top: 180px;text-align: center">


2. <h2><a [href]='companyWebsite'style="color:#ff4081;" target="_blank">
3. Just Compile</a></h2>
4. </div>
In the above example, we bind the value of ‘companyWebsite’ to the href property of the
anchor tag.

From DOM-----> Component

Event Binding :(event)=”fun()”

With the help of Event Binding, we can bind data from DOM to Component.

Let’s consider an example.

app.component.ts file

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


2.
3. @Component({
4. selector: 'app-root',
5. templateUrl: './app.component.html',
6. styleUrls: ['./app.component.css']
7. })
8. export class AppComponent {
9. companyWebsite:string='https://justcompile.com/';
10. companyBlogs:string;
11. isShow:boolean;
12. constructor(){
13. this.isShow=false;
14. }
15. show(){
16. this.companyBlogs='http://blogs.justcompile.com/';
17. this.isShow=true;
18. }
19. }

app.component.html file

1. <div class="container" style="margin-top: 180px;text-align: center">


2. <div class="row">
3. <h2>
4. <a [href]='companyWebsite'style="color:#ff4081;" target="_blank">Ju
st Compile</a>
5. </h2>
6. </div>
7. <div class="row">
8. <button (click)='show()'class="btn btn-defualt">Show Blogs</button>
9. </div>
10. <div class="row">
11. <h2>
12. <a *ngIf='isShow'[href]='companyBlogs'style="color:#ff4081;" target=
"_blank">{{companyBlogs}}</a>
13. </h2>
14. </div>
15. </div>

Let’s explore the above code line by line.

1. In the TypeScript file, I have two properties - ‘companyBlogs’ of type string and
‘isShow’ of type boolean.
2. After that, in the HTML file, I have one click event, i.e., show().
3. We need to handle the show() event into TS file.
4. When the button is clicked, I am displaying the ‘companyBlogs’ value.

Two-Way Data Binding

Two-Way Data Binding helps us to exchange data from both sides, i.e., from component to
view and from view to the component.

Have you ever heard the word ngModel and its famous ‘Banana In The Box’ syntax? The
syntax helps us quickly recognize how to properly write two-way data binding.

Let’s consider the below figure, which describes Banana In The Box syntax.
Let’s try to understand the above syntax by doing some code.

app.component.ts file
1. import { Component } from '@angular/core';
2.
3. @Component({
4. selector: 'app-root',
5. templateUrl: './app.component.html',
6. styleUrls: ['./app.component.css']
7. })
8. export class AppComponent {
9. email:string='';
10. constructor(){
11. }
12. }

app.component.html file

1. <div class="container" style="margin-top: 180px;text-align: center">


2. <div class="form-group row col-md-12">
3. <label for="Email" class="col-md-4">Email</label>
4. <div class="col-md-8">
5. <input type="text" class="form-control" [(ngModel)]='email' placehold
er="Enter Your Email.">
6. </div>
7. <br/>
8. <br/>
9. <span>
10. <h4 >Your Email is :
11. <span style="color:#ff4081;"> {{email}}</span>
12. </h4>
13. </span>
14. </div>
15. </div>

That’s it. Now run the application.


Ohhhh😶!This is not what we want.

Why the above error?

“Template Parse Error”

Read the below line carefully:

Can't bind to 'ngModel' since it isn't a known property of 'input'.

In order to use two-way data binding for form inputs you need to import
the FormsModule package in your Angular module. FormsModule provides additional
directives on form's elements, including input, select, etc. That's why it's required and this is
what the above line wants to say.
So, let’s import FormsModule into our app.module.ts file,

1. import { BrowserModule } from '@angular/platform-browser';


2. import { NgModule } from '@angular/core';
3.
4. import { AppRoutingModule } from './app-routing.module';
5. import { AppComponent } from './app.component';
6. import { FormsModule } from '@angular/forms';
7. @NgModule({
8. declarations: [
9. AppComponent,
10. ],
11. imports: [
12. BrowserModule,
13. AppRoutingModule,
14. FormsModule
15. ],
16. providers: [],
17. bootstrap: [AppComponent]
18. })
19. export class AppModule { }

Now run the application.

You might also like