Introduction

With Angular 7 you can build modern Single-Page-Application (SPA) for the web, mobile, or desktop.

In this article, we take a look how to build and run a simple Angular application with Angular 7. For building our application we will use official Angular CLI tool to accelerate development. This short tutorial is targeted towards beginners new to Angular.

Before you Start

Before you begin, you need to have Node.js version 8.x or 10.x and above and an npm package manager installed.
To install Node.js, go to nodejs.org.
To verify that you have the npm client installed, run npm -v command.

node -v
v10.15.0

npm -v
6.8.0

Installing Angular CLI

Once you will have installed node and npm you have to install Angular Command Line Interface which you will use to create an Angular project. Install the Angular CLI globally.

To install the CLI using npm run following command:

npm install -g @angular/cli

Create Your First Angular App

Now you will use angular cli tool to create your first angular application. You can create application by running following command:

ng new my-first-app

where:

• ng new: cli command to generate new application
• my-first-app: application name

During application creation process you will be asked about routing and preferred style format, accept the defaults. When this is done, you can now see a new folder called my-first-app. After Angular CLI installs the necessary Angular npm packages and other dependencies you can start you first application.

Running your First App

To run the application on a development server, run the commands:

cd my-first-app
ng serve --open

The ng serve command start the server and automatically open your browser to http://localhost:4200/ (due to –open flag). You will see your app in browser.

Editing your First App

To edit your application open ./src/app/app.component.ts and edit title property. After saving file your application will be rebuild and browser will reloads automatically with the new title.