Data Binding

What is Data Binding

• Data binding in Angular is a powerful feature that allows you to establish a
connection between the user interface (UI) and the application's data model. It
ensures that changes in one area are automatically reflected in the other, creating a
dynamic and responsive user experience. Angular provides several types of data
binding, including one-way binding, two-way binding, and event binding, each
serving a distinct purpose.
• One-Way Data Binding: In one-way data binding, data flows in one direction, from
the component to the UI (view) or from the UI to the component, but not both
simultaneously. There are two types of one-way data binding:
• a. Interpolation: This involves displaying dynamic data within HTML templates
using double curly braces {{ }}.
• b. Property Binding: Property binding allows you to set an
element's property (e.g., src, value, disabled) to a value from the
component. It uses square brackets [property]="value".
• Two-Way Data Binding: Two-way data binding combines both
property binding and event binding. It establishes a bidirectional
connection between a component property and an input
element's value. It uses the [(ngModel)] directive, and it's
primarily used for forms.
• Event Binding: Event binding allows you to respond to user
interactions (e.g., button clicks, mouse events, keyboard events)
by invoking methods in the component. It uses parentheses
(event)="handler()".
 Splitting Application into Component

• Splitting an application into components is a fundamental aspect of software

design and architecture. This process is often referred to as
"componentization" or "modularization," and it involves breaking down a
large, complex software application into smaller, more manageable parts or
modules. Each module or component should have a well-defined purpose and
interface, making it easier to develop, test, maintain, and scale your
application.
 String Interpolation

• String Interpolation in Angular 8 is a One-way Data-Binding technique

that is used to transfer the data from a TypeScript code to an HTML template
(view). It uses the template expression in double curly braces to display the
data from the component to the view. String interpolation adds the value of a
property from the component to the HTML template view.
Example:
 Property Binding

• The Property Binding in Angular Application is used to bind the values

of component or model properties to the HTML element. Depending on
the values, it will change the existing behavior of the HTML element.
The syntax to use property is: [property] = ‘expression’
 Difference between property binding and
string interpolation
• Property binding and string interpolation are both techniques for displaying dynamic data in Angular
templates, but they work in slightly different ways and have distinct use cases. Here are the key
differences between property binding and string interpolation in Angular:
• Property Binding: Property binding uses square brackets [] to bind an HTML element property to a
component property or expression. The syntax is [property]="value".
• String Interpolation: String interpolation uses double curly braces {{ }} to insert the value of a
component property or expression directly into the HTML template. The syntax is {{ expression }}.
 Use Cases:

• Property Binding: Property binding is primarily used when you

want to set an HTML element's property (e.g., src, value,
disabled, class) based on a component property or expression.
It's ideal for dynamically changing element properties.
• String Interpolation: String interpolation is used to insert
dynamic values directly into the content of an HTML element. It's
typically used for text content, such as displaying variable values
within paragraphs, headings, or any other text-based elements.
 Output:

• Property Binding: Property binding sets the target property to

the value provided in the component. It doesn't change the
content of the HTML element but rather its attributes or
properties.
• String Interpolation: String interpolation replaces the content of
the element with the value of the expression. It directly affects
the visible text within the element.
 Binding with custom event

• Binding with custom events in Angular allows you to create and

handle custom events within your components. This feature
enables communication between parent and child components or
between unrelated components in your Angular application.
Custom events are useful when you want to emit and capture
events that are not part of the standard DOM events. Here's how
you can use custom event binding in Angular:
 What are binding property and events
• In Angular, property binding and event binding are two essential mechanisms
for connecting the application's data (i.e., properties) and user interactions
(i.e., events) with the UI (User Interface) elements in the templates. These
mechanisms enable dynamic data display and interactivity in your Angular
applications:
• 1. Property Binding:
• Purpose: Property binding allows you to set the properties or attributes of
HTML elements or Angular components based on values from your
component's TypeScript code.
• Syntax: Property binding uses square brackets [] to bind an HTML element's
property to a component property or expression. For example:
[property]="value"
• Use Cases: Property binding is commonly used for dynamically updating
element properties like src, value, disabled, class, or any other HTML
element property.

• 2. Event Binding:
• Purpose: Event binding allows you to respond to user interactions (e.g.,
button clicks, mouse events, keyboard events) by invoking methods in
your component.
• Syntax: Event binding uses parentheses ( ) to bind an event emitted by
an HTML element to a method in your component. For example:
(event)="handler()“.
• Use Cases: Event binding is used for handling user interactions and
executing methods in response to events like clicks, key presses, mouse
movements, and more.
 Two way Binding

