or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

directives.mdhttp.mdi18n.mdindex.mdlocation.mdpipes.mdplatform.mdtesting.md
tile.json

tessl/npm-angular--common

Angular framework's common package providing essential directives, pipes, services, and utilities for Angular applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@angular/common@16.2.x

To install, run

npx @tessl/cli install tessl/npm-angular--common@16.2.0

index.mddocs/

Angular Common

Angular Common is the foundational package of the Angular framework that provides essential building blocks for web applications. It includes commonly needed directives for DOM manipulation, pipes for data transformation, services for HTTP communication and navigation, utilities for internationalization, and comprehensive testing utilities.

Package Information

  • Package Name: @angular/common
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @angular/common (automatically included in Angular applications)
  • Angular Version: 16.2.3

Core Imports

import { CommonModule } from "@angular/common";
import { NgIf, NgFor, AsyncPipe, DatePipe } from "@angular/common";
import { HttpClient, HttpClientModule } from "@angular/common/http";
import { Location, PlatformLocation } from "@angular/common";

For CommonJS (rarely used in Angular):

const { CommonModule, NgIf, NgFor } = require("@angular/common");

Basic Usage

import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HttpClient, HttpClientModule } from "@angular/common/http";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [CommonModule, HttpClientModule],
  template: `
    <div *ngIf="user">
      <h2>{{ user.name | titlecase }}</h2>
      <p>Joined: {{ user.joinDate | date:"short" }}</p>
      <ul>
        <li *ngFor="let item of user.items; let i = index">
          {{ i + 1 }}. {{ item }}
        </li>
      </ul>
    </div>
    <div *ngIf="loading">Loading...</div>
  `
})
export class ExampleComponent {
  user: any = null;
  loading = true;

  constructor(private http: HttpClient) {
    this.http.get("/api/user").subscribe(data => {
      this.user = data;
      this.loading = false;
    });
  }
}

Architecture

Angular Common is organized into several key modules:

  • CommonModule: The main module that exports all common directives and pipes for template usage
  • HTTP Client: Full-featured HTTP client with interceptors, request/response handling, and testing utilities
  • Location Services: Browser navigation and URL management with multiple strategies (HTML5 pushState, hash-based)
  • Directives: Structural directives (NgIf, NgFor, NgSwitch) and attribute directives (NgClass, NgStyle) for DOM manipulation
  • Pipes: Data transformation utilities for displaying formatted data in templates
  • Internationalization: Comprehensive i18n support with locale data, formatting functions, and localization services
  • Platform Detection: Utilities for detecting execution environment (browser, server, web worker)
  • Testing Utilities: Mock implementations and testing helpers for unit and integration tests

Capabilities

Template Directives

Essential directives for conditional rendering, iteration, and DOM manipulation that form the core of Angular's declarative template syntax.

// Structural Directives
export class NgIf<T = unknown> {
  ngIf: T | null | undefined;
  ngIfThen: TemplateRef<NgIfContext<T>> | null;
  ngIfElse: TemplateRef<NgIfContext<T>> | null;
}

export class NgForOf<T, U extends NgIterable<T> = NgIterable<T>> {
  ngForOf: U | null | undefined;
  ngForTrackBy: TrackByFunction<T> | null;
  ngForTemplate: TemplateRef<NgForOfContext<T, U>>;
}

// Attribute Directives  
export class NgClass {
  klass: string;
  ngClass: NgClassSupportedTypes;
}

export class NgStyle {
  ngStyle: { [klass: string]: any } | null | undefined;
}

Template Directives

Data Transformation Pipes

Pipes for transforming and formatting data in templates, including date/time formatting, text case conversion, and internationalization.

export class AsyncPipe implements PipeTransform {
  transform<T>(obj: Observable<T> | Subscribable<T> | Promise<T>): T | null;
  transform<T>(obj: null | undefined): null;
  transform<T>(obj: Observable<T> | Subscribable<T> | Promise<T> | null | undefined): T | null;
}

export class DatePipe implements PipeTransform {
  transform(value: Date | string | number, format?: string, timezone?: string, locale?: string): string | null;
  transform(value: null | undefined, format?: string, timezone?: string, locale?: string): null;
  transform(value: Date | string | number | null | undefined, format?: string, timezone?: string, locale?: string): string | null;
}

export class CurrencyPipe implements PipeTransform {
  transform(value: number | string, currencyCode?: string, display?: 'code' | 'symbol' | 'symbol-narrow' | string | boolean, digitsInfo?: string, locale?: string): string | null;
}

Data Transformation Pipes

HTTP Client

Comprehensive HTTP client for making requests with full TypeScript support, interceptors, error handling, and testing utilities.

export class HttpClient {
  request<R>(req: HttpRequest<any>): Observable<HttpEvent<R>>;
  request<R>(method: string, url: string, options?: HttpRequestOptions & { observe?: 'body'; responseType?: 'json' }): Observable<R>;
  
