Angular Components

By | | Updated : 2018-07-01 | Viewed : 557 times

Angular Components

We already learned about basic Concepts of NgModules. When we want to implement the NgModule we have to add/implement the Components. Let’s now have a look at what is important of component is and what are basics of components.

Angular Component

Angular is component based framework, which will be very useful for developing and testing the application. Then next question coming in your mind is what is component in Angular? We can say Component is piece of logic. Here logic is related to view layer. If you use the backend MVC framework then you may know about view layer. Here is also same the Component belongs to the View layer.

When Angular interprets the custom tags in html view, Angular will create the component. Component is JavaScript class, which interacts with html template (view) to render the application data. Component will be also communicated with services to get the application data, which is to be displayed as html. Component will listen the user interaction events from the html. Then control will be forwarded from component to services if application data is required from the server. So simply we can say it contains the logic for displaying the data how to fetch and how to display the data.

Necessity of Angular Components

Angular has separated the Components and services as two parts for different functionality. Components mainly used for displaying the view. Components made Angular application neat and clean. Components mainly handles the rendering logic for html view and user interactions as well by event call back functions.

Component’s life cycle:

The Component and directive both have life cycle which is managed by the angular. When custom-tags is appeared in the template then component will be created to render the appropriate view.

After creation of component, Angular calls the component’s constructor and will be triggered the hooks methods. These hooks will listen the different type of life cycle movements.

Interaction between Component and Template

View means the combination of Component and Template. While displaying html template,the component and template will be interacted to get the data render in DOM.

Component and Template interactions

If you observe the above diagram, the Component and html template are interacting each other. Here Event Binding and Property Binding are the different type of data binding, where data will be passed from Template to component and vice versa

So we will discuss in detail later about Property binding and event binding.

Basic example of Component:

Let's get started implementing of Basic example of Component. We can use below given command to create the angular application.

ng new Component-App

By using this command, we can create the Component-App. Please find the below given diagram for the same.

Please modify the code in app.component.ts (..Component-App\src\app) file given below.

app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'component-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'AppComponent';
}

Points to remember:

1. Here Import will be used for importing functionality/material from angular core library, which will be used for the creating the html template.

2. Selector 'component-app', will be used for checking matched component to be created. When encounter Custom tag in DOM html by the angular then AppComponent will be instantiated.

3. Template URL will address the html file’s relative path.

Please change the index.html (Component-App\src) as given below.

index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ComponentApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <component-app></component-app>
</body>
</html>

We can see that component-app is the custom tag. Angular will look for matched component which have same selector. Once Angular find the component having with same selector then that component will be created.

Leave A Reply