Angular Components in Detail

Angular Components with Examples

In this article, I am going to discuss Angular Components with examples. Please read our previous article where we discussed Decorators in Angular Application. As part of this article, we are going to discuss the following pointers in detail.

  1. What are Angular Components?
  2. How many components we can create in a single application?
  3. Understanding the default angular component i.e. AppComponent.
  4. How to create a component in Angular?
  5. Understanding the different parts of an angular component

Note: If you worked with Angular 1 (i.e. AngularJS) applications, then you may know the concepts of controllers, directives, and scopes that are used to bind the data and logic to a view. But in Angular 2 or any higher versions application, the component alone performs all the tasks which are performed by controllers, directives, and scopes of angular 1 application. That means we can define the component in angular with a particular view with its own data and logic. If this is not clear at the moment, then don’t worry we will try to understand this with some examples.

What are Angular 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.

The core concept or the basic building block of Angular Application is nothing but the components. That means an angular application can be viewed as a collection of components and one component is responsible for handling one view or part of the view.

An Angular Component encapsulates the data, the HTML Mark-up, and the logic required for a view. You can create as many components as required for your application.

Every Angular application has at least one component that is used to display the data on the view. Technically, a component is nothing but a simple typescript class and composed of three things as follows:

  1. Class (Typescript class)
  2. Template (HTML Template or Template URL)
  3. Decorator (@Component 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 Mark-up; you can also define the directives, and bindings, etc. 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. 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 view. Similarly, the method in an angular class is used to implement the 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 the class with the @Component decorator. There are so many other 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.

Note: Whenever we create any component, we need to define that component in @NgModule.

Understanding Angular Component with an Example:

By default one component app.component.ts file is created when we create a new angular project. You can find this file within the app folder which is present inside the src folder of your project as shown in the below image.

Understanding Angular Component with an Example:

This app.component.ts file contains a component with the name AppComponent and it is the root component of your angular application. If you open the app.component.ts file, you will find the following code.

What are Angular Components?

Let us discuss the above code in details:

Import Component Decorator:

First, you need to import the Component decorator as shown in the below image. That means 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.

Import Component Decorator in Angular

Create a class

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

Create a class in Angular using Typescript

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

Applying the component decorator to the class:

The next step is to decorate the class with the @Component decorator. As we already discussed in angular, a class will only become a component when it is decorated with the @Component decorator as shown in the below image. 

Applying the component decorator to the class

The component decorator has several properties. In this demo, I am going to explain to you the use of (selector and templateUrl) built-in properties. In our upcoming articles, we will discuss all the available properties of the component decorator.

Component Decorator Selector Property:

If you want to use a component on any HTML page in your angular application, then you must have to specify the selector property of the Component decorator. This selector property 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 you run the application, this directive <app-root> in the HTML page is replaced with the content specified by the templateUrl properties of the component decorator. If you look at the templateUrl property value, it is holding one HTML Page i.e. app.component.html and you can find this file in the app folder of your project. So, finally, this app.component.html file content will be display in the browser. If you open the index.html file, then you will find this <app-root> selector as shown in the below image.

Component Decorator Selector Property:

TemplateUrl:

As we already discussed the templateUrl property of the @Component decorator actually contains the HTML file that you want to render in an HTML page. Along with the templateUrl property you can also use the template property. In our next article, we will discuss how to use template property and the difference between template and templateUrl property of @Component decorator.

Decorating the class with @Component decorator:

We need to decorate the class with @Component decorator which adds metadata to the class. We need to use @ symbol to apply a decorator to a class. Once you apply the @Component decorator to your class then only your class becomes a component.

What Happens when we build the angular application?

When we build the angular 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, so when we build the project then it will create a javascript file with the name app.componet.js.

How to create a Component in Angular?

In order to create a component using Angular CLI, you need to use the following command.

How to create a Component in Angular?

  1. Here, ng stands for angular and it will call the angular CLI.
  2. Here, g is the abbreviation of generating (you can also use the whole word generate).
  3. Here, c is the abbreviation of component (you can also use the whole word component). Here, the component is the type of element that is going to be generated (you can also create a directive, service, pipelines, class, security, interface, enumeration, and module).
  4. Here, the component name is the name of the component

Suppose, you want to create a component with the name MyComponent, then you need to type ng g c MyComponent command in the console and then press enter as shown in the below image.

How many components we can create in a single application?

Once you type the required command and press the enter button, it will take some type to create the component. Once the component is created successfully, you should get the following output.

Understanding the default angular component i.e. AppComponent.

As you can see in the above output, it will create four files i.e. along with the ts file, it also creates HTML, spec, and CSS files. In your project, it will create a folder with the name MyComponent inside your app folder and within that MyComponent folder, it will place the above four files as shown in the below image.

How to create a component in Angular?

As we already discussed in our previous article, in order to use one component, we must include its reference in the root module i.e. AppModule. You can find this root module within the app.module.ts file. Now, if you open the app.module.ts file, then automatically the angular framework includes the reference of our newly created MyComponent component in the declarations array as shown in the below image.

Understanding the different parts of an angular component

You can also create the component manually that we will discuss in our upcoming articles. Let us see how to use our newly created component.

Modifying my-component.component.ts file:

In my-component.component.ts file, we are just adding one variable with the name MyVariable with a default value “Welcome to Angular Tutorials” as shown in the below image.

Modifying my-component.component.ts file:

Modifying my-component.component.html file:

Modify the my-component.component.html file as shown below.

<h1>This is coming from mycomponent</h1>
<hr>
{{MyVariable}}
Modify the index.html file as shown below:

Modify the index.html file as shown below. Here, we are using the app-my-component selector as a directive.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyAngularApp</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>

  <app-my-component></app-my-component>

</body>
</html>
Setting MyComponentComponent is the start point:

Open app.module.ts file and in the bootstrap array set MyComponentComponent is the start-up component as shown in the below image.

Angular Components in Detail

With the above changes in place, now type ng serve -o in the terminal console and press enter and you should get the desired output in your default browser as shown below.

Components in Angular Application

In the next article, I am going to discuss the Angular Template vs TemplateURL property with examples. Here, in this article, I try to explain how to Angular Components with examples. I hope this Angular Components with Examples article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this Angular Components with Examples article.

1 thought on “Angular Components in Detail”

Leave a Reply

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