HelloWorld example in Angular 6

Before we start with the Angular 6 example make sure that you have Node and npm installed in the PC. Npm gets installed along with Node, we can confirm this using the commands

node –v
npm –v

These commands will give the versions installed, once this is confirmed we can go to the next step.

Next install angular-cli, which is the command line interface for Angular, we will need Angular-Cli to create projects / components / services, launch Angular applications etc. Use the following npm command to install angular-cli.

npm install -g @angular/cli

Once angular-cli is install we can start creating the actual Angular project, to create the project type the following command in the folder where we want to create the Angular Project.


ng new HelloWorld

This will create a Sample Project with all required dependent files and packages to run the Angular Application.

Now the Angular application is setup and we are ready to implement our own features in the Application. To start with let us modify the sample files to just print a message in the browser.

If you navigate to the path where the application was created you can see a lot of files created. Let us not confuse with all these files right away, to begin with let us just focus on the app component files, we will look at the other files and their purpose later.

If you navigate to the path “\HelloWorld\src\app”, you can see the app component files in this folder as follows.

The first file to look at is app.module.ts which is the Application module file, which bootstraps the application. This file is used to define the application dependencies and to specify the Bootstrap component.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [AppComponent],

  imports: [BrowserModule],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Notice that we import the app.component file and add it as the bootstrap component, this will make the app.component as the root component loaded when the application runs.

Next let us look at the actual component file

app.component.ts

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  constructor() { }

  title = 'Angular 6';

}

This is the actual component, here we specify the component’s template file, style file and also define the component class, this is similar to the Controller in AngularJS, we define the model in this class which will be bound to the View template.

The template file contains the actual view of the Component. Let us just print a message in the template file to start with. Notice the {{title}}, this value will be defined in the component class and bound dynamically.

app.component.html

<div style="text-align:center">

  <p class="title">Welcome to {{ title }}!</p>

</div>

Finally the style file contains the css classes for the component.

app.component.css

.title {    

     font-size: 15pt;

     color: Maroon;

}

.msg {    

     font-size: 12pt;

     color: Green;

}

Once we are done with these changes, we can run the application and view the output in the browser, to do so run the following command. The –o option will launch the application in the browser.

ng serve –o

The command will compile the application and launch the application in the browser, as follows.