Overview Of Components In Angular

Introduction

In this article, we are going to learn the basics of the 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.

For creating a new application, run the below command 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 basic 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 basically 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 basically a component that we create and use in our Angular application. Let us create a new component and do some modification on 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.

Component in Angular 

This will create four new files.

Component in Angular 

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

  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3.   
  4. import { AppComponent } from './app.component';  
  5. import { TestComponent } from './test/test.component';  
  6.   
  7. @NgModule({  
  8.   declarations: [  
  9.     AppComponent,  
  10.     TestComponent  
  11.   ],  
  12.   imports: [  
  13.     BrowserModule  
  14.   ],  
  15.   providers: [],  
  16.   bootstrap: [AppComponent]  
  17. })  
  18. 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 having files HTML, CSS, TS and spec file 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 that 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 that the AppComponent and all the other components will fall under this component.

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

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

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

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

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

> ng serve

You will see the test component rendered successfully inside appComponent.

Component in Angular 

Now, let us see what changes we can do 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 prefix with dot(.). Eg: '.app-root'. Use the selector inside the HTML inside the tag as a class. Eg: <div class='app-test'>....</div>

Change the component and render method and save the files. Run the application to see it's working fine with the specified changes.

  1. 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 on the template are - we are using a templateUrl that points to an HTML file and render its content. It is also possible to render an 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 do is to change the styleUrls of the component decorator. You can also write the inline styles. Just replace the styleUrls to styles inside component decorator. Just like the HTML, you can have CSS inline as well. Also, you can use backtick '`' for writing a multiline CSS.

eg,

  1. styles : [`  
  2.    p { color : red;}`]  

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

  1. p{  
  2.     color: red;  
  3. }  

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

Component in Angular 

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

Overview of component

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