Is there an html tag that is URL aware for displaying different file types?

I have a list of all items in my s3 bucket, and when someone clicks for details, I would like to display the document in an HTML tag. However, there are many types of documents for example images, pdfs, word documents, and text documents. Is there an elegant way to do this given I am using Angular, and Amplify?

I have tried using an iframe with the office online viewer, but I run into CORS issues. I may go this route for the office docs, and put some logic in to find the appropriate tags for the other docs.

Here is my list of files components:
filegetter.component.html

<h3>Files</h3>
<ul *ngIf="files">
    <li *ngFor="let file of files"
        (click)="onSelect(file.key)"
    >
        <button>{{file.key}}</button>
    </li>
</ul>
<app-filedetails [fileurl]="safeFileUrl"></app-filedetails>

filegetter.component.ts

import { Component, OnInit } from '@angular/core';
import { AmplifyService } from 'aws-amplify-angular';
import { DomSanitizer, SafeUrl, SafeResourceUrl } from '@angular/platform-browser'

@Component({
  selector: 'app-filegetter',
  templateUrl: './filegetter.component.html',
  styleUrls: ['./filegetter.component.scss']
})
export class FilegetterComponent implements OnInit {
  files = []
  selectedFile;
  selectedFileurl;
  safeFileUrl: SafeResourceUrl;
  constructor(private amplifyService: AmplifyService, private sanitizer: DomSanitizer) { 
    this.amplifyService.storage().list('')
    .then((result) => {
      console.log(result)
      this.files = result;
    })
    .catch(err => console.log(err))
  }

  onSelect(filekey): void {
    console.log(filekey);
    this.selectedFile = filekey
    this.amplifyService.storage().get(this.selectedFile)
      .then((result) => {
        console.log(result)
        this.selectedFileurl = result;
        this.safeFileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.selectedFileurl)
        console.log('this is selectedfileurl ' + this.selectedFileurl)
      })
      .catch(err => console.log(err));
  }

  ngOnInit() {

Here is the details for images filedetails.component.html:

<div *ngIf=fileurl>
    <h2>File Details</h2>
    <img [src]="fileurl" type="">
</div>

Finally the filedetails.component.ts:

import { Component, OnInit, Input } from '@angular/core';
import { AmplifyService } from 'aws-amplify-angular';

@Component({
  selector: 'app-filedetails',
  templateUrl: './filedetails.component.html',
  styleUrls: ['./filedetails.component.scss']
})
export class FileDetailsComponent implements OnInit {
  @Input() fileurl

  constructor(
    private amplifyService: AmplifyService,
  ) {

   }

  ngOnInit() {

  }

}

I maybe wishfully thinking there is one component to rule them all, but in the filedetails.component.html
I would hope to do something like:
<url-filetype-potent-tag [data]="fileurl"></url-filetype-potent-tag>
and what would render is the documents, whether its a pdf, img, office, or txt file.

Source: New feed
Source Url Is there an html tag that is URL aware for displaying different file types?