In my model class, I am working with a property called thumbnailUrl which contains the URL of an image on a different domain. Due to this, it needs to be sanitized before being rendered in the component's template. To achieve this, I have introduced a new property named thubnailStyleUrl which is intended to return the sanitized style (SafeStyle) for use as a background-image in the template.
However, upon running the code, I encounter the following error:
The error message states: 'Cannot read property 'bypassSecurityTrustStyle' of undefined.'
I am attempting to inject DomSanitizer into the constructor of my model class as shown below. Is it possible to do so? If not, what alternative options exist for me to sanitize this property before rendering it?
This is how my model class looks like...
import {DomSanitizer, SafeStyle} from "@angular/platform-browser";
export class RecentOrderModel {
constructor(dataModel:any, private _sanitizer: DomSanitizer) {
this.orderNum = dataModel.orderNum;
this.poNum = dataModel.poNum;
this.buyerName = dataModel.buyerName;
this.thumbnailUrl = dataModel.thumbnailUrl;
}
public get thumbnailStyleUrl() :SafeStyle {
return this._sanitizer.bypassSecurityTrustStyle('url('+this.thumbnailUrl+')');
}
orderNum:string;
poNum:string;
buyerName:string;
thumbnailUrl:string;
}