🅰️ Angular Framework Overview

What Is Angular?

Angular is a comprehensive framework for building client-side single-page applications (SPAs) with HTML, CSS, and TypeScript. It is maintained by Google and used at scale by enterprises that value consistency and long-term maintainability over maximum flexibility.

💡 The framework-vs-library distinction: A library (like React) does one job and lets you pick everything else — router, data fetching, forms. A framework (like Angular) makes those decisions for you and provides them in the box. The trade-off is opinion for convenience: you write less glue code, but you follow Angular's way of doing things.

Because Angular ships a router, an HTTP client, a forms system, a dependency-injection container, and a testing harness together, two Angular projects at two different companies look remarkably alike. That familiarity is Angular's superpower on large teams: a developer can move between codebases and be productive quickly.

A Short History

Knowing the timeline saves you from a common confusion: "AngularJS" and "Angular" are two different things.

An analogy: AngularJS was a house built with traditional, on-site carpentry. Modern Angular is the same house built from a standardized, prefabricated system — the result looks similar, but the newer approach gives you consistent parts, better tooling, and a far more predictable build.

The Five Pillars

Five features define the Angular developer experience. Understand these and the rest of the framework falls into place.

1. TypeScript-first

Angular is written in TypeScript and assumes you'll use it too. Strong typing gives you autocomplete, safe refactors, and compile-time error catching — invaluable on codebases with hundreds of files.

2. Component-based architecture

Every screen is a tree of components, each bundling a template, a class of logic, and scoped styles. Components nest and compose, so complex UIs are built from small, testable pieces.

3. Dependency injection (DI)

Angular has a built-in DI container. A component declares what it needs in its constructor and Angular supplies it — which makes services shareable and, crucially, easy to swap for mocks during testing.

4. RxJS & reactivity

Asynchronous data (HTTP responses, user events, timers) flows through Observables from the RxJS library. Newer Angular adds signals for simpler, fine-grained reactive state.

5. A complete toolkit

Router, forms (template-driven and reactive), HttpClient, and testing utilities all ship with the framework — no shopping around for third-party packages to cover the basics.

Core Building Blocks

Four concepts make up almost every Angular app. Here's how they relate: a component renders a template, injects services for data and logic, and uses directives and pipes to shape what appears on screen.

Components

A component is a TypeScript class annotated with the @Component decorator. The decorator's metadata connects the class to a template and styles.

// product-list.component.ts
import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Product } from './product.model';
import { ProductService } from './product.service';

@Component({
  selector: 'app-product-list',          // used as <app-product-list> in HTML
  standalone: true,                       // modern Angular: no NgModule needed
  imports: [CommonModule],                // template dependencies
  templateUrl: './product-list.component.html',
  styleUrl: './product-list.component.css',
})
export class ProductListComponent implements OnInit {
  products: Product[] = [];
  selectedProduct: Product | null = null;

  // inject() is the modern alternative to constructor injection
  private productService = inject(ProductService);

  ngOnInit(): void {
    this.productService.getProducts()
      .subscribe(products => (this.products = products));
  }

  selectProduct(product: Product): void {
    this.selectedProduct = product;
  }
}

Templates & data binding

Templates are HTML enhanced with Angular's binding syntax and the new built-in control flow (@if, @for) introduced in Angular 17:

<!-- product-list.component.html -->
<h2>Products</h2>

@if (products.length === 0) {
  <p class="no-data">No products found.</p>
} @else {
  <ul>
    @for (product of products; track product.id) {
      <li [class.selected]="product === selectedProduct"
          (click)="selectProduct(product)">
        <span>{{ product.name }}</span>
        <span>{{ product.price | currency }}</span>
      </li>
    }
  </ul>
}

The bindings are worth memorizing: {{ }} interpolates a value, [prop] binds a property one way, (event) listens for an event, and [(ngModel)] binds two ways. The | currency at the end is a pipe.

Services

Services hold non-UI logic — data fetching, business rules, shared state — and are provided through DI. The providedIn: 'root' option makes a service an app-wide singleton:

// product.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, catchError, of, tap } from 'rxjs';
import { Product } from './product.model';

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

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.productsUrl).pipe(
      tap(() => console.log('fetched products')),
      catchError(() => of([])) // keep the app running on error
    );
  }
}

Directives & pipes

Directives attach behavior to elements — ngClass toggles classes, ngStyle sets inline styles, and you can write custom ones. Pipes transform values for display without mutating them: {{ price | currency }}, {{ name | uppercase }}, or a chain like {{ birthday | date:'fullDate' | uppercase }}.

Standalone Components & a First App

Historically every Angular building block had to be declared inside an NgModule — a chunk of configuration boilerplate. Since Angular 15, standalone components are the default: a component declares its own template dependencies via its imports array, and the app boots without a root module.

// main.ts — bootstrapping a standalone app
import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),   // makes HttpClient injectable everywhere
    provideRouter(routes), // registers application routes
  ],
});

Compare that with the older module-based bootstrap, which required a separate AppModule listing every declaration, import, and provider. Standalone components remove that ceremony while keeping the same DI and component model.

The Angular CLI

The Angular CLI is the command-line tool that scaffolds projects, runs a dev server, generates code, and builds for production. It enforces consistent structure so you spend time on features, not boilerplate.

# Install the CLI globally (once)
npm install -g @angular/cli

# Create a new project (prompts for routing + stylesheet)
ng new my-angular-app

# Move in and start the dev server with live reload
cd my-angular-app
ng serve --open

# Generate a standalone component and a service
ng generate component dashboard      # shorthand: ng g c dashboard
ng generate service services/data    # shorthand: ng g s services/data

# Build an optimized production bundle
ng build

A freshly generated project has a predictable shape:

my-angular-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts      # root component logic
│   │   ├── app.component.html    # root template
│   │   ├── app.component.css     # root styles
│   │   ├── app.routes.ts         # route definitions
│   │   └── app.config.ts         # app-level providers
│   ├── assets/                   # images, fonts, static files
│   ├── index.html                # single HTML shell
│   ├── main.ts                   # bootstrap entry point
│   └── styles.css                # global styles
├── angular.json                  # CLI/build configuration
├── package.json                  # dependencies & scripts
└── tsconfig.json                 # TypeScript configuration

✔ Compiled successfully.
  ➜  Local:   http://localhost:4200/
  ➜  watch mode enabled. Watching for file changes...

Angular vs React vs Vue

These three dominate the frontend world. None is objectively "best"; they make different trade-offs.

Hands-on Exercise

// metric-card.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-metric-card',
  standalone: true,
  template: `
    <div class="metric-card">
      <h3>{{ title }}</h3>
      <p class="value">{{ value }}</p>
    </div>
  `,
  styles: [`
    .metric-card { border: 1px solid #ccc; border-radius: 8px; padding: 1rem; }
    .value { font-size: 2rem; font-weight: 700; }
  `],
})
export class MetricCardComponent {
  @Input() title = '';
  @Input() value: string | number = '';
}

<!-- app.component.html -->
<app-metric-card [title]="'Users'" [value]="1284"></app-metric-card>
<app-metric-card [title]="'Revenue'" [value]="'$9,410'"></app-metric-card>
<app-metric-card [title]="'Uptime'" [value]="'99.9%'"></app-metric-card>

Summary & Quiz

📚 Further Reading

• angular.dev — Official documentation
• Learn Angular — interactive tutorial
• Angular CLI reference
• RxJS documentation

🚀 What's Next?

Next we'll go deep on the most important building block: the component. You'll learn its anatomy, lifecycle hooks, and every way parents and children can talk to each other.