or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

bootstrap-platform.mddocument-management.mdevent-management.mdhydration.mdindex.mdsecurity-sanitization.mdtesting-debug.md
tile.json

tessl/npm-angular--platform-browser

Angular library for using Angular applications in web browsers with DOM abstraction, event management, and browser-specific services

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@angular/platform-browser@20.2.x

To install, run

npx @tessl/cli install tessl/npm-angular--platform-browser@20.2.0

index.mddocs/

Angular Platform Browser

Angular's platform-browser package provides the foundational browser-specific services and utilities required to run Angular applications in web browsers. It includes DOM abstraction, event management, rendering services, security features, and hydration support for modern Angular applications.

Package Information

  • Package Name: @angular/platform-browser
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @angular/platform-browser

Core Imports

import { 
  BrowserModule, 
  bootstrapApplication, 
  platformBrowser,
  Meta,
  Title,
  DomSanitizer
} from "@angular/platform-browser";

For specific capabilities:

import { 
  By,
  enableDebugTools,
  provideClientHydration,
  HammerModule
} from "@angular/platform-browser";

Basic Usage

Module-based Application:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Standalone Application:

import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent, {
  providers: [
    // your providers here
  ]
});

Architecture

Angular Platform Browser is built around several key components:

  • Bootstrap System: Module-based (BrowserModule) and standalone (bootstrapApplication) application initialization
  • Platform Services: Browser-specific platform factory and configuration
  • Document Services: Meta tag and title management for SEO and document manipulation
  • Security Layer: DOM sanitization and XSS prevention with safe value types
  • Event System: Browser event management with plugin architecture and gesture support
  • Hydration Engine: Server-side rendering (SSR) and static site generation (SSG) hydration
  • Testing Support: Debug utilities and testing helpers for browser environments

Capabilities

Bootstrap and Platform

Core functionality for initializing Angular applications in browser environments, including both traditional module-based and modern standalone application patterns.

function bootstrapApplication(
  rootComponent: Type<unknown>,
  options?: ApplicationConfig
): Promise<ApplicationRef>;

const platformBrowser: (extraProviders?: StaticProvider[]) => PlatformRef;

class BrowserModule {
  constructor();
}

Bootstrap and Platform

Document Management

Services for managing browser document properties including meta tags for SEO, social sharing, and document title management.

class Meta {
  addTag(tag: MetaDefinition, forceCreation?: boolean): HTMLMetaElement | null;
  getTag(attrSelector: string): HTMLMetaElement | null;
  updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement | null;
  removeTag(attrSelector: string): void;
}

class Title {
  getTitle(): string;
  setTitle(newTitle: string): void;
}

type MetaDefinition = {
  charset?: string;
  content?: string;
  httpEquiv?: string;
  name?: string;
  property?: string;
} & { [prop: string]: string };

Document Management

Security and Sanitization

DOM sanitization services for preventing XSS attacks, with safe value types and bypass methods for trusted content.

abstract class DomSanitizer implements Sanitizer {
  abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null;
  abstract bypassSecurityTrustHtml(value: string): SafeHtml;
  abstract bypassSecurityTrustStyle(value: string): SafeStyle;
  abstract bypassSecurityTrustScript(value: string): SafeScript;
  abstract bypassSecurityTrustUrl(value: string): SafeUrl;
  abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl;
}

interface SafeHtml extends SafeValue {}
interface SafeStyle extends SafeValue {}
interface SafeScript extends SafeValue {}
interface SafeUrl extends SafeValue {}
interface SafeResourceUrl extends SafeValue {}

Security and Sanitization

Event Management

Browser event handling system with plugin architecture supporting standard DOM events and gesture recognition via Hammer.js integration.

class EventManager {
  constructor(plugins: EventManagerPlugin[], _zone: NgZone);
  addEventListener(element: HTMLElement, eventName: string, handler: Function): Function;
  getZone(): NgZone;
}

class HammerModule {}

class HammerGestureConfig {
  events: string[];
  overrides: { [key: string]: Object };
  buildHammer(element: HTMLElement): HammerInstance;
}

const EVENT_MANAGER_PLUGINS: InjectionToken<EventManagerPlugin[]>;
const HAMMER_GESTURE_CONFIG: InjectionToken<HammerGestureConfig>;

Event Management

Testing and Debug Utilities

Tools for testing Angular applications and debugging browser-specific functionality, including element selection predicates and performance profiling.

class By {
  static all(): Predicate<DebugNode>;
  static css(selector: string): Predicate<DebugElement>;
  static directive(type: Type<any>): Predicate<DebugNode>;
}

function enableDebugTools<T>(ref: ComponentRef<T>): ComponentRef<T>;
function disableDebugTools(): void;
function provideProtractorTestingSupport(): Provider[];

Testing and Debug Utilities

Hydration

Client-side hydration support for server-side rendered (SSR) and statically generated (SSG) Angular applications, with configurable features and optimization options.

function provideClientHydration(
  ...features: HydrationFeature<HydrationFeatureKind>[]
): EnvironmentProviders;

enum HydrationFeatureKind {
  NoHttpTransferCache,
  HttpTransferCacheOptions,
  I18nSupport,
  EventReplay,
  IncrementalHydration
}

function withNoHttpTransferCache(): HydrationFeature<HydrationFeatureKind.NoHttpTransferCache>;
function withHttpTransferCacheOptions(options: HttpTransferCacheOptions): HydrationFeature<HydrationFeatureKind.HttpTransferCacheOptions>;
function withI18nSupport(): HydrationFeature<HydrationFeatureKind.I18nSupport>;
function withEventReplay(): HydrationFeature<HydrationFeatureKind.EventReplay>;
function withIncrementalHydration(): HydrationFeature<HydrationFeatureKind.IncrementalHydration>;

Hydration

Types

interface ApplicationConfig {
  providers?: Provider[];
}

interface HydrationFeature<FeatureKind extends HydrationFeatureKind> {
  ɵkind: FeatureKind;
  ɵproviders: Provider[];
}

interface HammerInstance {
  on(eventName: string, callback?: Function): void;
  off(eventName: string, callback?: Function): void;
  destroy?(): void;
}

type HammerLoader = () => Promise<void>;

const VERSION: Version;