Angular Introduction

Angular is a framework for building web applications with TypeScript. It is used for large, long-lived apps such as banking dashboards, hospital systems, admin panels and online exam portals, where many developers work on the same code for years.

In this lesson you will learn what Angular is, what problems it solves, how an Angular app is organised, and which version this tutorial teaches.

What is Angular?

A framework is a set of tools and rules that gives your app its structure. You write small pieces, and the framework connects them, updates the page and handles common jobs for you.

Angular is maintained by a team at Google and is free and open source. It is a complete framework: the core package, a router for moving between pages, a forms library, an HTTP client, testing tools, server-side rendering and a command-line tool all come from the same team and are released together with the same version number. This is different from libraries such as React, where you choose the router, forms and data tools yourself.

An Angular app is a single-page application (SPA). The browser loads one HTML page once, and Angular then changes parts of that page as the user clicks, types and navigates. The page does not reload for every click, so the app feels fast, like a mobile app.

The main building blocks

You will meet these ideas again and again in this tutorial:

Here is a small but complete Angular component. Do not worry about every detail yet; each part has its own lesson.

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

@Component({
  selector: 'app-greeting',
  template: `
    <h1>Namaste, {{ name() }}!</h1>
    <p>You have {{ marks() }} marks in the mock test.</p>
    <button (click)="addBonus()">Add 5 bonus marks</button>
  `,
})
export class Greeting {
  name = signal('Ananya');
  marks = signal(72);

  addBonus() {
    this.marks.update((m) => m + 5);
  }
}

When this component is shown, the page displays:

Namaste, Ananya!
You have 72 marks in the mock test.
[Add 5 bonus marks]

Each click on the button adds 5 to marks, and Angular updates only the paragraph that shows it. You never touch the DOM yourself: you change data, and Angular changes the page.

• @Component is a decorator: it marks the class as a component and gives Angular its settings.
• selector is the custom HTML tag for this component, so other templates can write <app-greeting />.
• {{ name() }} is interpolation: it prints a value into the HTML.
• (click)="addBonus()" is an event binding: it runs a method when the button is clicked.

Angular vs AngularJS

The name causes confusion, so get it clear now. AngularJS (versions 1.x, first released in 2010) was the original framework, written in JavaScript. In 2016 the team released a complete rewrite in TypeScript called Angular (version 2 and later). They are different frameworks: code does not move from one to the other without a rewrite.

AngularJS reached the end of its official support at the end of 2021. If you search the web, check that an answer is about Angular and not AngularJS. Signs of old AngularJS code are ng-app, ng-controller, $scope and ng-repeat. You will see more about this in NgModules & AngularJS (Legacy).

Angular 22: the version in this tutorial

This tutorial teaches Angular 22, released on 3 June 2026. Starting with version 22, the Angular team plans one major release per year with several minor releases in between, and each major version gets 12 months of active support followed by 12 months of long-term support (security and critical fixes only).

Modern Angular looks quite different from the Angular of a few years ago. New projects use:

• Standalone components: no NgModule files are needed.
• Built-in control flow: @if, @for and @switch blocks directly in templates.
• Signals for state, with input(), output() and model() functions for component communication.
• Zoneless change detection: the old zone.js library is no longer added to new apps.
• OnPush by default: in Angular 22, components only re-check when something they depend on changes.
• Signal Forms and the resource API, both stable in Angular 22.
• Vitest as the default unit test runner.

What you should know first

Angular code is written in TypeScript, a typed version of JavaScript. Before starting, you should be comfortable with HTML, CSS and modern JavaScript (let/const, arrow functions, classes, modules, promises). Basic TypeScript types and classes help a lot; if they are new to you, read the TypeScript Introduction and Classes & Access Modifiers first.

Common mistakes

• Mixing up Angular and AngularJS. An answer that uses $scope or ng-controller is for the old framework and will not work in Angular 22.
• Following outdated tutorials. Code that adds standalone: true, zone.js or a large app.module.ts is from older versions. It may still run, but it is not how new apps are written.
• Changing the DOM by hand. Using document.getElementById to change text fights with Angular. Change the data (usually a signal) and let Angular update the page.

Key points

• Angular is a complete, TypeScript-based framework from Google for building single-page applications.
• An app is built from components (class + template + styles), services, signals and routes.
• AngularJS (1.x) is a different, older framework whose support ended in 2021.
• This tutorial teaches Angular 22 (June 2026): standalone components, built-in control flow, signals, zoneless change detection and OnPush by default.
• You change data and Angular updates the page; you rarely touch the DOM directly.

@Component({
  selector: 'app-greeting',
  template: `
    <h1>Namaste, {{ name() }}!</h1>
    <p>You have {{ marks() }} marks in the mock test.</p>
    <button (click)="removeMarks()">Remove 2 marks</button>
  `,
})
export class Greeting {
  name = signal('Ananya');
  marks = signal(72);

  removeMarks() {
    this.marks.update((m) => m - 2);
  }
}