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.
19.0.0-next.1 (2024-08-22)
Breaking Changes
core
- The
autoDetect
feature of ComponentFixture
will now
attach the fixture to the ApplicationRef
. As a result, errors during
automatic change detection of the fixture be reported to the ErrorHandler
.
This change may cause custom error handlers to observe new failures that were previously unreported.
compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| 9e87593055 | feat | ensure template style elements are preprocessed as inline styles (#57429) |
core
| Commit | Type | Description |
| -- | -- | -- |
| b063468027 | feat | support TypeScript 5.6 (#57424) |
| 3b0dca75d6 | fix | Allow zoneless scheduler to run inside fakeAsync
(#56932) |
| f03d274e87 | fix | ComponentFixture autoDetect feature works like production (#55228) |
| d4449fce21 | fix | handle hydration of components that project content conditionally (#57383) |
migrations
| Commit | Type | Description |
| -- | -- | -- |
| 4ae66f25d0 | fix | account for members with doc strings and no modifiers (#57389) |
| ac93839d69 | fix | avoid migrating route component in tests (#57317) |
| 58a79b6e43 | fix | preserve type when using inject decorator (#57389) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="19.0.0-next.0"></a>