Correct way Provide DomSanitizer to Component with Angular 2 RC6
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!
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) {}
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.
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