  get<T>(url: string, options?: HttpRequestOptions & { observe?: 'body'; responseType?: 'json' }): Observable<T>;
  post<T>(url: string, body: any | null, options?: HttpRequestOptions & { observe?: 'body'; responseType?: 'json' }): Observable<T>;
  put<T>(url: string, body: any | null, options?: HttpRequestOptions & { observe?: 'body'; responseType?: 'json' }): Observable<T>;
  delete<T>(url: string, options?: HttpRequestOptions & { observe?: 'body'; responseType?: 'json' }): Observable<T>;
}

export class HttpHeaders {
  constructor(headers?: string | { [name: string]: string | string[] });
  has(name: string): boolean;
  get(name: string): string | null;
  keys(): string[];
  getAll(name: string): string[] | null;
  append(name: string, value: string | string[]): HttpHeaders;
  set(name: string, value: string | string[]): HttpHeaders;
  delete(name: string, value?: string | string[]): HttpHeaders;
}

HTTP Client

Location and Navigation

Services for managing browser navigation, URL manipulation, and routing support with multiple location strategies.

export class Location {
  path(includeHash?: boolean): string;
  isCurrentPathEqualTo(path: string, query?: string): boolean;
  normalize(url: string): string;
  prepareExternalUrl(url: string): string;
  go(path: string, query?: string, state?: any): void;
  replaceState(path: string, query?: string, state?: any): void;
  forward(): void;
  back(): void;
  onUrlChange(fn: (url: string, state: unknown) => void): VoidFunction;
  subscribe(onNext: (value: PopStateEvent) => void): SubscriptionLike;
}

export abstract class LocationStrategy {
  abstract path(includeHash?: boolean): string;
  abstract prepareExternalUrl(internal: string): string;
  abstract pushState(state: any, title: string, url: string, queryParams: string): void;
  abstract replaceState(state: any, title: string, url: string, queryParams: string): void;
  abstract forward(): void;
  abstract back(): void;
  abstract onPopState(fn: LocationChangeListener): void;
  abstract getBaseHref(): string;
}

Location and Navigation

Internationalization

Comprehensive internationalization support including locale data management, number and date formatting, and localization services.

// Locale Data Functions
export function registerLocaleData(data: any, localeId?: string | any, extraData?: any): void;

export function getLocaleId(locale: string): string;
export function getLocaleDayNames(locale: string, formStyle: FormStyle, width: TranslationWidth): string[];
export function getLocaleMonthNames(locale: string, formStyle: FormStyle, width: TranslationWidth): string[];
export function getLocaleDateFormat(locale: string, width: FormatWidth): string;
export function getLocaleTimeFormat(locale: string, width: FormatWidth): string;
export function getLocaleCurrencyCode(locale: string): string | null;
export function getLocaleCurrencySymbol(locale: string, currency: string): string;

// Formatting Functions
export function formatDate(value: string | number | Date, format: string, locale: string, timezone?: string): string;
export function formatCurrency(value: number, locale: string, currency: string, currencyCode?: string, digitsInfo?: string): string;
export function formatNumber(value: number, locale: string, digitsInfo?: string): string;
export function formatPercent(value: number, locale: string, digitsInfo?: string): string;

Internationalization

Testing Utilities

Mock implementations and testing helpers for unit and integration testing of Angular applications.

// Location Testing
export class SpyLocation implements Location {
  urlChanges: string[];
  path(): string;
  isCurrentPathEqualTo(path: string, query?: string): boolean;
  simulateUrlPop(pathname: string): void;
  simulateHashChange(pathname: string): void;
}

export class MockLocationStrategy extends LocationStrategy {
  internalBaseHref: string;
  internalPath: string;
  internalTitle: string;
  urlChanges: string[];
  simulatePopState(url: string): void;
}

// HTTP Testing
export abstract class HttpTestingController {
  abstract expectOne(url: string, description?: string): TestRequest;
  abstract expectOne(params: RequestMatch, description?: string): TestRequest;
  abstract expectOne(matchFn: ((req: HttpRequest<any>) => boolean), description?: string): TestRequest;
  abstract expectNone(url: string, description?: string): void;
  abstract expectNone(params: RequestMatch, description?: string): void;
  abstract expectNone(matchFn: ((req: HttpRequest<any>) => boolean), description?: string): void;
  abstract match(url: string): TestRequest[];
  abstract match(params: RequestMatch): TestRequest[];
  abstract match(matchFn: ((req: HttpRequest<any>) => boolean)): TestRequest[];
  abstract verify(opts?: { ignoreCancelled?: boolean }): void;
}

Testing Utilities

Platform and Environment Utilities

Utilities for platform detection, viewport scrolling, and environment-specific functionality.

