Angular 7 Hello World

In this article, we will install Angular CLI using npm and create and run a Hello World app.
 

1. Installing Angular CLI

For installing angular, first make sure you have node and npm installed and then run the following from command prompt.


npm install -g @angular/cli

This should install latest angular version. You should see the version in command prompt.

2. How to check the angular version installed

You can use any of the below commands to check the version :


ng version
ng --version
ng v

3. Create a workspace and initial application

For creating an application in angular, the command is :


ng new appname

Once, the app is created, you can go the corresponding folder and start the server.


cd appname
ng serve --open

This should open the default angular app with url localhost:4200

4. Hello World

We can customize the default app for hello world with following changes.

src/app/app.component.ts

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

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

We added a property called message in the AppComponent.ts

src/app/app.component.html

<div style="text-align:center">
  <h1>
    {{message}}
  </h1>
</div>

 
Start the server using :


ng serve --open

It should start the server and load a browser with url localhost:4200.

It should show Hello World on the browser at this point.
 

© 2019, https:. All rights reserved. On republishing this post, you must provide link to original post

Leave a Reply.. code can be added in <code> </code> tags