Overview Of Components In Angular

Introduction

In this article, we are going to learn the basics of Angular Components. We are going to learn what exactly makes up a component and how we can add a new component to our Angular application with the help of Angular CLI.

Prerequisites

• HTML, CSS, and JS
• Basics of TypeScript.

Let us create a sample TestApp. For this, you should have installed the below tools for the development environment,

1. Node
2. Npm (comes when you install node)
3. Angular CLI.
4. Text Editor.

To create a new application, run the below command at any location.

ng new TestApp

Once your command is completed, you will have a TestApp folder created inside your sample folder.

Now, you will have your project folder created called 'TestApp'.

Note. See my previous article “Getting Started with Angular CLI” if you want to learn the installation and introduction from the very basics and start with the execution of the sample application.

The component is made up of 3 parts.

1. Template: HTML content that will render to the browser.
2. Class: A class is nothing but the code block which supports the View. The class is created by TypeScript. Like other programming languages, a class contains the Data and Methods inside it.
3. Metadata: The component also contains metadata attached to it. This is having the information that Angular needs to decide if the class is, in fact, an Angular component or just a normal class. It used the feature of typescript to decorate the metadata. A decorator is just a function that provides the information of the class attached to it.

So, when we put the template, class, and metadata we get the Angular component.

Component decorator

This is a function that attaches to the class right below it. In this example, it is attached right below the class. When we define the component decorator, we just tell Angular that this is not a plane class but a component. The component decorator contains the metadata and the template that represents the View. So, as a part of metadata, we have a selector, templateUrl, and styleUrl. The selector is just a custom HTML tag that represents the component. When we specify the selector in our HTML, Angular renders the component in its place.

In our sample application, we are using <app-root></app-root> as a selector, and the same custom tag is used in our index.html. Angular renders the AppComponent template when it comes across this app-root template. The exact template of this component selector <app-root></app-root> is defined using templateUrl. The defined app.component.html contains the HTML that will be using the properties of the AppComponent and will render in the index.html under <app-root></app-root> component selector. Now, we have styleUrl metadata that points to the style files with the .css extension.

That is a component that we create and use in our Angular application. Let us create a new component and do some modifications to that new component. We are going to add the new component using Angular CLI.

Open the integrated terminal and run the below command.

ng g c test

g for generate

c for component

Here, "test" is the component's name.

This will create four new files.

And also, update the app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You can have a look at the directory structure after adding the test component. You will see the test-named folder is created inside the app folder and has HTML, CSS, TS, and spec files for testing. All the files have the name test. component followed by the type extension. This is a functionality of Angular CLI. Open the test.component.html. You will see the statement written 'ComponentName works!'

Open app.module.ts

We import the TestComponent and add it to the declaration array. In this array, the declaration array contains all the components used by the Angular application. This is the functionality of Angular CLI that the newly added component is imported and added to the declaration array automatically. With just a single command, you create the component immediately and make it ready to use.

For using the 'test' component, you will have to use its selector which is 'app-test'.

In our app.component.html, we are going to use this selector 'app-test'. Remember that our Angular application has one root component the AppComponent and all the other components will fall under this component.

That is why we include 'app-test' inside app.component.html.

<!-- The content below is only a placeholder and can be replaced. -->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<app-test></app-test>

Change the content of test.component.html of our newly generated component's HTML.

<p>
  This is the content of test component.
</p>

Now, save the files go to your integrated terminal, and run the below command.

ng serve

You will see the test component rendered successfully inside appComponent.

Now, let us see what changes we can make with our test component.

Open test.component.ts

Go to the component decorator and begin with the selector. There are three ways to specify the selector.

1. Use it as a custom HTML tag
   eg - <app-test></app-test>
2. Use it as a class
   For using the selector as a class, declare the selector inside the component decorator with a prefix with a dot(.). E.g.: '.app-root'. Use the selector inside the HTML inside the tag as a class. E.g.: <div class='app-test'>....</div>
   Change the component and render method and save the files. Run the application to see if it's working fine with the specified changes.
3. Use as an attribute
   In the component decorator, use brackets [] for defining the selector. Eg: '[app-test]'
   In our HTML file, we will use this selector as an attribute to the tag. Eg: <div app-test>...</div>.

The next changes we are going to apply to the template are - we are using a templateUrl that points to an HTML file and renders its content. It is also possible to render inline content in your component decorator in the TypeScript file. You will have to use a template instead of templateUrl if we are using an inline template.

Eg. Template

<div> Hello inline template </div>

If your inline template is large and contains multiple lines, then you will have to use backtick '`' to write the multiple lines of HTML code.

The third change you can make is to change the style of the component decorator. You can also write the inline styles. Just replace the styleUrls with styles inside the component decorator. Just like the HTML, you can have CSS inline as well. Also, you can use backtick '`' for writing a multi-line CSS.

Eg

styles: [`
   p { color : red;}
`]

Let us change the color in test.component.css.

p {
    color: red;
}

Save and run the application and you will see how it works.

You can see that the content of the test component got the style given by you in its CSS file.

Conclusion

It contains the class, the decorator, and the template which represents the View and also, and it is also imported into the module and added inside the declaration array. You can then use the selector component either in the form of a custom tag, class or as an attribute. The HTML can be in a separate file or can be inline content. The component class contains the data that will be displayed to the View. It is also possible to nest the components in one another and reuse the components if required.