// Platform Detection
export function isPlatformBrowser(platformId: Object): boolean;
export function isPlatformServer(platformId: Object): boolean;
export function isPlatformWorkerApp(platformId: Object): boolean;
export function isPlatformWorkerUi(platformId: Object): boolean;

// Viewport Scrolling
export abstract class ViewportScroller {
  abstract setOffset(offset: [number, number] | (() => [number, number])): void;
  abstract getScrollPosition(): [number, number];
  abstract scrollToPosition(position: [number, number]): void;
  abstract scrollToAnchor(anchor: string): void;
  abstract setHistoryScrollRestoration(scrollRestoration: 'auto' | 'manual'): void;
}

// DOM Utilities
export const DOCUMENT: InjectionToken<Document>;

Platform and Environment Utilities

Types and Interfaces

// Core Module
export class CommonModule {
  static forRoot(): ModuleWithProviders<CommonModule>;
}

// Context Types
export class NgIfContext<T = unknown> {
  $implicit: T;
  ngIf: T;
}

export class NgForOfContext<T, U extends NgIterable<T> = NgIterable<T>> {
  $implicit: T;
  ngForOf: U;
  index: number;
  count: number;
  readonly first: boolean;
  readonly last: boolean;
  readonly even: boolean;
  readonly odd: boolean;
}

// HTTP Types
export enum HttpEventType {
  Sent = 0,
  UploadProgress = 1,
  ResponseHeader = 2,
  DownloadProgress = 3,
  Response = 4,
  User = 5
}

export enum HttpStatusCode {
  Continue = 100,
  SwitchingProtocols = 101,
  Processing = 102,
  EarlyHints = 103,
  Ok = 200,
  Created = 201,
  Accepted = 202,
  NonAuthoritativeInformation = 203,
  NoContent = 204,
  ResetContent = 205,
  PartialContent = 206,
  MultiStatus = 207,
  AlreadyReported = 208,
  ImUsed = 226,
  MultipleChoices = 300,
  MovedPermanently = 301,
  Found = 302,
  SeeOther = 303,
  NotModified = 304,
  UseProxy = 305,
  Unused = 306,
  TemporaryRedirect = 307,
  PermanentRedirect = 308,
  BadRequest = 400,
  Unauthorized = 401,
  PaymentRequired = 402,
  Forbidden = 403,
  NotFound = 404,
  MethodNotAllowed = 405,
  NotAcceptable = 406,
  ProxyAuthenticationRequired = 407,
  RequestTimeout = 408,
  Conflict = 409,
  Gone = 410,
  LengthRequired = 411,
  PreconditionFailed = 412,
  PayloadTooLarge = 413,
  UriTooLong = 414,
  UnsupportedMediaType = 415,
  RangeNotSatisfiable = 416,
  ExpectationFailed = 417,
  ImATeapot = 418,
  MisdirectedRequest = 421,
  UnprocessableEntity = 422,
  Locked = 423,
  FailedDependency = 424,
  TooEarly = 425,
  UpgradeRequired = 426,
  PreconditionRequired = 428,
  TooManyRequests = 429,
  RequestHeaderFieldsTooLarge = 431,
  UnavailableForLegalReasons = 451,
  InternalServerError = 500,
  NotImplemented = 501,
  BadGateway = 502,
  ServiceUnavailable = 503,
  GatewayTimeout = 504,
  HttpVersionNotSupported = 505,
  VariantAlsoNegotiates = 506,
  InsufficientStorage = 507,
  LoopDetected = 508,
  NotExtended = 510,
  NetworkAuthenticationRequired = 511
}

// Location Types
export interface PopStateEvent {
  pop?: boolean;
  state?: any;
  type?: string;
  url?: string;
}

// Internationalization Types
export enum FormStyle {
  Format = 0,
  Standalone = 1
}

export enum FormatWidth {
  Short = 0,
  Medium = 1,
  Long = 2,
  Full = 3
}

export enum TranslationWidth {
  Narrow = 0,
  Abbreviated = 1,
  Wide = 2,
  Short = 3
}

export enum WeekDay {
  Sunday = 0,
  Monday = 1,
  Tuesday = 2,
  Wednesday = 3,
  Thursday = 4,
  Friday = 5,
  Saturday = 6
}

export enum NumberSymbol {
  Decimal = 0,
  Group = 1,
  List = 2,
  PercentSign = 3,
  PlusSign = 4,
  MinusSign = 5,
  Exponential = 6,
  SuperscriptingExponent = 7,
  PerMille = 8,
  Infinity = 9,
  NaN = 10,
  TimeSeparator = 11,
  CurrencyDecimal = 12,
  CurrencyGroup = 13
}

export type NgClassSupportedTypes = string[] | Set<string> | { [klass: string]: any } | null | undefined;
export type NgIterable<T> = Array<T> | Iterable<T>;
export type TrackByFunction<T> = (index: number, item: T) => any;