New insights on handling null values with DomSanitizer bypassSecurityTrustHtml in Angular 12

Recently, I upgraded my application from angular 11 to 12 and also updated TypeScript from 4.0.5 to 4.3.5. One noticeable difference we encountered is that instead of having an empty value, the text "null" now appears in the application.

https://i.sstatic.net/b9kUi.png

After narrowing down the issue, it seems to revolve around the following code snippet (I intentionally set the value to null for demonstration purposes):

<div>
  <span [innerHTML]="null | sanitizeHtml"></span>
</div>

The problem lies within the bypassSecurityTrustHtml method or how the safeHtml object is handled when dealing with a null value. Can someone provide insight into this behavior?

EDIT

To replicate the issue, here's a stackblitz example: https://stackblitz.com/edit/angular-v12-ejwhmd?file=package.json

EDIT 2

I've submitted a bug report to Angular: https://github.com/angular/angular/issues/43794

angulartypescriptangular-dom-sanitizer

Answer №1

This particular issue has been addressed in a bug report I submitted (https://github.com/angular/angular/issues/43794).

In summary: It appears that due to improvements in type safety, null values are no longer expected in the method signature of bypassSecurityTrustHtml. As a result, null is now rendered as text rather than actual null.

A possible workaround is to handle any potential null values before passing them to the bypassSecurityTrustHtml function. You can see an example of this workaround here: https://stackblitz.com/edit/angular-v12-zn77kb?file=src%2Fapp%2Fapp.component.html

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue "Module not found" arises while trying to import an external JSON file in TypeScript

Working with local JSON files is not an issue for me. I've successfully implemented the following code: import data from "./example.json"; However, I encounter an error when attempting to access remote files like the one below, resulting in a "Canno ...

jsontypescriptimport

Updating Cart Array in Angular 4 when Adding a New Item

I'm currently using angular 4 and I have encountered an issue in the code where adding a new product to the cart overwrites the existing item instead of appending it to the array. Here is a screenshot illustrating the problem cart.service.ts export ...

javascriptarraysangularshopping-cartcart

Tips for merging DTO (Data Transfer Object) with non-DTO objects

I'm currently working on a new endpoint and I need to validate only two parameters (limit and offset) with the dto. The third parameter is not supposed to be checked. My controller test code is not functioning as expected. When I try to use it, the e ...

typescriptnestjs

The sequence of events in React Native following a navigation.navigate call

Seeking suggestions and advice, I currently have the following 2 lines of code within a react native expo component: this.props.navigation.navigate("App"); patchUser(this.state.dataSource.userInfo.username, this.state.dataSource.userInfo.firstN ...

typescriptreact-nativenavigationexpo

difficulty retrieving required error messages from zip.errors in Angular 7

I have been racking my brain trying to understand why I keep encountering this parsing error. Unexpected token [, expected identifier or keyword at column 13 in [zip.errors?.['required']] I believe the "?" is a way to query the errors array fo ...

angularvalidation

Trouble getting JavaScript variables to properly insert into strings when sending them to an HTML document

Struggling with variable interpolation in JavaScript strings. I need to replace the words_to_be_removed variable with the defaultMessageTest string, but none of my attempted methods are working. Here are the three methods I tried: String text ${expressi ...

javascripthtmlcsstypescript

The quantity of documents queried does not align with the number of data counts retrieved from Firestore

Facing an issue with calculating the Firestore read count as it keeps increasing rapidly even with only around 15 user documents. The count surges by 100 with each page reload and sometimes increases on its own without any action from me. Could this be due ...

angulartypescriptfirebasegoogle-cloud-firestore

Unexpected behavior: Angular4/Javascript Date object alters when timezone is specified in Date constructor

In my Angular 4 application, I encountered an issue with a date retrieved from an API call. The date is in the format '1990-03-31T23:00:00-06:00' and when attempting to create a Date object and retrieve the month using getMonth(), it returns the ...

javascriptangulardate

Ways to retrieve a Class Level Variable within the onCellValueChanged function in agGrid

Exploring Angular with Typescript for the first time. I'm trying to access Class Level Variables within the onCellValueChanged event of agGrid, but encountering the following error: Cannot read property 'updateDict' of undefined Here&apo ...

angulartypescriptangular2-formsag-grid

What are some effective ways to exclude multiple spec files in playwright?

Within my configuration, I have three distinct projects. One project is responsible for running tests for a specific account type using one login, while another project runs tests for a different login. Recently, I added a third project that needs to run t ...

typescriptplaywright

What is the best way to create a fixed array of unchangeable objects?

I am trying to create a class that requires an array of objects as one of its constructor parameters, with the condition that neither the array nor the objects in it can be modified. My current approach involves using the readonly modifier along with the g ...

typescript

Angular HTTP response displays 200 status code, yet fails to contact the server

We are utilizing Angular 6 along with NGXS for State Management in our web application. One specific server call is causing issues, while all other similar calls work fine. Interestingly, this particular call functions without any problems on our dev envi ...

c#angulartypescriptasp.net-corengxs

Issue with displaying Typescript sourcemaps on Android device in Ionic 2

Encountering a strange behavior with Ionic2. After deploying my app to a simulator, I am able to view the .ts file sourceMap in the Chrome inspect debugger. In both scenarios, I use: ionic run android https://i.sstatic.net/JarmI.png However, when depl ...

androidgoogle-chrometypescriptionic2source-maps

A custom type in Typescript used as a key in a key-value pair

Here is a key-value pair used for a filtering system. The filter can be merged with current filters or applied by resetting the previous ones. type MINE = "mine" type BOOKMARKED = "bookmarked" type TEXT_QUERY = "textQuery" typ ...

typescript

[Tips] Ways to conduct examinations of Angular custom elements and cover them in the ngDoBootstrap module

https://i.sstatic.net/so1Qs.png I am looking to achieve full coverage in my module, but I am struggling to reference/spyOn the customElements.define within the bootstrap function. bonus: If anyone could provide assistance with achieving coverage for u ...

angulartestingkarma-jasminecustom-element

The category of template reference variable in Angular 2

Can anyone point me in the right direction to find information on the data type of reference variables? <input #my-int .../> <form #my-form /> In the example above, my-int is associated with an input, and my-form is linked to ngForm. I am cur ...

angular

Dynamic import of a SASS file in VueJS using a variable such as process.env

Is there a way to dynamically import a file using environment variables? I want to include a specific client's general theme SCSS to my app.vue (or main.ts) I'm thinking of something along the lines of: <style lang="sass"> @import"./th ...

typescriptvue.jsimport

OpenTok Angular 6 encountered an error with code TS2314 stating that the generic type 'Promise<T>' needs to have 1 type argument specified

Issue in opentok.d.ts File: Error TS2314 npm version: 6.2.0 node: v8.10.0 Angular CLI: 6.2.3 Operating System: Linux x64 Angular Version: 7.0.0-beta.5 @opentok/client": "^2.14.8 ...

node.jsangulartypescriptwebpack

What is the best way to convert an enum into an array containing all the values of its items in TypeScript?

For example, consider the following TypeScript enum: export enum UserType { Guest = 1, SNS = 2, Account = 3, Certified = 4, } Is there a way to dynamically create an array with specific values without hard-coding them? const atrrib ...

arraystypescript

The email package is unable to meet the peerDependencies requirements of its siblings

I encountered an issue while trying to incorporate the @ngrx/store module into my Angular 2 application. When using npm install, I received the error message below: npm ERR! peerinvalid The package <a href="/cdn-cgi/l/email-protection" class="__cf_emai ...

npmangularngrx