Correct way Provide DomSanitizer to Component with Angular 2 RC6

Question

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!

Answer 1

You don't need to declare providers: [ DomSanitizer ] anymore.
Just need to import DomSanitizer as shown below,

import { DomSanitizer, SafeResourceUrl, SafeUrl} from '@angular/platform-browser'; 

in component inject it through a constructor as below,

constructor(private sanitizer: DomSanitizer) {} 

Answer 2

Import these-

import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser'; 

define variable-

trustedDashboardUrl : SafeUrl; 

Use it in constructor like this-

constructor(     private sanitizer: DomSanitizer) {} 

Specifiy URL like this-

this.trustedDashboardUrl =                         this.sanitizer.bypassSecurityTrustResourceUrl                             ("URL"); 

See if this helps.