Common API Overview

Overview of Angular’s @angular/common package providing common directives, pipes, and utilities

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:

Old (Deprecated)

<div *ngIf="user">{{ user.name }}</div>
<div *ngFor="let item of items">{{ item }}</div>

Related Pages

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

• Angular Templates Guide
• Built-in Directives
• Pipes Guide