title: Using JSON $ref in Angular, to dynamically list hyperlinks to files
body: <p>I have an Angular site that successfully uses <code>*ngFor</code> within a Bootstrap card. It has a title and lists the document name and extension below the title. As shown here:</p>
  
  <p><a href="https://i.stack.imgur.com/wi2Zx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wi2Zx.png" alt="screen shot of ngFor working"></a></p>
  
  <p>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.</p>
  
  <p>Note URL correctly works perfectly. Meaning <code>www.XXXX.com/assets/files/document_2017.pdf</code> is live and I see the PDF document I should see.</p>
  
  <p>Objective: a non-technical individual can go to just the <code>assets</code> 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.</p>
  
  <p>Maybe I am using $ref incorrectly or maybe there is a better way to accomplish this feature for Angular. I am open to alternatives.</p>
  
  <p>Here's what I have:</p>
  
  <p>Project structure - just a snippet</p>
  
  <pre><code>src
  -----| app
          /home
              home.component.html
          /assets
              /files
                  document_2017.pdf
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="card border-light mb-3" style="max-width: 20rem;"&gt;
    &lt;div class="card-header"&gt;Quick References&lt;/div&gt;
    &lt;div class="card-body" *ngFor="let quick of quickReferences"&gt;
      &lt;h6 class="card-title"&gt;{{ quick.title }}&lt;/h6&gt;
      &lt;p class="card-text"&gt;{{ quick.$ref }}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JSON</p>
  
  <pre><code>[{
    "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"
  }]
  </code></pre>