How to show a pdf file in different window on button click in Angular 4

Question

I am new to Angular 2. Inside my index.html i have directive inside of this my whole display is coming. Inside of this I have 3 directives.

<app-header></app-header>
<app-content></app-content>
<app-footer></app-footer>

Inside of with some contents I have a button, on click of that I want to show a pdf file, which already stored in my project, in different window. In that window only pdf will be there, no other header or footer. How to do that. It's my html code-

<div class="col-md-8">
     Designed to address massive data processing especially telecom data, storage and real-time analytics on the cloud. Reports and alarms on your handheld.                                        
     <p><a class="btn-u btn-u-sm" target="_blank" [routerLink]="['files/Skybase.pdf']">Download <i class="fa fa-angle-double-right margin-left-5"></i></a></p>
</div>

I don't understand what to write in app.module.ts for routing and showing the pdf.

Please help me.

Answer 1

I think you should not use angular routing here. Just add a simple link to the pdf file location ( full url), use _target=blank , so it will open in a new tab. An example:

<a href="http://www.thesitewizard.com/"; target="_blank">thesitewizard.com</a>

Angular routing is meant to work without reloading the same page, so this is kinda out of scope for angular. Angular is meant for writing SPA (single page applications) and opening anything in a new tab is completely out of scope.