Angular 6 Need to open new tab from componenent with new builded html (included input data)

Question

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?

I simplify my example, in best way i wanna use separate component instead of <ng-template #hello> — Nolik

junk junk · Accepted Answer · 2018-11-13T09:05:30

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 !

Angular 6 Need to open new tab from componenent with new builded html (included input data)

1 Answers