CODEWITHSUNDEEP
angular
Chris
Chris

Reputation: 4728

Loading content of SVG file to show within ngFor

I have an *ngFor loop that iterates through an array of layouts. Each element in layouts is a URL to an SVG file.

<div *ngFor="let layout of layouts; let i = index;" class="layout" (click)="selectLayout(layout.url)">
    <img src="{{ layout.url }}">
</div>

This currently outputs a list of <img> tags with the src as the URL of the SVG file.

Instead I would prefer to actually inline the SVG file, e.g.

<div>
    <svg>blah1</svg>
    <svg>blah2</svg>
    <svg>blah3</svg>
    <svg>blah4</svg>
</div>

Is there any way to achieve this? In PHP I would use the file_get_contents function to load the content of the URL.

EDIT

For example, my layouts array contains ... 

['assets/images/file-1.svg', 'assets/images/file-2.svg', 'assets/images/file-3.svg', 'assets/images/file-4.svg']

Upvotes: 0

Views: 497

Answers (1)

Jean-Baptiste
Jean-Baptiste

Reputation: 1562

If I understand correctly, you want to display svgs to style them easily, you could use the opportunity offered by FileReader (https://developer.mozilla.org/en-US/docs/Web/API/FileReader) and have a method in your component, or something higher to read each file and extract its content to display it inside an svg.

But by doing so, you have to make an http call, for each svg you want to show, which can be heavy depending on your list. Is it possible for you to store those svgs locally?

Edit:

If I were to do it, I would create a ts file containing all my svg and a map of all the svg:

export const sunSvg = "<svg**>"
export const grassSvg = "<svg**>"

export const svgMaps = {
  sun: { svg: sunSvg},
  grass: { svg: grassSvg}
}

I would also create a service that would manage getting the svg content:

import { svgMaps } from './svg';

export class SvgElements {
  getSvgElement(element) {
    if (svgMaps[element]) {
      return svgMaps[element].svg;
    } else {
      console.log(`The svg |> ${element} <| does not have a handler.`);
    }
  }
}

Then you can call your service through a method in your component to get this content.

Upvotes: 1

Related Questions