Skip to main content

​
Common API Overview

The @angular/common package contains the common directives, pipes, and utilities that are essential for building Angular applications. This package provides the building blocks for template-driven UI manipulation and data transformation.

​
What’s in Common?

The Common package includes:
  • Structural Directives: Control the DOM structure conditionally and iteratively
  • Attribute Directives: Modify the appearance or behavior of DOM elements
  • Pipes: Transform data in templates
  • Location Services: Interact with the browser URL
  • HTTP Client: Make HTTP requests (in @angular/common/http)

​
Key Features

​
Directives

The Common package provides essential directives for template manipulation:

Structural Directives

Control DOM structure with ngIf, ngFor, and ngSwitch

Attribute Directives

Modify elements with ngClass and ngStyle
Deprecation Notice: As of Angular v20, structural directives like ngIf, ngFor, and ngSwitch are deprecated in favor of the new control flow syntax (@if, @for, @switch blocks). They will be removed in v22.

​
Pipes

Transform and format data in your templates:
  • Date Formatting: DatePipe for date/time display
  • Number Formatting: DecimalPipe, PercentPipe, CurrencyPipe
  • Async Handling: AsyncPipe for observables and promises
  • Data Transformation: JsonPipe, SlicePipe, KeyValuePipe
  • Text Transformation: UpperCasePipe, LowerCasePipe, TitleCasePipe

​
Module Import

Many common directives and pipes are available through CommonModule: 
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [CommonModule],
  template: `...`
})
export class ExampleComponent {}
For standalone components, you can import individual directives and pipes instead of the entire CommonModule.

​
Standalone Usage

With Angular’s standalone components, you can import specific directives and pipes: 
import { NgIf, NgFor, DatePipe, AsyncPipe } from '@angular/common';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [NgIf, NgFor, DatePipe, AsyncPipe],
  template: `...`
})
export class ExampleComponent {}

​
Migration to Modern Syntax

Angular v17+ introduces built-in control flow that replaces structural directives: 
<div *ngIf="user">{{ user.name }}</div>
<div *ngFor="let item of items">{{ item }}</div>

Directives

Learn about built-in directives

Pipes

Explore data transformation pipes

​
Package Structure

@angular/common
├── directives/     # Structural and attribute directives
├── pipes/          # Data transformation pipes
├── http/           # HTTP client module
└── testing/        # Testing utilities

​
See Also