I'm attempting to use DomSanitizer to sanitize a dynamic URL within a Component using I can't seem to figure out what the correct way to specify a Provider for this service is.
I'm using Angular 2.0.0-rc.6
Here's my current component:
@Component({
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
providers: [ DomSanitizer ],
})
export class AppComponent implements OnInit
{
public url: SafeResourceUrl;
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
let id = 'an-id-goes-here';
let url = `https://www.youtube.com/embed/${id}`;
this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
ngOnDestroy() {}
}
This results in the error this.sanitizer.bypassSecurityTrustResourceUrl is not a function
at runtime.
Could someone show me an example of how to properly provide a Provider for DomSanitizer? Thanks!
Both should work
Injecting
DomSanitizer
is better because only this type provides the necessary methods without casting.Ensure you have imported the
BrowserModule
See also In RC.1 some styles can't be added using binding syntax
Import these-
define variable-
Use it in constructor like this-
Specifiy URL like this-
See if this helps.
You don't need to declare
providers: [ DomSanitizer ]
anymore.Just need to
import
DomSanitizer
as shown below,in component inject it through a constructor as below,