Odtnhj

Good day, everyone.

From the modal component that will input some data I need open new browser tab with resulted HTML that will contain formatted input data, example of code (i simplify it and try to use ng-template instead of one more component that should include resulted html):

@Component(
 template:
 '<p class="error" (click)="this.openValidationWarningsInNewWindow(hello)">Validation Warnings - click to see details</p>n' +
 'n' +
 '<ng-template #hello>n' +
 ' <div>formatedData: someData.value</div>n' +
 '</ng-template>n'
)
export class ValidationMessageComponent 
 @Input() someData: DataModel;

 @ViewChild('hello') helloEl: ElementRef;

 private openValidationWarningsInNewWindow(content: any) 
 const newWindow = window.open('about:blank', '_blank');
 let hell = this.helloEl.nativeElement as HTMLElement;
 newWindow.document.write(hell.innerText);
 newWindow.document.title = 'Validation Warnings';
 newWindow.document.close();
 

Sure, the way described in example doesn't work, at least I'm not able to get interHTML of nativeElement.
In new tab, i need just html representation (it's could be just simple HTML, but in this tab this html should included binded data)
Although, the way with [routerLink] and '_blank' target doesn't work, cause I need to transfer binding data.

Do you have any ideas?

First, you can beautify your template code wrapped by ``

and you don't need to add "n" any more

for Example:

`<p class="error" (click)="this.openValidationWarningsInNewWindow(hello)">Validation Warnings - click to see details</p>`

Then let's fix your problem:

you can define some route and component to render the innerHTML

For Example:

You defined a route called '/dynamic_html'

and it's component's template like this:

<div [innerHTML]="MY_HTML"></div>

You can link to this route by window.open('/dynamic_html') or any other solution.

Don't forget to sanitize your html.

happy coding !