View video tutorial
ANGULAR Data Binding
ANGULAR
Angular data binding is a mechanism that provides data synchronization between an Angular component and its view.
Angular Data Binding Example
➔ This example shows how data binding works between an Angular component and its view.
Create a project by ng new databinding01 command.
ng new databinding01
app.module.ts file
Copy this file content to the target file.
Example
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Copy the code and try it out practically in your learning environment.
app.component.ts file
Copy this file content to the target file.
Example
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'databinding01';
public sum: number = 0;
add(a: any, b: any) {
this.sum = Number(a.value) + Number(b.value);
}
num1: number = 0;
num2: number = 0;
product: number = 0;
mul() {
this.product = Number(this.num1) * Number(this.num2);
}
}
Copy the code and try it out practically in your learning environment.
HTML app.component.html File
Copy this file content to the target file.
Example
<div class="container text-center my-4">
<div class="row">
<div class="col">
<h2>Add Two number</h2>
<form>
<div class="mb-3">
<input type="text" #x class="form-control" id="n1" placeholder="Enter number" />
</div>
<div class="mb-3">
<input type="text" #y class="form-control" id="n2" placeholder="Enter number"/>
</div>
<input type="button" (click)="add(x, y)" class="btn btn-success" value="Add Number" />
</form>
</div>
<div class="col">
<h3>Sum is = {{ sum }}</h3>
</div>
</div>
</div>
<hr />
<div class="container text-center my-4">
<div class="row">
<div class="col">
<h2>Multiply Two number</h2>
<form>
<div class="mb-3">
<input type="text" [(ngModel)]="num1" name="num1" class="form-control" placeholder="Enter number" id="n3" />
</div>
<div class="mb-3">
<input type="text" [(ngModel)]="num2" name="num2" placeholder="Enter number" class="form-control" id="n4" />
</div>
<input type="button" (click)="mul()" class="btn btn-primary" value="Multiply" />
</form>
</div>
<div class="col">
<h3>Product of {{ num1 }} and {{ num2 }} = {{ product }}</h3>
</div>
</div>
</div>
Copy the code and try it out practically in your learning environment.
HTML index.html File
Copy this file content to the target file.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Databinding01</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Copy the code and try it out practically in your learning environment.
Output
Run project by ng serve in command line (from inside project directory).
program output