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.

Answer 3

Both should work

constructor(private sanitizer: DomSanitizer) {}
constructor(private sanitizer: Sanitizer) {}

Injecting DomSanitizer is better because only this type provides the necessary methods without casting.

Ensure you have imported the BrowserModule

@NgModule({
  imports: [BrowserModule],
})

See also In RC.1 some styles can't be added using binding syntax