DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. Creating Our First Component in Angular 2

Creating Our First Component in Angular 2

In this article, you'll build a simple hello world application in Angular using a few different components to create the basic logic and HTML structure.

Rathrola Prem Kumar user avatar by
Rathrola Prem Kumar
·
Feb. 01, 18 · Tutorial
Like (1)
Save
Tweet
Share
4.26K Views

Join the DZone community and get the full member experience.

Join For Free

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 article for better understanding.

Image title

And, we learned about app.component, which is a responsible component 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 a new TypeScript file.

Image title

I have added a file called rathrola.component.ts. Just like our app.component, we have imported the component class from 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 a simple HTML tag, 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 a root component and there are other components that are part of this root component.

In our case, the root component is app.component and rathrola.component is going to live inside app.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 will be below the esc key on the keyboard.

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

It is 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];
}

directives is going to have an array - it is just a name of the component, as shown below:

directives: [RathrolaComponent] 

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

Run the application and you should get an output similar to what I have below.

Image title

This is how we create a new component and then use it in other component 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!

AngularJS

Published at DZone with permission of Rathrola Prem Kumar. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Last Chance To Take the DZone 2023 DevOps Survey and Win $250! [Closes on 1/25 at 8 AM]
  • The Role of Data Governance in Data Strategy: Part II
  • Exploring the Benefits of Cloud Computing: From IaaS, PaaS, SaaS to Google Cloud, AWS, and Microsoft
  • A Beginner's Guide to Back-End Development

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: