Angular Get Started

The Angular CLI is a command-line tool that creates, runs and builds Angular projects for you.

Step 1: Install Node.js

Angular needs Node.js and npm. Install the LTS version from the official Node.js website and check it:

Example

bash

node -v
npm -v

Output

v24.11.0
11.6.1

Step 2: Install the Angular CLI

Install the CLI globally so the ng command works everywhere:

Example

bash

npm install -g @angular/cli
ng version

On Windows, if PowerShell blocks the ng command, run it from Command Prompt or allow local scripts in PowerShell.

Step 3: Create a Project

Example

bash

ng new school-app

The CLI asks a few questions, such as which stylesheet format to use (choose CSS to start) and whether to enable server-side rendering (choose No for now). It then creates the folder and installs packages. This can take a few minutes.

Step 4: Run the App

Example

bash

cd school-app
ng serve

Output

Application bundle generation complete.

  ➜  Local:   http://localhost:4200/

Open http://localhost:4200/ in your browser. When you save a file, the page reloads by itself. Press Ctrl + C to stop the server.

npm start does the same thing as ng serve.

The Main Files

File	What it is for
`src/index.html`	The single HTML page, with the `<app-root>` tag
`src/main.ts`	Starts the app with `bootstrapApplication`
`src/app/app.ts`	The root component class
`src/app/app.html`	The root component's template
`src/app/app.css`	Styles for the root component
`src/app/app.config.ts`	App-wide settings and providers, like the router
`src/app/app.routes.ts`	The list of routes (pages)
`angular.json`	Build and project settings

In Angular versions before 20, these files were named app.component.ts, app.component.html and so on, and the class was called AppComponent. The ideas are the same.

How the App Starts

src/main.ts:

Example

typescript

import { bootstrapApplication } from "@angular/platform-browser";
import { appConfig } from "./app/app.config";
import { App } from "./app/app";

bootstrapApplication(App, appConfig).catch((err) => console.error(err));

Angular finds the <app-root> tag in index.html and shows the App component there.

Your First Change

Open src/app/app.ts and set a few values:

Example

typescript

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.html",
  styleUrl: "./app.css",
})
export class App {
  school = "Orangi Model School";
  students = 320;
}

Replace everything in src/app/app.html with:

Example

html

<h1>{{ school }}</h1>
<p>We have {{ students }} students this year.</p>

Output

Orangi Model School
We have 320 students this year.

Useful CLI Commands

Command	What it does
`ng serve`	Runs the development server
`ng generate component header`	Creates a new component (short: `ng g c header`)
`ng generate service data`	Creates a new service
`ng build`	Builds optimized files into the `dist` folder
`ng test`	Runs unit tests

Exercise

Which command starts the Angular development server?

ng startng newng serveng build