I have a material dialog template that i want to use to open and download pdf files from an external link(url) in another component but its not working.It says the url is unsafe.Any idea will be appreciated import { Component, OnInit, ViewChild, ElementRef, Inject, forwardRef, ChangeDetectorRef, SecurityContext,Pipe, PipeTransform,Input,AfterViewInit } from '@angular/core' ; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' ; //import { DialogComponent, DialogService } from 'ng2-bootstrap-modal'; import { ElementAst } from '@angular/compiler' ; import {ConfirmdialogService} from './../services/confirmdialog.service' ; import {MAT_DIALOG_DATA,MatDialogRef,MatDialog} from '@angular/material/dialog' ; import {EmployeedocsComponent} from './../upload/employeedocs/employeedocs.component' ; import { DocumentService } from "../services/document.service" ; import { ShareReplayConfig } from 'rxjs/internal-compatibility' ; export interface ViewerModel { title: string ; NodeID: string ; } @Component({ selector: 'viewer' , template: ` {{title}} "640" height= "390" [src]= "NodeID | safe" > "onNoClick()" >Close ` }) @Pipe({ name: 'safe' }) export class ViewerComponent implements PipeTransform { constructor( public dialogRef: MatDialogRef , public sanitizer: DomSanitizer, @Inject(MAT_DIALOG_DATA) public data: ViewerModel) { } title: string ; NodeID: string ; transform(NodeID) { return this .sanitizer.bypassSecurityTrustResourceUrl( this .NodeID); } ngOnInit(){ } onNoClick(): void { this .dialogRef.close(); } } Here is how i want to open pdf Urls from another component using the above materail dialog template this .url = this .sanitizer.bypassSecurityTrustResourceUrl( this .DownloadURL.concat(employid) + "/" + this .downloaddoc.Name); const dialogWithForm = this .dialogModel.open(ViewerComponent, { data: { title: this .downloaddoc.Name, NodeID: this .url} }); dialogWithForm.afterClosed().subscribe(result => { console.log( 'You have closed the dialog' ); if (result) { this .downloaddoc.Name = result.title; this .url = result.NodeID; } });

Answer

Reusable Material dialogue dialogue not opening external url with pdf

Austin Muts

2.5k

I have a material dialog template that i want to use to open and download pdf files from an external link(url) in another component but its not working.It says the url is unsafe.Any idea will be appreciated

import { Component, OnInit, ViewChild, ElementRef, Inject, forwardRef, ChangeDetectorRef, SecurityContext,Pipe, PipeTransform,Input,AfterViewInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
//import { DialogComponent, DialogService } from 'ng2-bootstrap-modal';
import { ElementAst } from '@angular/compiler';
import {ConfirmdialogService} from './../services/confirmdialog.service';
import {MAT_DIALOG_DATA,MatDialogRef,MatDialog} from '@angular/material/dialog';
import {EmployeedocsComponent} from './../upload/employeedocs/employeedocs.component';
import { DocumentService } from "../services/document.service";
import { ShareReplayConfig } from 'rxjs/internal-compatibility';
export interface ViewerModel {
title: string;
NodeID: string;
}
@Component({
selector: 'viewer',
template: `
<h1 mat-dialog-title>{{title}}</h1>
<mat-dialog-content>
<iframe width="640" height="390" [src]="NodeID | safe">
</iframe>
</mat-dialog-content>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">Close</button>
</div>
`
})
@Pipe({ name: 'safe' })
export class ViewerComponent implements PipeTransform {
constructor(
public dialogRef: MatDialogRef<ViewerComponent>,public sanitizer: DomSanitizer,
@Inject(MAT_DIALOG_DATA) public data: ViewerModel) { }
title: string;
NodeID: string;
transform(NodeID) {
return this.sanitizer.bypassSecurityTrustResourceUrl(this.NodeID);
}
ngOnInit(){
}
onNoClick(): void {
this.dialogRef.close();
}
}

Here is how i want to open pdf Urls from another component using the above materail dialog template

this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.DownloadURL.concat(employid) +"/" +this.downloaddoc.Name);
const dialogWithForm = this.dialogModel.open(ViewerComponent, {
data: { title: this.downloaddoc.Name, NodeID: this.url}
});
dialogWithForm.afterClosed().subscribe(result => {
console.log('You have closed the dialog');
if (result) {
this.downloaddoc.Name = result.title;
this.url = result.NodeID;
}
});