Hello World by Angular

Challenge Inside! : Find out where you stand! Try quiz, solve problems & win rewards!


Angular is a front-end framework for developing web apps. It creates logics and methods for a class using typescript by default, however the browser does not understand typescript. Angular CLI is a tool that automates all of these tasks with a few basic instructions. Angular CLI handles all of this behind the scenes with webpack.


In this post, we will learn how to build “Hello World” by Angular application from the ground up, what different file folder structures include, and how to design our first Angular component and how one can run the application.

Prerequisites for Angular project

  • Basics of HTML, CSS & Javascript
  • Install Node.js
  • Install Angular CLI
    • npm install -g @angular/cli

Creating Workspace and an Initial Application

Open terminal and navigate to the directory where you want to start a project.

Enter command to create a new application named hello-world-app

ng new hello-world-app

After entering command, CLI will ask you a few questions about adding routing and the format of the stylesheet you wish to use in the project.

Creating Workspace and an Initial Application

An overview of Project Structure

The ng new command creates a significant number of files, the files of special importance, these are created in the hello-world-app/src directory.


These files may be classified into three sorts:

  1. Workspace configuration

    .editorconfigConfiguration of code editors to ensure that identical coding styles are maintained for different developers working on the same project across several editors and IDEs.
    .gitignoreSpecifies untracked files that should be ignored by GIT
    README.mdIntroductory documentation for the root app
    angular.jsonCLI configuration defaults for all projects in the workspace, including configuration options for build, serve, and test tools that the CLI uses, such as TSLint, Karma and Protractor
    package.jsonConfigures the npm package requirements for all projects in the workspace.
    package-lock.jsonVersion information is provided for all packages put into node modules by the npm client.
    src/The root-level application project's source files.
    node_modules/Provides all npm packages to the workspace. All projects can see workspace-wide node modules dependencies.
    tsconfig.jsonDefault TypeScript setting for workspace projects.
  2. Application config

    browserslistConfigures sharing of target browsers and Node.js versions among various front-end tools.
    karma.conf.jsApplication-specific Karma configuration
    tsconfig.app.jsonApplication-specific TypeScript configuration, including TypeScript and Angular template compiler options.
    tsconfig.spec.jsonTypeScript configuration for the application tests.
    tslint.jsonApplication-specific TSLint configuration
  3. Application source

    app/Contains the component files that define your application logic and data.
    assets/Contains picture and other asset files that should be copied as-is when building your app.
    environments/Contains build configuration options for particular target environments.
    favicon.icoAn icon to use for this application in the bookmark bar
    index.htmlThe main HTML page that is served when someone visits your site.
    main.tsThe main entry point for your application. Compiles the application and bootstraps the application's root module (AppModule) to run in the browser.
    polyfills.tsProvides polyfill scripts for browser support.
    styles.cssGlobal CSS files that supply styles for a project
    test.tsThe main entry point for your unit tests, with some Angular-specific configuration. You don't typically need to edit this file.

Running initial application

To execute the newly built programme, open a terminal window and type the following command within the hello-world-app folder:

ng serve

The default port is set to http://localhost:4200/. When you open this in a browser, you'll see a new Angular application (default provided by angular).

Running initial application

Brief Introduction about Angular Components and Creating Components for Application

An angular application is built on angular components. It's a Directive, but it comes with an HTML template. An application may have many components that may be utilised independently anywhere in the programme.

Run the following command in the project directory terminal to create a new component:

ng g c hello-world

You'll get following files:


  1. hello-world.component.ts: It contains typescript class and all metadata related to the component
import { Component, OnInit } from '@angular/core';

  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
export class HelloWorldComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  1. hello-world.component.html: It contains template attached to the component
  2. hello-world.component.css: It contains styling related to the component
  3. hello-world.component.spec.ts: It contains unit test cases related to component.

Changing Template

Because we want to show Hello World, open hello-world.component.html and add the following to it:

    <h2>Hello World</h2>

Adding Styles

Open hello-world.component.css and add the following to it to style the component:

h2 {
  color: red;

Final Code and Loading Components

Add component selector to app.component.html to utilise component in the application.

Remove all other code and add following:



Final Code and Loading Components


  • Creating hello world by angular application is very easy using angular CLI
  • The Angular application has a large number of configuration files that will eventually aid us in development
  • Component selectors can be applied to templates in order to be included in applications
  • Attatched css file will only apply css to the attached component.
Free Courses by top Scaler instructors