Angular Fundamentals

Angular is a web framework for building applications with TypeScript, HTML, and CSS. It gives you one integrated system for user interfaces, navigation, forms, server communication, testing, and build tooling.

That integration is Angular's central tradeoff. You adopt more structure than a small view library requires. In return, teams get shared conventions and first-party solutions for common application problems.

Angular works well when an application has many screens, substantial user interaction, or a team that benefits from consistent patterns. A small static page may not need a framework. A content-heavy site may need server rendering or prerendering rather than client-only rendering.

Think in component trees

An Angular application is a tree of components. Each component owns a part of the page and the behavior behind it.

A component has three core parts:

A TypeScript class holds state and behavior.
An HTML template describes the rendered view.
A selector identifies the component in another template.

The @Component decorator adds Angular metadata to the class. Modern Angular components are standalone by default. A standalone component lists the components, directives, and pipes used by its template in its own imports array.

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

@Component({
  selector: 'app-counter',
  template: `
    <button type="button" (click)="increment()">
      Count: {{ count() }}
    </button>
  `,
})
export class Counter {
  count = signal(0);

  increment() {
    this.count.update(value => value + 1);
  }
}

This example contains the basic Angular loop. State lives in the class. The template reads that state. An event calls a class method. Angular updates the affected view when the state changes.

Angular Fundamentals

Think in component trees

Relevant careers