First Component Creation in angular 2

In angular 2, a component plays a key role while building the UI block and its business logic and for more features. In this article lets go with creation of our own component and it's execution.

Note : By the below three points we’ll get the structured project of our angular application which I had discussed in detail in the followed link(Creating First angular 2 aplication). Here just as to rewind the things I’m speaking with the following 2 points.

1)Initially, let us create our application folder(I created folderr with nameDemoFive).

2)After creating the folder, navigate up to the created folder path in command pprompt and give the command “ng new applicationname”(My application name is DemoAppFive).

By the above command we’ll get the structured project in our folder as follows :

Place to create our own component :

1)Create a folder named “appbyme” under the path src > app >. In visual code we can create the folder as like below images easily. 

2)Now firstly create a file named “appbyme.comonent.ts” by creating the new file under the folder “appbyme” which we created by above step.

Steps to create our component :
Step 1 :  In “appbyme.comonent.ts” file we are going to create our component.
Initially lets create our class named “TestComponent” as like below :

export class TestComponent{
    title : "It's my component";
}

In the above piece of code  I had used the export keyword in front of the class keyword. The export keyword makes our component to be reused(import) in other components.

Step 2 : Import the component root class which comes from the angular/core. This import makes us the accessibility of @component decorator.
import {Component} from '@angular/core'
Note : make sure letter “C” in Component needs to be in uppercase.
If in case you are from .net or java background, this ste is like import or using type of statements.
Step 3 : Now we need to decorate our class which we create in step :1 by the @component as follows :
Note : make sure letter “C” in @Component needs to be in uppercase.

@Component({
})
export class TestComponent{
    title : "It's my component";
}

Within the component we have to be filled by the minimum properties of selector and template or templateurl as like below :

@Component({
selector:'test-component',
templateUrl : './appbyme/appbyme.component.html'
})

In the above property or key “templateurl” needs to pass the html file. I had created that file as like below ordered structure under the folder “AppByMe” by naming as "appbyme.component.html".

Have a look in the below image which is the result of above three steps in my “appbyme.component.ts” file.

 By the above steps we are upto the point of creating successfully a component.Just creting a component is like just earning money without having food. 

Registering the component :

To get utilized of our new component we need to register the component in the file named “app.module.ts”. Firstly import the class which we created named “TestComponent”.

app.module.ts Before registering the component(Default) :

After registering the component :

All the components should be  with in the declarations array type of property to get registered.

Using the created component selector :

Now to make use/rendering of our component selector, use the selector with in the app.component.html file as like a directive or tag.
Note : app.component.html will render from the index.html file which behaves as like root fiile.

Result :