Angular 13 – Creating a “Hello World” application

In this tutorial, we will show you how to create a “Hello World” application in Angular. It is often used to illustrate the basic syntax of the framework for a working web application.

Requirements

• Node.js: Make sure that you have installed it on your development machine. If you do not have it yet, you can download it on this page.

Table of contents:

1. Install Angular Application
2. Launch The Angular Application
3. Create HelloWorld Component
4. Modify HelloWorld Component
5. Add Routing For HelloWorld Component
6. Add Navigation Link And Router Outlet
7. Run Your First HelloWorld Component

1. Install Angular Application

You first need to install Angular CLI, that is a command line interface tool for Angular. It is able to create a project, add files, etc.

If you have Angular CLI installed on your machine, please make sure that you have installed the latest version of Angular CLI. You can follow this “Upgrade Your Angular CLI to Latest Version” if needed.

If you have not Angular CLI installed on your machine, you install it using the below command:

npm install -g @angular/cli

Next, create a new Angular application:

ng new angular-hello-world-app

After you run the above command, Angular will ask you “Would you like to add Angular routing?“, and the answer should be Yes “y”. Basically we will use it to declare routes of the app.

2. Launch The Angular Application

Go to the root project directory and launch the application.

cd angular-hello-world-app
ng serve --open

The Angular application will be automatically opened on your browser on http://localhost:4200. The application will also automatically reload if you change any of source files in the project.

3. Create HelloWorld Component

Run the following command to create HelloWorldComponent.

ng generate component HelloWorld

4. Modify HelloWorld Component

Let’s write some text in the component and its template.

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 {

  title = 'Hello, World! Application';

  constructor() { }

  ngOnInit(): void {
  }

}

and

<h1>
  {{ title }}
</h1>

5. Add Routing For HelloWorld Component

Open app-routing.module.ts, import HelloWorldComponent, and set route path for the component.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HelloWorldComponent }   from './hello-world/hello-world.component';

const routes: Routes = [
  { path: 'hello-world',  component: HelloWorldComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

6. Add Navigation Link And Router Outlet

<header>
  <h1>Angular Example</h1>
</header>

<nav>
  <ul class="nav">
    <li><a routerLink="/hello-world">Hello World</a></li>
  </ul>
</nav>

<section id="main-content">
  <router-outlet></router-outlet>
</section>

In the code snippets above, we add the navigation link to HelloWorldComponent router using routerLink attribute and use <router-outlet> tag to tell the router where to display routed views.

7. Run Your First HelloWorld Component

Now click on Hello, World! link on the home page (http://localhost:4200).

If you did it right, you should see “Hello, World! Application” in your web browser.