Using JSON $ref in Angular, to dynamically list hyperlinks to files

Question

I have an Angular site that successfully uses *ngFor within a Bootstrap card. It has a title and lists the document name and extension below the title. As shown here:

I want the "handbook_2017.pdf" to be a hyperlink, and when some clicks the link, it opens or downloads to someones computer -- whatever their browser settings choose is fine.

Note URL correctly works perfectly. Meaning www.XXXX.com/assets/files/document_2017.pdf is live and I see the PDF document I should see.

Objective: a non-technical individual can go to just the assets folder and drag and drop/overwrite a file with the latest copy. Or if the document's name changes. Have to go into the JSON file and change the title. I want to keep everything as modular as possible. Also note the Bootstrap card appears on multiple pages. So I want it to be so no one has to hunt down the different pages to make updates.

Maybe I am using $ref incorrectly or maybe there is a better way to accomplish this feature for Angular. I am open to alternatives.

Here's what I have:

Project structure - just a snippet

src
-----| app
        /home
            home.component.html
        /assets
            /files
                document_2017.pdf

HTML

<div class="card border-light mb-3" style="max-width: 20rem;">
  <div class="card-header">Quick References</div>
  <div class="card-body" *ngFor="let quick of quickReferences">
    <h6 class="card-title">{{ quick.title }}</h6>
    <p class="card-text">{{ quick.$ref }}</p>
  </div>
</div>

JSON

[{
  "title": "Handbook",
  "$ref": "file:#/assets/files/document_2017.pdf"
}, {
  "title": "Course Catalog",
  "$ref": "file:#/assets/files/velLectus.xls"
}, {
  "title": "Tools",
  "$ref": "file:#/assets/files/SitAmetNunc.xls"
}, {
  "title": "Tutorials",
  "$ref": "file:#/assets/files/imperdiet.ppt"
}, {
  "title": "Art",
  "$ref": "file:#/assets/files/MaurisEnimLeo.xls"
}, {
  "title": "Fix San",
  "$ref": "file:#/assets/files/MaurisEnimLeo.pdf"
}, {
  "title": "Vagram",
  "$ref": "file:#/assets/files/MaurisSit.ppt"
}, {
  "title": "Regrant",
  "$ref": "file:#/assets/files/NullaSuspendissePotenti.png"
}, {
  "title": "Treeflex",
  "$ref": "file:#/assets/files/UrnaPretiumNisl.jpg"
}, {
  "title": "Greenlam",
  "$ref": "file:#/assets/files/Posuere.xls"
}, {
  "title": "Sonsing",
  "$ref": "file:#/assets/files/Amet.csv"
}, {
  "title": "Toughjoyfax",
  "$ref": "file:#/assets/files/LacusAtTurpis.ppt"
}]

Answer 1

use [href]

<div *ngFor="let quick of quickReferences">
    <a [href]="quick.$ref">{{quick.title}}</a>
</div>