Home > tutorials > angular > Angular 2 “Hello World” example

Angular 2 “Hello World” example

In this tutorial, I will explain how to create an Angular 2 (or Angular) app with a simple example.Whenever we learn any new programming language, we will start with “Hello World” example.

So let us start with Angular 2 (or Angular) Hello World example to know the basics of Angular.

Before reading further, please go through my previous tutorial on how to setup local development environment for Angular 2 (or Angular).

Setup Angular in Local Development Environment

We will use Angular CLI as mentioned in the above tutorial to create our Hello World Angular 2 (or Angular) app.

Creating First Angular 2 (or Angular) Hello World Example:

I recommend you to create a folder in your local disk so that all Angular 2 examples are one place.(For instance create a folder named AngularExamples).

Open command prompt navigate to created folder; use the ng new command (Angular CLI) to create a new Angular project from scratch.

ng new hello-world-angular

 

It will take some time to create new project.

NOTE: If you are using latest version of Angular CLI by default it uses Angular 4 (i.e., latest angular version). And there is no much difference between Angular 2 or Angular 4 it’s just an update. Please go through the following article to know more about this versioning of Angular.

Is it Angular 2 or Angular 4 or Angular?

After successful completion, you should see following message.

hello-world-angular-created
hello-world-angular-2-created

 

Project ‘hello-world-angular’ successfully created.

Now navigate to the created ‘hello-world-angular’ directory.

Use your favourite editor (my choice would be visual studio code) open the created folder. The directory structure will be something like below.

Hello-world-Angular-2-Directory-structure
Hello-world-Angular-2-Directory-structure

This structure may vary depending upon the version of Angular CLI version (this article uses latest version of Angular CLI so it would be Angular 4).

Navigate to D:\AngularExamples\hello-world-angular\src\index.html file.

 

<!doctype html>
<head>
<meta charset="utf-8">
<title>HelloWorldAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>

 

You can see <app-root> tag this where our application will be rendered.

In Angular 2 (or Angular) world, we can create our own HTML tags & give them custom functionality, we will call them “Components”.

App-root is component auto generated by Angular CLI.

Now in command prompt type

ng serve

Then browse http://localhost:4200 it will show App Works as shown below.

Angular-CLI-Sample-Example
Angular-CLI-Sample-Example

Creating a Component in Angular 2 (Angular):

We will create a component using Angular CLI command.

ng generate component hello-world.

 

It will create four files as shown below

  • src/app/hello-world/hello-world.component.css
  • src/app/hello-world/hello-world.component.html
  • src/app/hello-world/hello-world.component.spec.ts
  • src/app/hello-world/hello-world.component.ts.
angular-2-hello-world-component
angular-2-hello-world-component

Open “hello-world.component.ts” file in editor.

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})

export class HelloWorldComponent implements OnInit {

constructor() { }

ngOnInit() {
}

}

 

This is a simple component written typescript.

If you know java or C# it is easy to understand but do not worry, we will understand each line one by one.

Here we are declaring a class named “HelloWorldComponent” which is a component.

Importing Dependencies in Component in Angular 2 (or Angular):

First line tells the compiler that import “Component” and “OnInit” objects from @angular/core (node module installed when we created project via Angular CLI).

Component Decorators:

After importing Component object, we have to tell the compiler that this class is a Component.

In Angular 2 (or Angular) we will use Decorators in typescript to do this. So Decorators are nothing but metadata added to our code.

For example in \hello-world-angular\src\app\app-module.ts file, Decorator tells that it is a class named “AppModule” which is a Module (NgModule).

@Component({

});

 

@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})

Component Contains Three important declaration

Selector in Angular 2 (or Angular) component:

Selector property indicates the tag name we are going to use in DOM.

<app-hello-world></app-hello-world >

(While creating component we gave name as “hello-world” Angular CLI added app as prefix).

TemplateUrl in Angular 2 (or Angular) Component:

<app-hello-world> tag uses hello-world.component.html file as html template. So whenever we use <app-hello-world></app-hello-world> it will display the contents of file HTML located in

\hello-world-angular\src\app\hello-world\hello-world.component.html

Instead of giving templateUrl we can use inline html also. As shown below

 

@Component({

selector: 'app-hello-world',
template:` <p>
hello-world works!
</p>`,
styleUrls: ['./hello-world.component.css']

})

For small html contents, we can use inline html template. HTML in between backticks(`….`).

It is better to use separate template because most of the code editors do not support syntax highlighting in inline HTML strings.

styleUrls in Angular 2 (or Angular) Component:

This property tells the compiler that use the styles located in hello-world.component.css for this component.

These are the main properties in Components in Angular 2 (or Angular)

Now open \hello-world-angular\src\app\app.component.html file and add the created component as shown below.

<h1>
  {{title}}
  <app-hello-world></app-hello-world>
</h1>

Now refresh the browser

hello-world-angular-2-example
hello-world-angular-2-example

Adding Data to the Component:

We have rendered static template, now we will add some data to the component.

Open “hello-world.component.ts” file in editor.

And add the name property as shown below.

name:string;

We are declaring a property or variable named “name” which is a string type. This is similar to declaration of variables in object-oriented languages. If we assign any type other than string the compiler will throw error.

 

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})

export class HelloWorldComponent implements OnInit {

name:string;

constructor() {

this.name="AngularJs Wiki"

}

ngOnInit() {
}

}

 

In constructor we will assign name variable. Constructor will be called whenever we create a new instance of a class. Similar to C# or Java language.

Rendering Angular template:

Now we have to use the declared variable in our template file i.e., HTML file. We have to use two curley brackets to display the value of variable “{{ }}”. We will call them template tags.

 

To use the name variable open the template file hello-world.component.html

 

<p>

hello-world works!
{{name}}

</p>

As the template bind to component(hello-world component) whenever compiler encounters flower brackets(i.e., template tags) it will replace the text with bounded property (i.e., name) value i.e., ”Angular Js Wiki”.

Now refresh the browser

hello-world-angular-2-example-with-data
hello-world-angular-2-example-with-data

I hope you understood the basics of Angular 2 (or Angular). If you have any doubts or suggestions feel free to comment.

NOTE: You might have thought why every time I mentioned Angular 2 (or Angular). Angular Team suggested to use Angular instead Angular 2 to avoid confusion further. Here after I use Angular instead of Angular 2. Please read the version history change mentioned above to know further details.


Please comment below If you have any questions

Do not miss any post from us follow @ facebook or Twitter @angular_js or Google+


Get Latest news and Tutorials of AngularJS and Angular by email.

Arunkumar Gudelli
I am “One among a million” Software engineers of India. I write beautiful markup.I make the Web useful. You can connect me via @twitter or @facebook or Google+ or e-mail.
http://www.arungudelli.com

Have something to say