Welcome folks today in this blog post we will be looking on the interpolation, event binding and the two way data binding in angular 14 using typescript in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular project using the below command as shown below
ng new sampleproject
cd sampleproject
And after that you will see the below directory structure of the angular app as shown below
Interpolation Expression in Angular
Now guys we will be looking at a very simple example of interpolation inside angular. First of all we need to declare the variable inside the app.component.ts file
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import {Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = "sharing data" name = "John Williamson" } |
As you can see we have the name variable which has the static value assigned to it. Now we can print this value inside the html by using the {{}} interpolation expression as shown below inside the app.component.html file
app.component.html
|
1 |
<p>The name is: {{name}}</p> |
Similarly we can have also objects and arrays as shown below to print with the help of interpolation expression
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import {Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = "sharing data" users = ['Glenn Philips','Devon Conway','Tim Southee','Blair Tickner'] } |
As you can see we have the array of users in which we have four names and now we can use the ngFor directive inside the html to loop through these names and display it inside the app.component.html file
app.component.html
|
1 2 3 |
<ul *ngFor="let u of users"> <li>{{u}}</li> </ul> |
Event Binding in Angular
Now we will be looking how we can attach various events to the dom elements such as the button with the help of event binding inside angular. So inside the app.component.html file copy paste the below code
app.component.html
|
1 2 3 |
<p>The value of counter is: {{counter}}</p> <button (click)="incrementCounter()">Increment Counter</button> |
As you can see we have the simple button of increment counter variable whose initial value is 0 and we are printing the value of counter with the help of the interpolation expression and we have assigned the click event listener to the button with the help of the event binding expression and we are executing the incrementCounter() method now we need to define this method inside the app.component.ts file as shown below
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import {Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = "sharing data" counter = 0 incrementCounter(){ this.counter += 1 } } |
As you can see inside the method we are incrementing the value of the counter variable by 1. And now if you see the angular app inside the browser it will look as shown below
And now we need to include the angular forms module inside the app.module.ts file as shown below if you want to work with forms as shown below
Two Way Data Binding
Now we will be looking how we can implement two way data binding inside the input fields
app.component.html
|
1 2 |
<p>The entered name is: {{name}}</p> <input type="text" [(ngModel)]="name"> |
As you can see we have attached the ngModel two way data binding expression and we have initialized the value to a variable of the name
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import {Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = "sharing data" name:any } |
Validating User Data in Input Field
Now we will be validating user data inside the input field with the help of the event function as shown below in the app.component.html file
app.component.html
|
1 2 |
<p>The entered name is: {{name}}</p> <input type="text" [(ngModel)]="name" (ngModelChange)="validateName($event)"> |
As you can see we have attached the ngModelChange event function where we have attached the validateName() and inside it we are passing the actual value typed. Now we need to define these functions as shown below in the app.component.ts file as shown below
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import {Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = "sharing data" name:any validateName(value:any){ if(value == "Kane"){ alert("Username already taken") } } } |
As you can see we are checking the value typed by the user inside the if condition and based upon the value we are showing the alert message to the user as shown below
