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.2 (2024-08-28)
Breaking Changes
core
-
Render default fallback with empty projectableNodes
.
When passing an empty array to projectableNodes
in the createComponent
API, the default fallback content of the ng-content
will be rendered if present. To prevent rendering the default content, pass document.createTextNode('')
as a projectableNode
.
For example:
// The first ng-content will render the default fallback content if present
createComponent(MyComponent. { projectableNodes: [[], [secondNode]] });
// To prevent projecting the default fallback content:
createComponent(MyComponent. { projectableNodes: [[document.createTextNode('')], [secondNode]] });
-
The timers that are used for zone coalescing and hybrid
mode scheduling (which schedules an application state synchronization
when changes happen outside the Angular zone) will now run in the zone
above Angular rather than the root zone. This will mostly affect tests
which use fakeAsync
: these timers will now be visible to fakeAsync
and can be affected by tick
or flush
.
elements
- as part of switching away from custom CD behavior to the
hybrid scheduler, timing of change detection around custom elements has
changed subtly. These changes make elements more efficient, but can cause
tests which encoded assumptions about how or when elements would be checked
to require updating.
common
| Commit | Type | Description |
| -- | -- | -- |
| 50f08e6c4bf | feat | automatically use sizes auto in NgOptimizedImage (#57479) |
compiler-cli
| Commit | Type | Description |
| -- | -- | -- |
| 4716c3b9660 | perf | reduce duplicate component style resolution (#57502) |
core
| Commit | Type | Description |
| -- | -- | -- |
| a3cdbfe87f5 | fix | avoid leaking memory if component throws during creation (#57546) |
| 7a99815146e | fix | Do not bubble capture events. (#57476) |
| 7b1e5be20b9 | fix | fallback to default ng-content with empty projectable nodes. (#57480) |
| 0300dd2e18f | fix | Fix fixture.detectChanges with autoDetect disabled and zoneless (#57416) |
| 226a67dabba | fix | Schedulers run in zone above Angular rather than root (#57553) |
elements
| Commit | Type | Description |
| -- | -- | -- |
| 0cebfd7462c | fix | switch to ComponentRef.setInput
& remove custom scheduler (#56728) |
router
| Commit | Type | Description |
| -- | -- | -- |
| 8f6308457f0 | fix | Do not unnecessarily run matcher twice on route matching (#57530) |
upgrade
| Commit | Type | Description |
| -- | -- | -- |
| c9d90786d0a | fix | Address Trusted Types violations in @angular/upgrade (#57454) |
<!-- CHANGELOG SPLIT MARKER -->
<a name="18.2.2"></a>