Modern front-end web application development changes a lot in these days. In the modern frontend web development, we break our page into different components and then link them together with one root component. In this article, we are going to learn something similar for angular which known as angular components in detail with examples.

Before reading this further, please make sure you have some basic knowledge of javascript ES6 features and typescripts and how angular modules work in the angular application.

What are Angular Components

Components in Angular are responsible for the UI of the web application. Components in Angular is a typescript class which is decorated with the @component decorator.

A simple webpage has header, footer, sidebar and main section. We can break all these things into the components depending upon the requirement of the reusability of the section.

All components in Angular has associated view that is typically an HTML file and a stylesheet that can be .css, .scss, .less or any other CSS file depending upon project requirements.

All Angular components have access to the all directive API of the angular like ngClass, NgIf, NgFor etc.

How to create Angular Component using CLI

To create components into angular, you just have to run the below simple command and it will create the component and import it into the root module of the project.

ng generate component component_name

//short form

ng g c component_name

Above command will create following four file inside the app folder

  • component_name.component.ts
  • component_name.component.html
  • component_name.component.spec.ts
  • component_name.component.css. // this file depending upon the which stylesheet you are using in your project

Newly generated component .ts file will look like below

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

@Component({
  selector: 'app-component_name',
  templateUrl: './component_name.component.html',
  styleUrls: [ './component_name.component.css' ]
})
export class ComponentName  {
}

Angular Component Meta Data

As we can see our generated components has few metadata. Let’s learn more about them in detail.

selector

It tells angular to create and insert component instance wherever it finds the corresponding html tag in the html template.

For example, if an app’s HTML contains <app-component_name></app-component_name>, then Angular inserts an instance of the ComponentName view between those tags.

templateUrl

It is responsible for the html of the component. You can provide either inline html template or import the other html file here. This template defines the component’s host view.

styleUrls

It is used for the styling of the html template. You can provide here an array of relative paths to where the component can find the styles used to style the HTML view.

As a default, the Angular app is styled with standard CSS 3. But you can choose the CSS preprocessors like SASS, SCSS, or LESS.

Data Binding in Angular Components

Data binding in angular is a core concept and tell the DOM how to render the html templates. It allows us to define communication between component and view.

Data binding plays an important role in communication between components and their templates. It is also responsible for the communication between the parent and its child components.

There are following types of data binding available in the angular

  • Component to the DOM
  • DOM to Component
  • Two-way data binding

Component to the DOM

String Interpolation

It is a one-way data-binding where text enclosed with the curly({}) braces and angular replace the string value of the corresponding component property.

<p> Product Name : {{ productName }}</p>

Property Binding

Property binding is also one-way binding. It allow us to bind the view of the template expression.

Below is the simple example of the property binding

<img [src]="imagePath" >
<div [class.active]="isActive">

Note: Make sure you understand the minor difference between these two. You should use string interpolation only when you are dealing with the string and property binding when you are dealing with the non-string expression.

DOM to Component

Event binding

Event binding in angular is bind to the DOM events like click, chnage, blur etc. It send information from the view to the component when any special events take place in the DOM.

Below is a simple click event binding in angular

<button (click)="eventBindingFunction()"></button>

Two-way data binding In Angular Component

The Two-way data binding in angular is the combination of property and event binding. Two-way data binding allows the flow in both directions from component to view and view to a component.

It is mainly used in the user input form. With the help of the ngModel directive, we can use two-way binding in our angular application.

NgModel directive is not the part of the core module, it is part of the FormsModule which you have to import into the root angular module of the project.

Below is the simple example of the two-way binding in angular

<input type = "text" [(ngModel)]="userName"/>
<br>
<h4>Welcome: {{userName}}</h4>

Conclusion

In this article, we learn what is angular components and how to data binding in angular components works.

This is just only the brief, there are lots more to learn like angular components life cycles, parent-child components relationship, lazy-loading of the components and much more.

You can learn more about the angular and its updates from its official documentations.

If you like this article then share it on Twitter, Facebook and other platforms to reach it more audiences. You can also join our Private Facebook Group where you can discuss and share your experiences of web development.

Codecademy Web Development
Pin It