Angular Components And Data Binding Techniques

In this article, we would like to discuss the Angular component and data binding techniques available in angular.

Angular components are building blocks of Angular application. An angular component represents a custom HTML element that represents a specific section on a page. Angular components always associated with a template.

To make Typescript class as a component, you need to decorate with ‘@component’ metadata decorator. Below is high-level responsibilities segregation in a component

@Component decorator options

• selector: Defines the name of the HTML element that represents this component in a page
• Template — Holds HTML of the component
• TemplateUrl: Holds the HTML template path
• Providers: Any additional services that a component want to access in addition to the global services
• Encapsulation: Controls how the styling is applied to this component

Data Binding

Data binding is the process of connecting a UI element such as textbox or dropdown with the information that populates it. Using this data binding, the information will be passed from source to destination.

In angular terminology, Data binding responsible for coordinating the communication between the component’s class and its templates and often involves the passing the data

There are 4 types of data binding

• Property Binding
• Interpolation
• Event Binding
• Two-way binding

Property binding

Property Binding is a data binding technique that will help you to bind the properties of an HTML element with your component’s properties or methods. Property binding is a one-way binding.

<button [disabled]="btnDisabled"></button> 
// component.ts 
@Component({ 
selector: 'app-component', 
templateUrl: 'component.html' 
}) 
export class Component { 
btnDisabled = true; 
}

Property Binding

Interpolation

Interpolation is a one-way data-binding technique that allows you to bind the component’s class properties to UI elements. it uses double curly braces ( {{ your expression or property }} ) to display the data from component to view.

{{greeting}}

Event Binding

In any typical application, a user interacts with the application. As part of user interaction, the user needs to click the buttons or entering the details in text boxes, etc. All these actions come under events. In technical terms, we call them button events, keystrokes, change events, etc.

If you want to send the information from view to component’s class you need to use the event binding. This is also a one-way binding and exactly does the opposite of property binding.

To capture an event from the view, you need to wrap the event inside the parenthesis “()”

Save

Two-way binding

The two-way binding combines the property binding and event binding

That’s all for today’s topic. Thank you for reading. Please share your thoughts in the comments box.

Originally published at http://www.techmonks.org on May 2, 2020.

---