Angular Component

In this article we will discuss what is angular component. If you are new to angular please follow the previous article Getting Started with Angular 8 using TypeScript

Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.

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 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.

Note: We use this example in angular-8

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.

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.

How to create a Component in Angular?

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

• We need to create a class and you need to export it. This is the class which will contain the business data and logic.
• 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.
• We need to import all the required libraries and modules that are required to create a component in angular.

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

Explanation of the component is detail.

Import 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 like below.

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. 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.

Component decorator:

We can decorate the class with the Component decorator. In angular, a class only becomes a component when it is decorated with the Component decorator.

Let's discuss about selector, templateUrl,styleUrls.

Selector: If you want to use a component on any HTML page in your angular 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 <app-root> on the HTML page. But when we run the application, this directive <app-root> in the HTML page is replaced with the content specified by the template properties of the component decorator.

TemplateUrl: The template properties of the Component decorator holds the information of the html page like we have html page like './app.component.html'.

OR you can use also Template instead of TemplateUrl we will  go through it in next article in details.

styleUrl: The is used if any css file are attached to the TemplateUrl html page.

OR you can use also style instead of styleUrl we will  go through it in next article in details.

If you open the index.html you can find the <app-root> selector is used there as like below;

   Summary

   In this tutorial we discussed how Angular Component work in angular 8. If have any question related to this topic then give your feedback.

You May Also Like...

• Getting Started with Angular 8 using TypeScript
• ngx-toastr in angular 8 | Part-2
• ngx-toastr in angular 8
• How to create Angular 8 Project using Angular CLI
• Angular 8 Project Structure
• Angular 8 Architecture