> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/angular/angular/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

<CardGroup cols={2}>
  <Card title="Structural Directives" icon="code-branch">
    Control DOM structure with `ngIf`, `ngFor`, and `ngSwitch`
  </Card>

  <Card title="Attribute Directives" icon="paintbrush">
    Modify elements with `ngClass` and `ngStyle`
  </Card>
</CardGroup>

<Note>
  **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.
</Note>

### 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`:

```typescript theme={null}
import { CommonModule } from '@angular/common';

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

<Info>
  For standalone components, you can import individual directives and pipes instead of the entire `CommonModule`.
</Info>

## Standalone Usage

With Angular's standalone components, you can import specific directives and pipes:

```typescript theme={null}
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:

<CodeGroup>
  ```html Old (Deprecated) theme={null}
  <div *ngIf="user">{{ user.name }}</div>
  <div *ngFor="let item of items">{{ item }}</div>
  ```

  ```html New (Recommended) theme={null}
  @if (user) {
    <div>{{ user.name }}</div>
  }
  @for (item of items; track item.id) {
    <div>{{ item }}</div>
  }
  ```
</CodeGroup>

## Related Pages

<CardGroup cols={2}>
  <Card title="Directives" icon="code" href="/api/common/directives">
    Learn about built-in directives
  </Card>

  <Card title="Pipes" icon="filter" href="/api/common/pipes">
    Explore data transformation pipes
  </Card>
</CardGroup>

## 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](https://angular.dev/guide/templates)
* [Built-in Directives](https://angular.dev/concepts/directives)
* [Pipes Guide](https://angular.dev/guide/pipes)