Angular 2 Component

Angular 2 Component

In this article, I am going to discuss one of the most important concepts of angular 2 application i.e. Angular 2 Component. Please read our previous article, where we discussed how to run angular 2 applications in visual studio using F5 or CTRL+F5 Key. 

The important point that you need to remember is the core concept of Angular 2 application is nothing but the components. Or you can say that the whole angular 2 application can be viewed as a tree of these angular 2 components. So the basic building block of an angular 2 application is nothing but the component, and moreover, you can define any number of components for an angular 2 application.

What are Angular 2 components?

According to Team Angular, A component controls a patch of screen real estate that we could call a view and declares reusable UI building blocks for an application.

If you know the Angular 1 applications, then you may know the concepts of controllers, directives, and scopes which are used to bind the data and logic to a view. But in Angular 2 application, the component alone performs all the tasks which are performed by controllers, directives, and scopes of angular 1 applications. That means we can define the component in angular with a particular view with its own data and logic

The angular component is composed of three 3 things such as Template, Class, and Decorator.  Let’s discuss each of these in details

Template:

The template is used to define an interface with which the user can interact. As part of that template, you can define HTML, you can also define the directives, and bindings and so on. So in the simple word, we can say that the template renders the view of the application with which the end-user can interact i.e. user interface.

Class:

The Class is the most important part of a component in which we can write the code which is required for a template to render in the browser. You can compare this class with any object-oriented programming language classes such as C++, C# or Java. That means the angular component class can also contain methods, variables, and properties like other programming languages. The angular class properties and variables contain the data which will be used by a template to render on the web page. Similarly, the method in an angular class is used to implement business logic like the method does in other programming languages.

Note: In angular, we are going to use TypeScript as the programming language to create the class.

Decorator:

In order to make an angular class as a component, we need to decorate that class with the Component decorator. There are so many decorators are available that we will discuss in our upcoming articles. The point that you need to remember is decorators are basically used to add metadata.

Component Example: 

Let us understand how to create a component in angular. First, let us have a look at the app.component.ts file. This file is present within the app folder of your project. This app.component.ts file contains a component with the name AppComponent. It is the root component of your angular application.

How to create a Component in Angular?

If you want to create a component in angular 2 application, then you need to follow the below 3 steps.

  1. First, you need to create a class and you need to export it. This is the class which will contain the business data and logic.
  2. Then you need to decorate your class with the @component decorator. When you decorate the class with component decorator then only your class behaves like a component.
  3. Finally, you need to import all the required libraries and modules that are required to create a component in angular.

When we create the angular 2 application, by the angular framework create the app.component.ts file which is the root component of angular 2 applications, The app.component.ts is looks as shown below

Angular 2 Component

Let us discuss the above component in details:
Import Component Decorator:

First, we need to import the Component decorator. Before using the component decorator you must have to import it as like we are importing the namespaces before using the classes and methods in the C# application. So first import the component decorator as shown in the below image.

Angular Component

Create a class

If you want to create a class in angular using Typescript language then you need to use the keyword class to create a class as shown in the below image.

Angular Component

The export keyword in angular is very much similar to the public keyword in C# applications which allows this class (i.e. AppComponent class) to be used by the other components within the application. The name here is a property and the data type is the string by default. This property is initialized with a default value of “Angular Demo”

Applying the component decorator to the class

The next step is to decorate the class with the Component decorator. In angular, a class only becomes a component when it is decorated with the Component decorator.  You need to decorate a class with a component like below.

Angular Component

The component decorator has several properties. But here in this demo, we are just going to use 2 (selector and template) built-in properties. In our upcoming articles, we will discuss all the available properties of the component decorator.

Let’s first understand the selector and template properties of a component.

Selector:

If you want to use a component on any HTML page in your angular 2 application, then you must have to specify the selector properties of the Component decorator. This selector properties of the component decorator will become a directive i.e. in this case the directive will be <my-app> on the HTML page. But when we run the application, this directive <my-app> in the HTML page is replaced with the content specified by the template properties of the component decorator.  In our example, the template properties contain the following code

<h1>Hello {{name}}</h1>

Template:

The template properties of the Component decorator actually contains the HTML code that we want to render in an HTML page of our angular application. As you can see in the below template property, along in the HTML content we also have a data-binding expression which is specified by double curly braces i.e. {{name}}.

Again notice that within the AppComponent class, the name property is assigned with a default value i.e. “Angular Demo”. At runtime, the data-binding expression is replaced by this value.

template: `<h1>Hello {{name}}</h1>`,

Decorating the class with the component decorator.

We need to decorate the class with Component decorator which adds metadata to the class. We need to use the @ symbol to apply a decorator to a class. Applying a decorator to a class is very much similar to applying an attribute to a class in C#. The Component is just one of the several built-in available decorators provided by the angular framework.

Below is the complete code of the AppComponent class

Angular 2 Component

Let’s have a look at the index.html file of our application. In this file, we use the selector i.e. “my-app” as a directive i.e. <my-app>. When we run the application, this directive i.e. <my-app> is replaced with the corresponding HTML code which we specified by using the template property of the component decorator.

Angular 2 Component

When we build the application the TypeScript files i.e. the .ts files are compiled to the respective JavaScript files i.e. the .js file. These javascript files are going to be rendered by the browser. As we have a typescript file with the name app.component.ts is there, so when we build the project then it will create a javascript file with the name app.componet.js as shown in the below image. To see this .js file you need to click on show-all-files icon in solution explorer.

Angular 2 Component

In the next article, I will discuss the Angular 2 Template vs TemplateURL with examples.

SUMMARY:

In this article, I try to explain how to Angular 2 Component. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *