Angular Components

Reading Time: 2 minutes

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

Angular component anatomy
Component Anotamy

@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 a the process of connecting a UI element such as textbox or dropdown with the information that populates it. Using this databinding, 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
Property Binding

Interpolation 

Interpolation is a one-way data binding technique which allows you to binding 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. 

<div> {{greeting}}</div> 

Event Binding 

In any typical application, a user interacts with the application. As part of user interaction user need to click the buttons or entering the details in textboxes etc. All these actions are come under events. In technical terms we call them as button events, key strokes, 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 “()” 

<button (click)=”saveDetails()”>Save</button> 

Two-way binding 

Two way binding combines the property binding and event binding 

two-way data bindingg
Two-way Binding

That’s all for today’s topic. Thank you reading.

0 0 vote
Article Rating