Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Creating Our First Component in Angular 2

DZone's Guide to

Creating Our First Component in Angular 2

In this article, a web developer gives a tutorial on how to create our own components in Angular 2 based web applications.

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Hi friends!

In our previous article, we learned that Angular applications are made of several components each representing its own View. Refer to my previous articles (listed below) for better understanding.

And, we learned about app.component which is responsible for displaying the content in our browser. Now, in this article, we shall see how to create our own component in Angular 2 applications. The first thing we have to do is to create new TypeScript file.

Image title

I have added a file called rathrola.component.ts. Just like ourapp.component, we have imported the component class from the core module, as shown below.

import {
    Component
} from '@angular/core';
@Component({
    selector: "my-tuts",
    template: `<h2>Rathrola Prem Kumar, Consultant</h2>`,
})
export class RathrolaComponent {}

If you remember, a component is nothing but a class with metadata. Let’s name our class rathrolaComponent and, since we need to use this class in other components, we are going to export it.

And now, we shall attach the component decorator of our class. Within this component decorator, we are going to specify a selector and a template as shown below.

@Component({
    selector: "my-tuts",
    template: `<h2>Rathrola Prem Kumar, Consultant</h2>`,
})

In the template, we created simple HTML tags as shown above.

Now, we have an import statement, component decorator, and associated class. Finally, our newly created component is complete.

In my previous article, I mentioned that usually in Angular applications, we will have one main component called the root component and other components are part of this root component.

In our case, the root component isapp.component, and rathrola.component is going to live inside thisapp.component.

So now, from app.component, remove the single line quotes in the template in the component decorator, as shown below.

import {
    Component
} from '@angular/core';
@Component({
    selector: 'my-app',
    template: `<h1>Hello World From Rathrola Prem Kumar</h1>`,
})
export class AppComponent {}

So, remove the single quotes and keep the backtick (`). This is below the esc key on the keyboard.

This is going to allow us to specify HTML in multiple lines. Now, what is the HTML we need to specify?

It is the selector of rathrola.component as shown below:

import {
    Component
} from '@angular/core';
import {
    RathrolaComponent
} from './rathrola.component'
@Component({
    selector: 'my-app',
    template: `<h1>Hello World From Rathrola Prem Kumar</h1>
<h4>Header 4 from App component</h4>
<my-tuts></my-tuts>`,
    styles: [`h4{
color:blue;
}`],
    directives: [RathrolaComponent]
})
export class AppComponent {} // This is just a sample script. Paste your real code (javascript or HTML) here.
if ('this_is' == /an_example/) {
    of_beautifier();
} else {
    var a = b ? (c % d) : e[f];
}

Now, we need a way to inform our app component about rathrola.component. We do that by using another configuration called directives.

The directives are going to have an array, which we will name after one of the components, as shown below:

directives: [RathrolaComponent]

Note: we need to import rathrola.component before we create a directive as shown above.

Run the application and see the output. It should look like what I've got below.

Image title

This is how we create a new component and then use it in other components using directives.

In our next article, we shall see how to style the HTML code for a component.

Thanks for reading my article, and stay tuned!

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:
angular ,web dev ,web application development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}