How to Create a New Angular Project

Before starting this tutorial, make sure that you have Angular installed on your computer. To create a new Angular project, follow these steps:

1. Open a terminal and execute the following Angular CLI command to create a new Angular project:

ng new my-sample-angular-app

2. When prompted with "Would you like to add Angular routing?", choose Yes by pressing Y.
3. When prompted with "Which stylesheet format would you like to use?", select CSS and press Enter.
4. After the project is created, navigate to the project folder:

cd my-sample-angular-app

5. Run your Angular project by executing the following command:

ng serve --open

The ng serve command starts the server, monitors your files, and rebuilds the app as you modify the files.

The --open (or simply -o) option opens your browser to http://localhost:4200/.

6. If your installation and setup were successful, you should see a page like the following in your browser, running at http://localhost:4200/:

7. Open your Angular project in the Visual Studio Code IDE. If Visual Studio Code is not already installed on your machine, you can download and install it from https://code.visualstudio.com/download.
8. Go to the root component of the project at src\app\ and open src\app\app.component.html file. Remove everything from the file except the last line <router-outlet></router-outlet>. The <router-outlet></router-outlet> acts as a placeholder which Angular dynamically updates based on the selected route. Now, add <h1>Hello World!</h1> to the file src\app\app.component.html and make the code look like the following:
src\app\app.component.html

<h1>Hello World</h1>
<router-outlet></router-outlet>

You will see something similar to this in your browser: