What Is Angular? A Conceptual Introduction

Angular is a complete, opinionated framework for building web applications, maintained by Google — the distinction from a library like React matters more than it might seem: a framework makes many structural decisions for a project up front (routing, HTTP handling, forms, dependency injection, testing setup), while a library typically solves one specific problem and leaves the rest of the architecture to be assembled from other tools.

1. Components: the core building block

@Component({
  selector: 'app-product-card',
  template: `<div>{{ product.name }}</div>`,
})
export class ProductCardComponent {
  @Input() product!: Product;
}

An Angular application is built as a tree of components, each combining a TypeScript class (the logic and data) with an HTML template (what's actually rendered) — this pairing is the fundamental unit everything else in an Angular app is composed from.

2. TypeScript is not optional

Unlike some frameworks where TypeScript is an added, optional layer, Angular is built with and around TypeScript specifically — decorators like @Component and @Injectable, strict typing throughout the framework's own APIs, and its tooling all assume TypeScript as the default, not JavaScript with TypeScript bolted on afterward.

3. Dependency injection is built into the framework itself

@Injectable({ providedIn: 'root' })
export class ProductService {
  private http = inject(HttpClient);
}

As covered in more depth in an earlier look at Angular services, dependency injection isn't a pattern developers opt into manually — it's a core framework mechanism, used pervasively throughout Angular's own APIs (HttpClient, the router, and more), not just something available for custom application code.

4. A batteries-included approach to common needs

Routing (@angular/router), HTTP requests (HttpClient), reactive and template-driven forms, and a full testing setup are all official, first-party parts of the Angular ecosystem, maintained alongside the framework itself — a new Angular project typically doesn't need to evaluate and choose a separate third-party library for any of these foundational needs the way a React project commonly does.

5. Change detection — how Angular knows when to update the DOM

Angular tracks when component data changes and automatically re-renders only the affected parts of the DOM — historically through "zone.js" monkey-patching async browser APIs to detect changes automatically; more recent Angular versions (17+) increasingly use signals, a more explicit and granular reactivity model, as an alternative that doesn't rely on zone.js's broader detection approach.

6. Who Angular tends to fit well

Angular's opinionated, complete structure tends to suit larger applications and teams specifically — the upfront structure and conventions (there's a "correct Angular way" to do most common things) pay off more clearly at scale, where consistency across many contributors matters, than for a small, quick project where a lighter library with fewer built-in decisions might get something running faster with less initial setup.

7. What building an Angular app actually looks like day to day

ng generate component product-list
ng generate service product
ng serve

As covered in setting up a new Angular project, the Angular CLI is a core part of the day-to-day workflow — generating consistently-structured components and services, running a dev server with live reload, and building for production are all handled through one consistent, official tool rather than an assembled set of separate community tools.