Skip to main content
Angular is a development platform for building mobile and desktop web applications using TypeScript/JavaScript. Built and maintained by Google, Angular provides a comprehensive framework for creating dynamic, high-performance applications with a rich ecosystem of tools and libraries.

​
What is Angular?

Angular is more than just a framework—it’s a complete platform that combines:
  • Declarative templates with powerful data binding
  • Dependency injection for clean, testable code
  • End-to-end tooling from development to deployment
  • Integrated best practices for building scalable applications
Whether you’re building a simple dashboard or a complex enterprise application, Angular provides the structure and tools you need to succeed.

​
Key benefits

TypeScript-first

Built with TypeScript for enhanced developer experience, strong typing, and better tooling support

Component-based

Build reusable UI components with encapsulated logic and styles for maintainable applications

Powerful CLI

Generate components, services, and modules with the Angular CLI to accelerate development

Cross-platform

Write once, deploy everywhere—web, mobile, and desktop applications from a single codebase

​
Framework architecture

Angular applications are built using a modular architecture with several core concepts:

​
Components

Components are the fundamental building blocks of Angular applications. Each component encapsulates the template (HTML), styles (CSS), and logic (TypeScript) for a part of the user interface. 
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `
    <h1>Hello {{ name }}!</h1>
    <button (click)="changeName()">Change Name</button>
  `,
  styles: [`
    h1 { color: #1976d2; }
  `]
})
export class HelloComponent {
  name = 'Angular';
  
  changeName() {
    this.name = 'World';
  }
}
This simple component demonstrates:
  • Decorator: @Component defines the component metadata
  • Selector: Custom HTML element name (<app-hello>)
  • Template: HTML with data binding ({{ name }})
  • Event binding: Handle user interactions ((click))
  • Class properties: Component state management

​
Dependency injection

Angular’s dependency injection system makes it easy to manage dependencies and write testable code. Services can be injected into components, directives, and other services. 
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}
  
  getData() {
    return this.http.get('/api/data');
  }
}
The providedIn: 'root' configuration makes the service available application-wide as a singleton, optimizing bundle size through tree-shaking.

​
Directives

Directives extend HTML with custom behavior. Angular includes built-in directives like *ngIf for conditional rendering and *ngFor for list rendering. 
@Component({
  selector: 'ng-if-simple',
  template: `
    <button (click)="show = !show">{{ show ? 'hide' : 'show' }}</button>
    <div *ngIf="show">Text to show</div>
  `
})
export class NgIfSimple {
  show = true;
}

​
Routing

The Angular Router enables navigation between different views in your single-page application, supporting features like lazy loading, route guards, and nested routes. 
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

​
Forms

Angular provides two approaches to handling user input through forms:
  • Reactive forms: Model-driven approach with explicit, immutable data models
  • Template-driven forms: Simpler approach using directives in templates
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <input [formControl]="control" />
    <p>Value: {{ control.value }}</p>
    <p>Status: {{ control.status }}</p>
  `
})
export class SimpleFormControl {
  control = new FormControl('value', Validators.minLength(2));
}

​
Modern features

Angular continuously evolves with modern web development practices:
Angular’s signal-based reactivity (introduced in recent versions) provides fine-grained change detection for improved performance.
  • Standalone components: Build applications without NgModules
  • Signals: Fine-grained reactivity for better performance
  • Server-side rendering: Pre-render pages for better SEO and initial load time
  • Hydration: Reuse server-rendered DOM for faster client startup
  • Defer loading: Load components on-demand with @defer blocks

​
Example application

Here’s a complete component showcasing multiple Angular features: 
import { Component, input, signal, ViewChild } from '@angular/core';

@Component({
  selector: 'example-app',
  template: `
    @if (shouldShow()) {
      <pane id="1" />
    } @else {
      <pane id="2" />
    }
    
    <button (click)="toggle()">Toggle</button>
    <div>Selected: {{ selectedPane() }}</div>
  `
})
export class ViewChildComp {
  @ViewChild(Pane)
  set pane(v: Pane) {
    setTimeout(() => {
      this.selectedPane.set(v.id());
    }, 0);
  }
  
  selectedPane = signal('');
  shouldShow = signal(true);
  
  toggle() {
    this.shouldShow.update((shouldShow) => !shouldShow);
  }
}

​
Rich ecosystem

Angular comes with a comprehensive ecosystem:
  • Angular CLI: Command-line interface for project scaffolding and build tooling
  • Angular Material: Official UI component library implementing Material Design
  • Angular DevTools: Browser extension for debugging and profiling
  • Angular Universal: Server-side rendering for improved performance and SEO
  • Angular Elements: Package components as custom elements for use in any framework

​
Next steps

Ready to start building with Angular? Follow our quickstart guide to create your first application in minutes.

Quickstart guide

Get up and running with Angular in 5 minutes