Data Binding in Angular
Duration : 00:03:00
Data Model
In Angular, the data model represents the application's underlying data and business logic. It defines how data is structured and manipulated within the application.Example
export interface Product {
id: number;
name: string;
price: number;
}
HTML View
The HTML view in Angular is the user interface that displays the data from the data model. It is created using Angular templates and is responsible for rendering content to the user.Example
<div>
<h1>{{ product.name }}</h1>
<p>Price: {{ product.price }}</p>
</div>
The ng-model Directive
In AngularJS (not the latest Angular version), the ng-model directive is used to bind an input element's value to a property in the data model, allowing for two-way data binding.Example
<input ng-model="productName" />
<p>{{ productName }}</p>
Event Binding
Event binding in Angular allows you to listen to and respond to DOM events (e.g., clicks, keypresses) by invoking methods or performing actions in your component.Example
<button (click)="onButtonClick()">Click me</button>
Two-way Binding
Two-way binding is a feature in Angular that combines property binding and event binding, ensuring that changes in the UI are automatically reflected in the data model and vice versa.Example
<input [(ngModel)]="productName" />
<p>{{ productName }}</p>
AngularJS Controller
In AngularJS, a controller is a JavaScript function that manages the data and behavior of a specific part of the application. It is used to set up the initial state and handle user interactions.Example
app.controller('ProductController', function($scope) {
$scope.productName = 'AngularJS Book';
});
Still have some questions? Let's discuss.
CONTACT US
Unlimited live sessions
Quick notes
Hands-on labs
Real-world projects
Interview prep