title: Embed pdf in Angular2 component
body: <p>In angular 4.3 I want to open a modal popup and show an embedded pdf file, like shown here: <a href="https://pdfobject.com/static.html" rel="noreferrer">https://pdfobject.com/static.html</a></p>
  
  <p>I used the <a href="https://stackoverflow.com/questions/34513558/angular-2-0-and-modal-dialog/40144809#40144809">modal popup component from this answer</a> which pops up nicely. My test html for the modal looks like this:</p>
  
  <pre><code>&lt;a class="btn btn-default" (click)="setContent();modal.show()"&gt;Show&lt;/a&gt;
  &lt;app-modal #modal&gt;
    &lt;div class="app-modal-header"&gt;
      Testing pdf embedding
    &lt;/div&gt;
    &lt;div class="app-modal-body"&gt;
      &lt;div class="embed-responsive" *ngIf="ContentUrl"&gt;
        &lt;object [attr.data]="ContentUrl"
                type="application/pdf"
                class="embed-responsive-item"&gt;
          &lt;embed [attr.src]="ContentUrl"
                 type="application/pdf" /&gt;
        &lt;/object&gt;
      &lt;/div&gt;
      &lt;p&gt;&lt;a [href]="ContentUrl"&gt;PDF Download&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="app-modal-footer"&gt;
      &lt;button type="button" class="btn btn-default" (click)="modal.hide()"&gt;Close&lt;/button&gt;
    &lt;/div&gt;
  &lt;/app-modal&gt;
  </code></pre>
  
  <p>In my component I set <code>ContentUrl</code> like this:</p>
  
  <pre><code>public ContentUrl: SafeUrl;
  public setContent() {
      this.ContentUrl = this._sanitizer.bypassSecurityTrustResourceUrl("/img/test.pdf");
  }
  </code></pre>
  
  <p>The popup opens nicely, but it does not show the embedded pdf. It does not even try to load the url from the service. The download link works nicely and asks if the pdf should be saved to disc or opened.<br>
  I tried to embed the pdf outside of the popup to no avail, too.<br>
  I tried Chrome, Edge and IE. None displays the embedded pdf.</p>
  
  <p>So how do I show/embed a pdf in an angular component?</p>