Getting Started

By Syncfusion®, Inc. · Last updated November 5, 2026

What Angular is, why teams use it, how it differs from plain JavaScript, and how to install Node.js and the Angular CLI, create a project, read its files and run it.

Introduction to Angular

Angular is a framework for building web applications quickly and efficiently.

A framework is a ready-made collection of tools and rules that simplifies development by handling many common and repetitive tasks.

Angular is free, open source, and maintained by Google. It uses TypeScript, which adds type safety to JavaScript and helps create more maintainable applications.

Real-World Example

Consider a banking dashboard with a login page, an accounts list, a transfer form and live balance updates.

With plain JavaScript, your team writes its own routing, form validation, HTTP calls and DOM updates, and every developer may do it differently.

Angular provides all of these as built-in features with one standard structure, so the team spends its time on banking features instead of infrastructure code.

Your First Angular App

Every Angular app is built from components. A component is one piece of the screen, such as a header, a menu or a product card.

Run the code below. The panel on the right shows the real app.

A complete Angular app in seven lines

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

@Component({
  selector: 'app-root',
  template: `<h1>Hello, Angular!</h1>`,
})
export class App {}

The page shows Hello, Angular!

Here is what each part does:

• @Component marks the class as a component.
• selector is the name of the HTML tag for this component.
• template is the HTML the component shows on the screen.
• export class App is the class that holds the component's data and logic.

Why Angular?

Small pages are easy to build with plain JavaScript. Big apps are not.

A big app has many screens, many forms and many people working on it. Without clear rules, every developer builds things in a different way. The code becomes hard to read and hard to change.

Angular solves this with one clear way to build an app.

• One structure for every app. Any Angular developer can open your project and find their way around.
• Everything included. Routing, forms and calls to a server are all part of Angular. You do not need to pick many separate libraries.
• TypeScript by default. Many mistakes are found before the app runs.
• Built for large teams. Big companies use Angular for apps that live for many years.

Features of Angular

These are the main features you will learn in this course.

• Components. Build the screen from small, reusable pieces.
• Templates. Write HTML with extra Angular syntax, such as {{ name }} to show a value.
• Data binding. When your data changes, the screen updates by itself.
• Signals. A simple way to store a value that the screen watches.
• Dependency injection. Share code, such as a data service, between components.
• Routing. Move between pages without reloading the browser.
• Forms. Build forms and check what the user types.
• HTTP client. Get data from a server and send data to it.
• Angular CLI. A command-line tool that creates, runs and builds your app.

The next example shows two of these features. Data binding shows a value in the page. The @for block repeats a line for every item in a list.

The screen is built from the data

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

@Component({
  selector: 'app-root',
  template: `
    <h2>{{ courseName }}</h2>
    <p>Lessons in this chapter:</p>
    <ul>
      @for (lesson of lessons; track lesson) {
        <li>{{ lesson }}</li>
      }
    </ul>
  `,
})
export class App {
  courseName = 'Angular Fundamentals';
  lessons = ['Getting Started', 'Components', 'Templates'];
}

Add a fourth lesson name to the lessons list and run the code again. A new line appears in the list. You did not write any new HTML.

Angular vs Traditional JavaScript

In traditional JavaScript, you change the page yourself. You find an element, then you set its text.

In Angular, you change the data. Angular updates the page for you.

Both examples below build the same counter. Run each one and click its button.

Angular: you update the data, and the page follows

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p>Clicks: {{ count() }}</p>
    <button (click)="add()">Add one</button>
  `,
})
export class App {
  count = signal(0);

  add() {
    this.count.update((value) => value + 1);
  }
}

The Angular version never touches the page directly. It only changes count. The screen follows the data.

Traditional JavaScriptAngularYour codeFind elementPageYou find every element and change itby hand, again and again.CodeDataPageYou change the data.Angular updates the page for you.

The same counter, two ways of thinking.

Single Page Applications

A Single Page Application (SPA) loads one HTML page only once. After that, it changes the content inside that page as the user moves around.

A traditional website works differently. Every click on a link asks the server for a brand new page. The screen goes blank for a moment while the new page loads.

Traditional websiteSingle Page ApplicationPage 1Reloading the whole page…Menu stays in placeHomeCoursesProfileEvery click loads a new pageOnly the content area changes

An SPA swaps the content, not the whole page.

Angular apps are SPAs. Run the example and click the buttons. The view changes, but the page never reloads.

Three views, one page, no reload

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="view.set('Home')">Home</button>
    <button (click)="view.set('Courses')">Courses</button>
    <button (click)="view.set('Profile')">Profile</button>

    @if (view() === 'Home') {
      <h2>Home</h2>
      <p>Welcome back, Asha.</p>
    } @else if (view() === 'Courses') {
      <h2>Courses</h2>
      <p>You are learning Angular.</p>
    } @else {
      <h2>Profile</h2>
      <p>Asha, member since 2024.</p>
    }
  `,
})
export class App {
  view = signal('Home');
}

Real apps use the Angular router for this. The router also changes the address in the browser bar. You will learn it in a later chapter.

Angular Ecosystem Overview

The Angular ecosystem is the set of tools and libraries that work with Angular.

• Angular CLI. Creates, runs, tests and builds your app from the command line.
• Angular Router. Moves between pages inside an SPA.
• Angular Forms. Builds forms and checks the values a user types.
• HttpClient. Talks to a server to get or save data.
• Angular Material. Ready-made buttons, menus, tables and dialogs that follow Google's Material Design.
• Angular DevTools. A browser add-on that shows your components and their data while the app runs.
• RxJS. A library for handling data that arrives over time, such as server responses.
• Angular SSR. Builds the first page on the server, so the page appears faster and search engines can read it.

