Angular

Angular is a TypeScript framework from Google for building large web applications. The user interface is a tree of components, each one a class paired with an HTML template and styles. Components declare inputs and outputs, and get their services through dependency injection.

Paradigm: Component-Oriented Programming

What Makes Angular Special

  • Component = class + template + styles. The @Component decorator attaches a selector such as app-counter, a template and optional styles to a TypeScript class.
  • A public interface. input() declares values a parent can pass in and output() declares events it can emit. Everything else stays private.
  • Dependency injection. A component asks for services in its constructor or with inject(), and Angular supplies them. Services are singletons or scoped to a component.
  • Signals. Reactive state (signal(), computed()) updates the template automatically and precisely when values change.
  • Batteries included. Routing, forms, an HTTP client, testing tools and a CLI come with the framework, which suits big teams.

Example: A counter component with an input

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <button (click)="count = count + 1">
      {{ label() }}: {{ count }}
    </button>
  `,
})
export class CounterComponent {
  label = input('Clicks');   // set by the parent
  count = 0;                 // private state
}

// In a parent template:  <app-counter label="Likes" />

How It Works

  • selector is the new HTML tag. The template is the view, and {{ ... }} binds class values into it.
  • label = input('Clicks') is the public interface: a parent can override it, and the default is Clicks.
  • (click) binds a DOM event to an expression. count is state internal to this component instance.
  • Each <app-counter> is an independent instance with its own count, and the class can be tested without the rest of the app.

History and Where It Is Used

Angular is widely used for enterprise dashboards, internal tools and large multi-team applications, and it releases on a predictable schedule. It follows the same component ideas as Web Components and can export components as custom elements. See also the TypeScript roadmap.

Learn More