Learn About Angular Components

Introduction

In this article, we are going to discuss Angular components. This article is for beginners who are planning to learn and implement Angular. In the first part, we will have a brief introduction of Angular Components. After that, we will demonstrate the configuration steps to configure components in Angular.

Components 

The main responsibility of the component is to deal with a View of the application and a logic on the page. The component has enough information on how to render itself and fetches data from required services.  For example: EmployeeComponent, this will list out the Employee related information in a View or page. To get more information on Components, you can refer to my previous article, An Overview of Angular.

Component Oriented Application

Angular 2 application has a set of components. Every application has a root component which is the container for all the other components, we define a component for a UI element, View, and route. We need to break the application into a set of components. You can break it up as much as you can. Nothing wrong in that, in fact, it will bring the aspects of the application such as reusability, maintenance and testing. Let's see how we can define the component in Angular.

Configuration

Step 1 Package Installation

Define the list of required packages in package.json to build Angular 2 application. Please refer to the attached source-code to understand the packages and dependencies needed to build Angular 2 application. After that, launch the node package manager (npm) and type -

npm install

 

This command is used to install the packages listed in the package.json file. I am not going into details of this, but please make sure you complete the installation step without any issues.

Step 2 Root Module Creation

I am not going into the details of the module here. If you need basic information about the Module, please refer to my recent article ‘Overview of Angular – Part One’ where you will find the details of it. Modules are of two types - root module and feature module. If Angular finds NgModule in the source-code, it will treat as root module. Otherwise, it will be treated as feature Module. Root module is the container of all the feature modules. NgModule is a class decorated with @NgModule metadata. This helps to group which child components will come under root module. And it helps to import other modules which are required for the child components, Provides services at the application level that any child component can use.



Have a look at the source-code. This is how we need to create root Module. You can find that I have imported NgModule and Browser Module token from the angular/core, angular/platform-browser. NgModule is used to define imports, declaration, and bootstrapping options. BrowserModule is required for any web based angular application. The bootstrap option tells Angular which component to bootstrap in the application. After that, you need to import the AppComponent and EmployeeComponent. Let’s see in the source-code how it has to be configured.

Step 3 App Component Creation

App Component is the bootstrap component in our Angular application. As soon as the application gets started, this component is the first thing to get it launched.



While creating App Component, you can find two important parameters, which is selector and template. The selector is the element property which helps to create the instance of App component and insert it between the selector tag found in the View. Template property tells Angular what needs to be rendered in the DOM. If you look at the source-code, you can find that Angular will create an instance called AppComponent and insert this instance into View or page where my-app tag is found.

Step 4 Employee Component Creation

This is the simple EmployeeComponent we create for taking care of Employee related operations. This component will get loaded after the App Component.



Look at the source-code. Selector element will create an instance of Employee Component and loads this component into Employee-ui tag. Template property tells what needs to be rendered in the tag. If you see it in a broad view, you can find that my-app tag will get loaded somewhere in the page, under the my-app tag Employee-ui tag will get loaded, under Employee-ui tag, the Employee related information like EmployeeCode and EmployeeName will get loaded. Look at the HTML template here.



For the <my-app> element, AppComponent instance has been created and inserted between <my-app> elements; due to that, <Employee-ui> element will come under <my-app>. For <Employee-ui>, Employee Component has been created and inserted between <Employee-ui> elements; due to that, Employee information like EmployeeCode and EmployeeName will comes under <Employee-ui>

Execution Flow


Have a look at the execution flow diagram. Let me explain you the execution flow of the attached project.

In the System.js file packages section tells the system loader which file has to be loaded and what is the name of the file. In our case, Startup.Js is the name of the file.

Once Startup.ts files gets loaded, it finds the bootstrap module and loads it accordingly.

In our case, ModuleLibrary is the name of the module. Once the ModuleLibrary loaded, it looks for the AppComponent and loaded it.

After that, it loads the  EmployeeComponent and finds the models required to load it. In our case, the name of the model is Employee. Finally, it loads the UI content.

Source Code

Please use the link to download the source-code.

Summary

Modules and Components are the building blocks of an Angular application. Component deals with a View of the application and a logic on the page.