You do not need all of these on day one. This course adds them one at a time.

Installing Node.js

Angular tools run on Node.js. Node.js runs JavaScript outside the browser, on your own computer.

Node.js also installs npm, the tool that downloads packages such as Angular.

Step 1: Download Node.js

Go to nodejs.org and download the LTS version. LTS means Long Term Support. It is the stable version that most people should use.

Angular 22 needs Node.js 22.22.3 or newer, or Node.js 24.15.0 or newer. The current LTS version works.

Step 2: Install it

Run the installer and accept the default options.

Step 3: Check the installation

Open a terminal. On Windows, use Command Prompt or PowerShell. On a Mac, use Terminal. Then type:

node -v
npm -v

Each command prints a version number. Your numbers may be newer.

v24.15.0
11.6.2

If you see command not found or is not recognized, close the terminal, open a new one and try again. A new terminal reads the updated settings.

Installing Angular CLI

The Angular CLI is a command-line tool. CLI stands for Command Line Interface. You type ng commands, and the CLI does the work.

Install it once, for your whole computer:

npm install -g @angular/cli

The -g option means "global". It makes the ng command available in every folder.

Check that it works:

ng version

The command prints the Angular CLI version, your Node.js version and your operating system.

Creating an Angular Application

Go to the folder where you keep your projects. Then run:

ng new my-first-app

The CLI asks a few questions, such as which stylesheet format to use. For now, press Enter to accept each default.

The CLI then does three things:

1. It creates a folder called my-first-app.
2. It writes all the starter files into that folder.
3. It downloads every package the app needs. This can take a minute or two.

If you want the defaults without any questions, add --defaults:

ng new my-first-app --defaults

Understanding Project Structure

Open the my-first-app folder in your code editor. These are the files that ng new creates.

my-first-app/
├── public/
│   └── favicon.ico
├── src/
│   ├── app/
│   │   ├── app.ts
│   │   ├── app.html
│   │   ├── app.css
│   │   ├── app.spec.ts
│   │   ├── app.config.ts
│   │   └── app.routes.ts
│   ├── index.html
│   ├── main.ts
│   └── styles.css
├── angular.json
├── package.json
├── tsconfig.json
├── tsconfig.app.json
└── tsconfig.spec.json

The Files You Will Edit Most

The Files That Start the App

The Project Files

Many older tutorials show files such as app.component.ts and app.module.ts. Those names come from older Angular versions. New projects use the shorter names shown above.

Angular Architecture

Architecture means how the parts of an app fit together.

An Angular app is a tree of components. The main component, App, sits at the top. It contains other components, and they can contain more components.

AppHeaderCourseListFooterCourseCardCourseCardCourseService

Components form a tree. App is the parent of Header, CourseList and Footer. A service sends data to the components that ask for it.

The Main Building Blocks

• Component. A piece of the screen. It has a class (the data and logic) and a template (the HTML).
• Template. The HTML that a component shows. It can display data and react to clicks.
• Service. A class that holds shared logic or data, such as the code that talks to a server.
• Dependency injection. The way a component asks Angular for a service. Angular creates the service and hands it over.
• Router. Decides which component to show for each address in the browser bar.

See It Work

The example below has two components and one service. App shows a CourseCard for every course. Both get the course list from CourseService.

Two components share one service

import { Component, Injectable, Input, inject } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CourseService {
  getCourses() {
    return ['Angular', 'TypeScript', 'RxJS'];
  }
}

@Component({
  selector: 'course-card',
  template: `<li>📘 {{ title }}</li>`,
})
export class CourseCard {
  @Input() title = '';
}

@Component({
  selector: 'app-root',
  imports: [CourseCard],
  template: `
    <h2>My Courses ({{ courses.length }})</h2>
    <ul>
      @for (course of courses; track course) {
        <course-card [title]="course" />
      }
    </ul>
  `,
})
export class App {
  courses = inject(CourseService).getCourses();
}

Here is the flow, from the top:

1. App asks Angular for CourseService with inject().
2. The service returns three course names.
3. The @for block creates one CourseCard for each name.
4. Each card receives its name through [title].

Running an Angular Application

Go into the project folder, then start the development server:

cd my-first-app
ng serve

After a few seconds, the terminal shows a local address:

➜  Local:   http://localhost:4200/

Open http://localhost:4200 in your browser. You see the Angular welcome page.

ng serve keeps running and watches your files. When you save a change, the browser updates by itself. To stop the server, press Ctrl+C in the terminal.

You can also run npm start. It runs ng serve for you.

What Happens When the App Starts

1index.html2main.ts3bootstrapApplication()4App on screeninside app-root

Each step lights up in the order it happens.

1. The browser loads index.html. The page contains an empty <app-root> tag.
2. The browser runs the code from main.ts.
3. main.ts calls bootstrapApplication(App, appConfig).
4. Angular finds the <app-root> tag and draws the App component inside it.

The next example uses the same bootstrapApplication call as a real main.ts file. Change the title and run it again.

Starting the app, the same way main.ts does

import { Component, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `<h1>{{ title() }}</h1><p>The app started.</p>`,
})
export class App {
  title = signal('my-first-app');
}

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

Useful CLI Commands

Common Mistakes

Check Yourself

Exercises

What to Remember

• Angular is a framework for building large web apps from components.
• In Angular, you change the data, and Angular updates the page.
• Install Node.js, then the Angular CLI. Create an app with ng new and run it with ng serve.

Next: Components, how to build your own pieces of the screen.