Creating An Angular Application

This step-by-step tutorial will guide you through creating an Angular application from scratch using the Angular CLI.

Step 1 : Install node.js

Download and install node.js. make sure you have selected LTS (Long Time Supported) version.

Download Node.js

Step 2 : Install Angular CLI

The Angular CLI makes it easy to set up, build, and manage Angular projects.

Open your terminal or command prompt.
Run the following command to install Angular CLI globally

npm install -g @angular/cli

Verify the installation

ng version

Step 3 : Download and install vscode

Download Visual Studio Code – Mac, Linux, Windows

Step 4: Create a New Angular Application

• Open My Computer, select a drive, then create a folder named tutorial
• Goto the folder, In the address bar type CMD to open the command prompt
• Make sure you are in the tutorial folder

Open a command prompt terminal and run the following command:

ng new my-angular-app

Step 5: Navigate to the project directory

Above command will create a new application in a folder called my-angular-app. now go to the folder and open the app in vs code editor

// change folder
cd my-angular-app
// Now open the visual studio code editor by typing below command
code .

Open src/app/app.component.html in a code editor. And replace the content with below html code

<h1>Welcome to My Angular App</h1>
<hr>

Now open the vs code command prompt (press ctrl + ~ ) and run the application using below command

ng serve --o
// This will start your application in a browser 
// and it will show the output

Step 6 : Create an additional component

Now we will add a component to the application to display hello world. In the vs code command prompt press CTRL+C to stop the application. Then add below command to add a new component

ng generate component hello-world

This will create a new folder hello-world under src/app folder, and you will find below files created

• hello-world.component.html // this is an html file
• hello-world.component.ts // this is the code file
• hello-world.component.css // this is a css file
• hello-world.component.spec.ts // this is for creating test

A component is the basic building block of an angular application. A component is a simple class file with some metadata provided just above the class name. This meta data is called component directive. Every component has an @component() directive. this is a special function that has a json parameter. Below is a sample component

import { Component } from '@angular/core';
@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css'],
  standalone: true,
  imports: []
})
export class HelloWorldComponent {
  message: string = 'Hello, World!';
  constructor() {
    // Initialization logic can go here.
  }
}

@component has a json object parameter. And we need to tell the compiler the name of the selector, html and CSS. This is a standalone component, so there is no module. A standalone component needs to import all the dependencies using the imports keyword inside the @component directive.

We can use the selector to call this component from any other component. now add below line in the app.component.html

<hello-world></hello-world>
<hr>
// Then restart the application by entering the command at the command prompt
ng serve --o