In the previous tutorial, I had a basic explanation of what a Component in Angular is, what its functions. In this tutorial, I will go more about Component in Angular.

First, I will create an Angular project as an example:

In Angular, a component is an HTML part of the entire HTML content that we need to build for our application.

For example, you have an HTML page like this:

then you can build a Component for this entire page, or split it into multiple components for each <div> tag.

In the project I just created, the AppComponent class in the src/app/app.component.ts file is a Component in Angular. The content of this class is as follows:

A Component class in Angular will be declared with @Component decorator and has two important attributes among the three attributes of this decorator, required to be selector and templateUrl.

The selector attribute is used to declare the HTML tag that this Component will replace the content in our Angular application.

We have 3 ways to declare this selector attribute. The first way is, by default, you will define an HTML tag and declare the value of that tag in the selector attribute. The second way is that we will define the class attribute of an HTML tag with the value of this class attribute declared in the selector attribute of the @Component decorator. For example, I can modify the selector attribute of @Component decorator in AppComponent as follows:

Then, I need to edit the index.html file in the project’s home directory as follows:

The results are still the same.

The third way that you can do is declare a new attribute for any HTML tag and declare that attribute in @Component decorator’s selector attribute with square brackets as follows:

index.html:

app.component.ts:

The templateUrl attribute will define the path to the HTML content that this Component will build.

If you are building this Component with little HTML content, you can use the template attribute instead of templateUrl to define this HTML content directly into the Component.

Eg:

If you only declare one line for HTML content, let declare them inside the single quotes “‘”, if you declare multiple lines, we will use the “`” instead of the single quotes “‘” to declare HTML content!

The styleUrls attribute in our example is used to define CSS files to edit the style for this Component.

It is not required because we can define a common CSS file for the entire Angular application.

You can also define CSS in Component’s file too, using styles attribute instead of styleUrls attribute. For example, I can define the style for the <h1> tag in the app.component.html file as follows:

Result:

 

In the AppComponent class, as you can see, it defines a title variable.

This variable at the beginning is used to replace the placeholder {{title}} in the app.component.html file:

Suppose we now need to build an HTML page:

I will replace the content of the app.component.html file into the above content and revert to AppComponent as follows:

 

Then run the application, I will see the results as follows:

Now, I want to split the content into 2 different components. One for:

and one for:

I will do the following:

First, I will create 4 files named h1.component.html, h1.component.ts, p.component.html, and p.component.ts in the src/app directory as follows:

The contents of the h1.component.html file will be retrieved from the app.component.html file as follows:

The contents of the p.component.html file will look like this:

The content of the app.component.html file at this time we will replace with the selector as follows:

Now, we will add 2 Component class as PComponent and H1Component in the files p.component.ts and h1.component.ts. Their contents are as follows:

PComponent:

H1Component:

Then, we need to declare these two components to the AppModule:

Run the application again, you also see the same results.