@angular/platform-browser

What is @angular/platform-browser?

The @angular/platform-browser package provides services that are essential for running Angular applications in a web browser. This includes DOM manipulation, rendering, and browser interaction APIs.

What are @angular/platform-browser's main functionalities?

DOM Manipulation

The BrowserModule provides services that are necessary for any web app, such as DOM rendering, sanitization, and location. It should be imported once in the root module of the app.

import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports: [BrowserModule],
  ...
})
export class AppModule { }

Browser Event Handling

The package allows components to handle browser events such as resize, keyup, and more through the HostListener decorator.

import { Component, HostListener } from '@angular/core';

@Component({...})
export class MyComponent {
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    // Handle the browser resize event
  }
}

Safe Interpolation

The DomSanitizer service helps prevent Cross Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts.

import { DomSanitizer } from '@angular/platform-browser';

@Component({...})
export class MyComponent {
  safeUrl;
  constructor(private sanitizer: DomSanitizer) {
    this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl('https://example.com');
  }
}

Other packages similar to @angular/platform-browser

react-dom

Similar to @angular/platform-browser for Angular, react-dom is used with React to interact with the DOM. It provides methods for rendering components into the DOM and working with the DOM elements.

vue

Vue is a progressive framework for building user interfaces. It provides its own methods for DOM manipulation and updates, similar to what @angular/platform-browser does for Angular applications.

preact

Preact is a fast 3kB alternative to React with the same modern API. It provides similar functionalities for rendering and handling the DOM as @angular/platform-browser does for Angular.

README

Angular

The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.

Usage information and reference details can be found in Angular documentation.

License: MIT

Changelog

20.1.0 (2025-07-09)

common

| Commit | Type | Description | | -- | -- | -- | | 58aedc37d1 | feat | add support for a custom EnvironmentInjector to NgComponentOutlet directive (#54764) | | ef10aa4005 | feat | support decoding in NgOptimizedImage (#61905) |

compiler

| Commit | Type | Description | | -- | -- | -- | | 0dcf230d52 | feat | add support for new binary assignment operators (#62064) | | 5a76826d26 | fix | only report parser errors on invalid expression (#61793) | | 089ad0ee15 | fix | produce more accurate errors for interpolations (#62258) | | e9fcbb8af1 | fix | remove TypeScript from linker (#61618) |

compiler-cli

| Commit | Type | Description | | -- | -- | -- | | e62fb359d6 | feat | add experimental support for fast type declaration emission (#61334) | | 0cf1001715 | feat | support host directives with direct external references in fast type declaration emission (#61469) | | b7ab5fa256 | fix | add signal checks to handle negated calls (#59970) | | 77fa204ad1 | fix | rename flag for enabling fast type declaration emission (#61353) | | c439d6938d | fix | symbol builder duplicating host directives (#61240) | | 3e1baa5a95 | fix | typo in NG2026 message (#61325) |

core

| Commit | Type | Description | | -- | -- | -- | | 8163a8995e | feat | Add destroyed property on DestroyRef (#61849) | | 737b35b684 | feat | Add destroyed property to EnvironmentInjector (#61951) | | 2e0c98bd3f | feat | support bindings in TestBed (#62040) | | 4356e85456 | fix | fakeAsync should not depend on module import order (#61375) | | 8424b3bcd5 | fix | Fixes template outlet hydration (#61989) | | 583b9a7be5 | fix | missing useExisting providers throwing for optional calls (#61137) | | 8f65223bd8 | fix | update min Node.js support to 20.19, 22.12, and 24.0 (#61499) | | b785256b9e | perf | avoid intermediate arrays in definition (#61445) | | 56769de4d8 | perf | move property remapping for dom properties to compiler (#62421) |

forms

| Commit | Type | Description | | -- | -- | -- | | 610bebfce9 | fix | Allow ControlState as reset arguments for FormGroup/FormRecord (#55860) | | 4f0221e193 | fix | improve select performance (#61949) |

http

| Commit | Type | Description | | -- | -- | -- | | 55fa38a1e5 | feat | add cache & priority support for fetch requests in httpResource (#62301) | | b6ef42843c | feat | add credentials support for fetch requests in httpResource (#62390) | | 73269cf5ce | feat | add keepalive support for fetch requests in httpResource (#61833) | | 27b7ec0a62 | feat | add mode & redirect for fetch request in httpResource (#62337) | | f0965c7acd | feat | Add support for fetch credentials options in HttpClient (#62354) | | 87322449a3 | feat | add support for fetch mode and redirect options in HttpClient (#62315) | | 9791ab1b6f | feat | Add support for fetch request cache and priority options (#61766) | | aa861c42ff | feat | add timeout option on httpResource. (#62326) | | c4cffe2063 | feat | Add timeout option to HTTP requests (#57194) | | cfbbb08437 | feat | add warning when withCredentials overrides explicit credentials (#62383) |

language-service

| Commit | Type | Description | | -- | -- | -- | | 20c1f991e6 | feat | add semantic tokens for templates (#60260) | | cf55d1bdd4 | feat | Support importing the external module's export about the angular metadata. (#61122) | | 5d2e85920e | feat | support to fix missing required inputs diagnostic (#50911) |

router

| Commit | Type | Description | | -- | -- | -- | | 9833d9ea47 | feat | Run loadComponent and loadChildren functions in the route's injection context (#62133) |

service-worker

| Commit | Type | Description | | -- | -- | -- | | c67dbda8ff | feat | support notification closes (#61442) | | 6e1df54799 | feat | support push subscription changes (#61856) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="20.0.6"></a>