How to create First Angular App (Step by step )

We are using visual studio 1.69 code editor for this project.
To use Angular your computer should have node.js and angular installed.
To install node see this and to install angular see this

To check the version of node.js use the node -v command
and to check the angular version use the ng version command
here we are using
Angular CLI: 14.1.0
Node: 16.15.0
Package Manager: npm 8.5.5
OS: win32 x64

Creating Folder

We have created a folder angular project in G:\ drive
we will save all our angular projects there.
On the Visual Studio code editor menu click on Terminal then new terminal (CTRL+SHIFT+).
It will open a new terminal
then first move to G:\angularproject
C:> cd G:
PS G:> cd .\angularproject\

How to create First angular app

To create a new Angular project use
ng new First-app
here ng new is the command and First-app is the name of the project.
It will ask a few questions

This will generate all files and components of angular.

To run this project type
ng serve
this will run the project on localhost:4200/
open the URL in the browser.
You will see the following output

How to run a first angular app
Fig: How to run a first angular app

Adding Your own Content

To change the above content goto

src->app->app.component.html

remove all content.

then put <h2>{{title}}</h2>

Then check the browser.

First Angular App
Fig: First Angular App

Adding More Content

It will show the Title name of your project.

Adding data to app.component.html

To add static content we can directly write in app.component.html

To add dynamic content you have to add content in app.component.ts

We added title description and author in class AppComponent as below

in app.component.html

To access app.component.html we use interpolation.

It will produce the following output

First Angular App Edited
Fig: First Angular App Edited