Components In Angular 5 - Part One

A component encapsulates the data, the html markup and the logic for a view. You can create as many components as required.

Before reading about components, I suggest you to go through the Folder structure of Angular projects and How an Angular application gets started or loaded.

A component encapsulates the data, the HTML markup, and the logic for a View. You can create as many components as required.

For example, if your application looks like this:

 

Angular is a component-based architecture which allows us to work on smaller and more maintainable pieces that can also be used in different places.

Every application has at least one root component which is called app component.

Now, let’s see how to create a component.

To create a component, we need to follow three steps,

1. Create a component.
2. Register a component in a module.
3. Add an element in an HTML markup.

Step 1 - Create a Component

Component can be created in two ways - i.e. by creating a custom component and by creating a component CLI. First, let us create a custom component. For creating custom component, we need to follow these steps.

1. Create a TypeScript file “myfirst.component.ts” inside app folder. It is not necessary that we include “component” word in our file name; however, if we use this, we can easily identify that it is a component file.
2.  Inside this file, write the below code.

import {Component} from '@angular/core';  //Line 1

@Component({                        //Line 2
    selector : 'first-sel',
    template:'<h1>My first component</h1>'
})

export class myfirst{};             //Line 3

In Angular, we have a decorator called component that will attach to a class to make it ‘Component’. So, first, import a component from library Angular/Core in our file. For this, we use the first line of code.

import {Component} from '@angular/core';            //Line 1

Now, we have created decorator function “@Component ()” which has taken an object {} as an argument. In this object, we can add one or more “predefined” properties. In the above file, we have passed two properties,

selector 

It is also called CSS selector, like in CSS if we want to reference:

• an element like <first-sel> then our selector must be like this “first-sel”
• an element like <div class=”first-sel”> then our selector must be like this “.first-sel”
• an element like <div id=first-sel> then our selector must be like this “#first-sel”

 

In this article, for this we used it like this <first-sel>

template

Here, we will write an HTML markup which we want to render with this component.

Step 2 - Register this component

First of all, the question is “why do we need to register our component?". In case we have not registered our component, then we will get the following errors.

 

These errors indicate that our selector “first-sel” is not identified by Angular. So, to recognize this selector, we need to register it.

Currently, our application contains only one module which is called “app” module. So, to register our component, go to app.module.ts file and in this file there is a class which is decorated with a decorated function called “@NgModule”. In this, write your component name inside the declarations part like this,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
    myfirst     //your component name (register a component)
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

But, at this time if we run this application you will get the following error

 

 

This error occurs because after registration of our component Angular can't find from where it came, so for this we need to import our component file into this file like this:

import { myfirst } from './myfirst.component';

After that, the file looks like this.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { myfirst } from './myfirst.component';

@NgModule({
  declarations: [
    AppComponent,
    myfirst     //your component name (register a component)
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note
At the time of importing the file, don’t use “ts” as an extension like “./myfirst.component.ts”.

Step 3 - Add an element in an HTML markup

As you know, “first-sel” (present in myfirst.component.ts file) is a selector for this component, which means anywhere in application where we have an element like “first-sel” Angular is going to render the template for this component inside that element.

But, here the question is, “where can we add this selector?”

Now, to add this selector we need to go “app.component.html” page, which is presented inside the app folder, and write the following code into the selector.

<first-sel></first-sel>

After that, save and compile with the help of this command :

ng serve --open

and the output is :

Now, at the end of this article, we can say that we have basic knowledge of Components in Angular.