Creating Hello World in Angular 2 using Angular CLI

Hello guys, nowadays Angular is much popular and most used framework for front-end in app development. Previously we used AngularJS ( i.e Angular 1 ) and its the time to learn about Angular 2 as its growing in the industry. If you don't have knowledge about the AngularJS, no worries but make sure you have few idea about HTML, CSS, and JavaScript.

In this post, we are going to learn,

1. How to install Angular CLI
2. How to display Hello World
3. How to run our application

Step 1: ( Install Angular CLI )

Angular CLI is the command line interface for the Angular framework by using which we can create the Angular application very faster way. You just need to know about the commands which we will be used at the time of Angular application development.

Let's install Angular CLI before install make sure you have the latest version of NodeJS and NPM on your machine. For installing Angular CLI, open your command prompt and run following command,

npm install -g angular-cli

After successful installation of the Angular CLI, you will see following logs,

Step 2: ( Create Angular 2 application )

Once you are done with the above step, we are ready to create Angular 2 application. Create a project directory and navigate to the project directory in your opened command prompt.

Now to create your Angular 2 project run following command in command prompt,

ng new YOUR_APP_NAME

let our project name is HelloAngular2 then run below command,

ng new HelloAngular2

If you see following logs in your command prompt then the project got created successfully, and also you can see in your project directory HelloAngular2 folder would have created.

Step 3: ( Create Hello World Component )

If you are done with the above steps then you will see the following project structure in HelloAngular2 folder,

To know what is a component in Angular 2 please go through this link. Now go inside HelloAngular2 folder using cd HelloAngular2 and we will generate Hello World component by running the following command,

ng generate component hello-world-component

or

ng g component hello-world-component

Where g is the alias name of generate. And note that we follow the standards for the naming e.g in this case hello-world-component.

You can see following logs in command prompt,

Also, you can see a folder called hello-world-component has added inside HelloAngular2\src\app folder as follows,

Step 4: ( Display Hello World )

We just created our Hello World component, now we will display the Hello World before that modify the hello-world-component.ts and hello-world-component.html as follows,

hello-world-component.ts:

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

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

  appTitle: string = "Hello World in Angular 2";
  
  constructor() { }

  ngOnInit() {
  
  }

}

hello-world-component.ts: 

  {{appTitle}}

Include hello-world-component in AppComponent in the file app.component.ts and modify app.component.ts and app.component.html as follows,

app.component.ts: 

import { Component } from '@angular/core';
import { HelloWorldComponentComponent } from './hello-world-component/hello-world-component.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

app.component.html:

  {{title}}

Step 5 ( Run Your App )
To see the message Hello World just run below command.

ng serve

If you won't get any error then you will see below logs in your command prompt,

To see the result open your browser and browse http://localhost:4200 . Here 4200 is the port on which your application will run.