• Two-way data binding is a powerful feature in Angular that allows you to

automatically synchronize the data between a template (UI) and a
component class (data model). It combines both property binding (from the
component to the UI) and event binding (from the UI to the component) into
a single syntax, [(ngModel)], making it easy to work with form elements like
input fields, text areas, and select boxes.
 Combine Forms with data Binding

• Combining forms with data binding is a fundamental aspect of building

dynamic and interactive applications in Angular. Angular provides a robust
set of tools for working with forms and seamlessly integrating them with data
binding.
 Custom Properties

•
In Angular, you can create custom properties (also known as custom
attributes or inputs) for your components to allow data to flow into the
component from its parent component or template. These custom properties
enable you to pass values, configurations, or objects into your components,
making them highly flexible and reusable.
 What is Encapsulation

• Encapsulation in Angular, just like in object-oriented programming (OOP),

refers to the concept of bundling data (properties) and methods (functions)
into a single unit, typically known as a component or a class in Angular.
Encapsulation in Angular follows similar principles as in OOP but is tailored
to the Angular framework's context.
 Here are some key aspects of encapsulation in Angular:

• Component-Based Architecture: In Angular, applications are typically

structured into components. Each component encapsulates a specific part of
the user interface and its associated behavior. Components are self-contained
units that can have their own properties, methods, templates, and styles.
• Data Encapsulation: Encapsulation in Angular involves defining component
properties as private or protected whenever possible. By default, component
properties are public, but it's often good practice to limit direct access to these
properties from outside the component.
• Access Modifiers: Angular uses access modifiers like public, private, and
protected similar to OOP languages. You can use these modifiers to control
the visibility and accessibility of component properties and methods. For
example, making a property private restricts access to it outside the
component.
• Getters and Setters: Angular allows you to use getters and setters for
component properties. Getters and setters provide controlled access to the
component's data, enabling you to add logic, validation, or transformation
when getting or setting a property.
• Data Binding: Angular provides mechanisms like property binding and event
binding to connect the component's data with the UI. Property binding
allows you to set the values of HTML elements or Angular directives based
on component properties, and event binding allows you to respond to user
interactions and update component properties accordingly.
 Introduction to Angular Hooks
• Angular does not have a concept of "hooks" in the same way that
other frontend frameworks, like React, do. Instead, Angular uses a
different architecture and set of features for building and managing
components.
• In Angular, components are the basic building blocks of the
application, and they are responsible for defining the structure,
behavior, and presentation of the UI. Instead of hooks, Angular
components use lifecycle events and decorators to manage
different aspects of a component's life cycle.
 Here's a brief overview of key concepts related
to managing component behavior in Angular:
• Lifecycle Hooks: Angular provides a set of lifecycle hooks that allow you to
tap into different stages of a component's life cycle. These hooks enable you
to perform actions at specific moments, such as initialization, content
rendering, and destruction. Some commonly used lifecycle hooks include:
• ‘ngOnInit’: Called after the component is initialized and its properties are
set.
• ‘ngOnChanges’: Called when the component's input properties change.
• ‘ngAfterViewInit’: Called after the component's view and child views are
initialized.
• ‘ngOnDestroy’: Called before the component is destroyed.
• Decorators: Angular uses decorators to annotate and configure components,
services, and modules. For example, the ‘@Component’ decorator is used to
define a component, the ‘@Input’ decorator is used to declare input properties,
and the ‘@Output’ decorator is used to declare output properties for
communication between components.

import { Component, Input } from '@angular/core';

@Component({
selector: 'app-example',
template: '<p>{{ message }}</p>',
})
export class ExampleComponent {
@Input() message: string;
}
• Services: In Angular, services are used for sharing data and logic
between components. Services are typically singleton instances
that can be injected into components. They can be used for tasks
like making HTTP requests, managing application state, and
sharing data between components.
• Routing: Angular provides a router module that allows you to
build Single Page Applications (SPAs) with multiple views and
navigation between them. You can define routes and associate
components with specific routes.
• Observables: Angular leverages RxJS observables to handle
asynchronous operations and manage data streams. Observables
are used for handling events, asynchronous data, and
communication between components.