What is Angular Components?. The Complete Angular Developer Course 2023 [Videos].

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
6. Understanding Angular Component and module architecture

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 the 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 dont 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)

Lets 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 simple words, 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 Videos. 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.

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.

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 we are importing the namespaces before using the classes and methods in the C# application.

Create a class

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

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. 

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

TemplateUrl:

As we already discussed the templateUrl property of the @Component decorator actually contains the HTML file that you want to render on an HTML page. Along with the templateUrl property you can also use the template property. In our next Video, 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.

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.

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.

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.

As we already discussed in our previous Video, 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.

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

Modifying my-component.component.ts file:

In the 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.html file:

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

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.

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.

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.

Understanding Angular Component and module architecture:

As we already discussed, the main aim of Angular is to bind the model and the view. In Angular, the binding code is technically called a Component. In enterprise projects, we can have a lot of components. With many components, it is very difficult for us to handle the project. So, what we can do is, we will group the components logically into modules. For better understanding, please have a look at the below image.

1. Components: â€“ This will contain the binding logic to bind the UI and the model.
2. Modules: â€“ This will logically group components.