Angular is a full, opinionated front-end framework — written in and built around TypeScript — for creating client-side, single-page web applications (SPAs). It bundles everything a large app needs into one official, versioned package: components, templating, routing, forms, an HTTP client, and dependency injection. The name you may have heard, "Angular 2", is purely historical — it marked the December 2016 ground-up rewrite of the original AngularJS (1.x). The team dropped the number afterwards, so today it is simply Angular, now on v17-v20+ with a new major release roughly every six months. This article is the conceptual map of what Angular is and how it works; when you are ready to scaffold a real project, follow the hands-on getting started with modern Angular walkthrough.
Key takeaways
- "Angular 2" is just a label from 2016. There is no separate "Angular 2" to learn today — it became "Angular", which now ships a major version about every six months and sits at v17-v20+.
- Angular and AngularJS are different frameworks. AngularJS (1.x) is the legacy, JavaScript-based original; Angular (2+) is a TypeScript, component-based rewrite.
- The core building blocks are components, templates, data binding, directives, services, and dependency injection. Routing ties views together for a single-page app.
- Standalone components are now the default. You rarely write
@NgModuleanymore; apps bootstrap a single root component instead. - Signals are the modern reactivity primitive, working alongside RxJS observables for async streams.
- Built-in control flow (
@if,@for,@switch) has replaced the old*ngIf/*ngForstructural directives. - Choose Angular when you want a batteries-included, convention-driven framework for a large, long-lived application.
Is "Angular 2" still a thing? Angular vs AngularJS
This is the single biggest source of confusion, so let's settle it. AngularJS is version 1.x — the original 2010 framework based on plain JavaScript, scopes, controllers, and two-way $scope binding. It reached end of long-term support and is no longer maintained. Angular (with no "JS") is the complete rewrite that debuted as "Angular 2" in 2016: TypeScript-first, component-based, with a hierarchical dependency-injection system and a faster change-detection model.
After that 2016 release, Angular adopted semantic versioning and a steady cadence, so "Angular 2", "Angular 4", "Angular 16" and so on are all just the same evolving framework at different version numbers. You should never start a new project on "Angular 2" syntax — use current Angular.
| Aspect | AngularJS (1.x) | Angular (2 → v17-v20+) |
|---|---|---|
| Language | JavaScript | TypeScript |
| Architecture | MVC: controllers + $scope |
Components + services |
| Building block | Controllers & directives | Components & standalone APIs |
| Data binding | Two-way via $scope digest |
One-way by default, opt-in two-way |
| Dependency injection | String-token based | Hierarchical, typed DI |
| Mobile / performance | Limited | Built for performance & SSR |
| Status | End of life | Actively developed |
What are Angular's core building blocks?
Every Angular application is assembled from a small set of concepts. Understand these and you understand the framework:
- Components — the fundamental unit of UI. A component is a TypeScript class with an
@Componentdecorator that pairs a template (HTML) and styles (CSS) with logic and state. Components nest to form a tree, with one root component at the top. - Templates — the HTML for a component, extended with Angular's binding syntax and control flow so the view reacts to data.
- Data binding — the connection between a component's state and its template (interpolation, property binding, event binding, and two-way binding).
- Directives — instructions that change the DOM. Attribute directives like
ngClassandngStylealter appearance or behaviour; the old structural directives (*ngIf,*ngFor) are now superseded by built-in control flow. - Services & dependency injection (DI) — reusable logic (data access, business rules) lives in injectable services. Angular's DI system creates and supplies them where needed, which keeps components lean and testable.
- Routing — the Angular Router maps URLs to components so a single-page app can show different views without a full page reload.
Historically these were wired together inside an @NgModule. In modern Angular, standalone components are the default: each component declares its own imports, and there is usually no root module at all.
What does an Angular component look like?
Here is an idiomatic modern component. It is standalone (no NgModule), holds state in a signal, and uses the built-in control flow in its template. The @Component decorator is what tells Angular this class is a component and ties it to its template and styles.
// counter.component.ts
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-counter',
// standalone is the default in modern Angular — no NgModule required
template: `
<h2>{{ title }}</h2>
<p>Count: {{ count() }}</p>
<button (click)="increment()">Add one</button>
@if (count() > 4) {
<p>That's plenty!</p>
}
`,
})
export class CounterComponent {
// a plain property bound with interpolation
protected readonly title = 'A tiny Angular component';
// a signal holds reactive state; read it by calling count()
protected readonly count = signal(0);
increment(): void {
this.count.update((n) => n + 1);
}
}How does data binding work in Angular?
Data binding is the heart of how an Angular view stays in sync with component state. There are four flavours, and they cover almost everything you do in a template:
| Binding | Syntax | Direction | Use it for |
|---|---|---|---|
| Interpolation | {{ value }} |
Component → view | Rendering text into the template |
| Property binding | [src]="url" |
Component → view | Setting an element/component property |
| Event binding | (click)="save()" |
View → component | Reacting to user events |
| Two-way binding | [(ngModel)]="name" |
Both | Form inputs that read and write a value |
Unlike AngularJS, modern Angular is one-way by default — data flows down from component to template, and events flow up. Two-way binding still exists (the [(...)] "banana-in-a-box" syntax), but it is opt-in rather than the global default, which makes change detection far more predictable.
How do services and dependency injection work?
Components should focus on the view. Anything else — fetching data, talking to an API, sharing state — belongs in a service: an ordinary class marked @Injectable. Angular's dependency injection then hands that service to whoever asks for it, creating a single shared instance by default. Modern Angular uses the inject() function to request dependencies, though constructor injection still works.
// user.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root' }) // one shared instance app-wide
export class UserService {
private readonly http = inject(HttpClient);
getUsers() {
return this.http.get<User[]>('/api/users');
}
}
// any-component.ts — ask for the service via inject()
import { Component, inject } from '@angular/core';
import { UserService } from './user.service';
@Component({ selector: 'app-users', template: `...` })
export class UsersComponent {
private readonly users = inject(UserService);
}How does Angular handle reactivity: signals vs RxJS?
Angular has two complementary reactive tools. Signals are the newer primitive for holding state: a signal is a value you read by calling it (count()) and update with .set() or .update(). Derived values use computed(), and side effects use effect(). Because Angular knows exactly which signals a template reads, it can update the DOM with surgical precision.
RxJS observables remain the right tool for streams of asynchronous events — HTTP responses, WebSocket messages, user-input debouncing. The two interoperate (Angular ships helpers to convert between them), so it is not an either/or decision: reach for signals for synchronous component state, and RxJS for async pipelines.
What does "client-side" rendering mean, and how does routing fit in?
Angular builds single-page applications. The browser downloads the app once, and from then on Angular renders views and updates the DOM on the client without full page reloads — that is what "client-side" means. Navigation is handled by the Angular Router: you map URL paths to components, and the router swaps the view in place while keeping the page alive. This gives the snappy, app-like feel users expect, with features like lazy-loaded routes and route guards to protect pages.
Client-side rendering has a trade-off — the first load ships JavaScript before content appears — so modern Angular also offers server-side rendering (SSR) with hydration (added with ng add @angular/ssr) to improve first-paint and SEO when you need it.
When should you choose Angular over React, Vue, or Svelte?
Angular's defining trait is that it is batteries-included: routing, forms, HTTP, and SSR are official, versioned, and consistent. That suits larger teams and long-lived enterprise apps where conventions matter more than flexibility. React and Vue give you a lighter core that you compose with third-party libraries; Svelte compiles away the framework for very small bundles.
| Framework | Type | Language lean | Best fit |
|---|---|---|---|
| Angular | Full framework | TypeScript-first | Large, long-lived enterprise apps that want strong conventions |
| React | UI library | JS/TS + ecosystem | Teams that want flexibility and a huge component ecosystem |
| Vue | Progressive framework | JS/TS | Fast-moving teams wanting a gentle learning curve |
| Svelte | Compiler | JS/TS | Small, performance-critical apps with minimal runtime |
There is no universally "best" choice — pick Angular when you value an integrated, opinionated toolchain that keeps a big codebase consistent over time.
Where should you go next?
Now that the concepts make sense, the practical path looks like this:
- Scaffold and run your first project with the hands-on getting started with modern Angular guide (CLI install,
ng new, standalone components). - Capture and validate user input with reactive and template-driven forms in Angular.
- Protect routes and gate features with Angular route guards for authentication.
- Want an experienced team to build or modernize the app for you? MicroPyramid offers Angular development services covering greenfield builds, AngularJS-to-Angular migrations, and ongoing support — backed by 12+ years and 50+ delivered projects.
Frequently Asked Questions
Is Angular the same as AngularJS?
No. AngularJS is version 1.x — the original JavaScript framework based on controllers and $scope two-way binding, and it has reached end of life. Angular (with no "JS") is the TypeScript, component-based rewrite that started as "Angular 2" in 2016 and is actively developed today. They are different frameworks, not different versions of the same one.
Why is Angular sometimes called "Angular 2"?
Because "Angular 2" was the name of the 2016 release that replaced AngularJS. Right after that, the team dropped the number from the name and moved to a roughly six-monthly major-release cadence. So "Angular 2" is just a historical label — today the framework is simply called Angular and sits at v17-v20+.
Is Angular only for single-page applications?
Angular is designed first and foremost for client-side single-page applications, where the browser loads the app once and updates views without full reloads. It is not limited to that, though: with server-side rendering and hydration (ng add @angular/ssr) you can pre-render pages on the server for faster first paint and better SEO.
Do I need to know TypeScript to use Angular?
Effectively yes. Angular is written in and built around TypeScript, and all official documentation, tooling, and generated code use it. The good news is you only need the basics — types, classes, decorators, and interfaces — to be productive, and the Angular CLI configures the TypeScript compiler for you.
What are signals in Angular?
Signals are Angular's modern reactivity primitive for holding state. A signal is a value you read by calling it like a function (count()) and change with .set() or .update(); computed() derives values and effect() runs side effects. They let Angular update only the parts of the DOM that actually depend on a changed value.
When should I choose Angular over React or Vue?
Choose Angular when you want a complete, opinionated framework — routing, forms, HTTP, and SSR included and officially maintained — which suits large teams and long-lived enterprise applications. React and Vue offer lighter cores you assemble from third-party libraries, giving more flexibility at the cost of more decisions. All three are capable; the trade-off is conventions versus flexibility.