Angular 2 lacks compatibility with SVG

I have a website where I want to include SVG images inline with my HTML using Angular 2. However, when I try to load the SVG icons within a component, they do not display correctly. Instead, I see the following:

https://i.sstatic.net/Ozo6E.png

You can view my code below and on this fiddle:

<div *ngFor="let item of achievements; let i = index" class="achievementscontainer">
    <h3>{{item.name}}</h3>
    <p>{{item.description.replace('%d', item.next)}}</p>
    <div [innerHTML]="item.image" [class]="item.status"></div>
    <p class="bold">Progress till next achievement:</p>
    <p><span>{{item.progress}}</span>/<span>{{item.next}}</span></p>
</div>

import { Component } from '@angular/core';
@Component({
    templateUrl: "./profile.component.html"
})
export class ProfileComponent {
    achievements = [
        { 
            image: `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
                        <path class="st0" d="M194.5,101.5c10.3-10.8,16.6-25.4,16.6-41.4C211.1,26.9,184.2,0,151,0C117.9,0,91,26.9,91,60.1 c0,15.8,6.1,30.2,16.1,40.9c-33.7,10.4-58.4,41.8-58.4,78.8v84.8c0,19.4,15.9,35.3,35.3,35.3h129.6c20.7,0,37.7-17,37.7-37.7v-82.5 C251.3,143.4,227.4,112.4,194.5,101.5z"/>
                    </svg>`, 
            name: "Follower", 
            description: "Followed %d people", 
            progress: 6,
            next: 35,
            status: "brons"
        }, { 
            image: `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
                        <path class="st0" d="M263.1,218.1l2.6-4.5l13.5,7.8c11.4-20.5,18.1-43.9,18.6-68.9H282v-5.2h15.7c-0.4-25-7-48.5-18.4-69l-13.7,7.9 l-2.6-4.5l13.7-7.9c-12.4-20.7-29.8-38.1-50.5-50.5l-7.9,13.7l-4.5-2.6l7.9-13.7c-20.5-11.4-44-18-69-18.4v15.7h-5.2V2.4 c-25,0.5-48.4,7.1-68.9,18.6l7.8,13.5L82,37.1l-7.8-13.5C53.6,36,36.3,53.4,23.9,74.1l13.4,7.7l-2.6,4.5l-13.4-7.7 C10,99,3.4,122.4,3,147.4h15.3v5.2H3c0.5,24.9,7.1,48.3,18.5,68.7l13.2-7.6l2.6,4.5l-13.2,7.6c12.4,20.6,29.7,37.9,50.3,50.3 l7.6-13.2l4.5,2.6l-7.6,13.2c20.4,11.3,43.8,18,68.7,18.4v-15.3h5.2v15.3c24.9-0.4,48.4-7,68.8-18.3l-7.7-13.3l4.5-2.6l7.7,13.3 c20.7-12.4,38-29.7,50.5-50.3L263.1,218.1z M228.1,55.1l-66.9,92.5c0.4,2.9,0,5.8-1.3,8.5l47.1,71.5c0.9,1.3,0.5,3.1-0.8,4l-8.4,5.6 c-1.3,0.8-3,0.5-3.8-0.8L146,163.7c-3.1-0.3-6.2-1.6-8.6-4c-5.5-5.5-5.5-14.3,0-19.8c...
<strong>P.S. 1:</strong> To run the code, you can access this GitHub project: <a href="https://github.com/WatchFriends/Web/tree/dev-profile/frontend/app/profile" rel="nofollow noreferrer">WatchFriends/Web</a> on the <code>dev-profile branch in the folder ./frontend/app/profile. The URL is http://localhost:4200/profile.



P.S. 2: Wishing you a Happy 2017 and may all your dreams come true :)
angularjsangularsvgtypescript

Answer №1

After doing some research, I was able to discover the solution to my issue. I have included a constructor and method in the code snippet below into my class:

constructor(private sanitizer: DomSanitizer) {
}

transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
}

Furthermore, in my HTML code, I implemented the following:

<div [innerHTML]="transform(item.image)" [class]="item.status"></div>

Instead of the previous implementation which was:

<div [innerHTML]="item.image" [class]="item.status"></div>

I am grateful for the valuable input provided by @micronyks and @GünterZöchbauer.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the services contain no data, I must display a dash "-" instead of a blank cell. However, if there is data available, I need to show it accordingly

Area of Distribution expand_more {{element.regionSaleCode}} ...

angular

Pushing out the both /browser and /server directories from an Angular SSR application to Azure Static Web Apps

Continuing from the discussion in this thread, my current challenge involves deploying my Angular SSR app to Azure SWA. I have successfully set it up for running and deployment (using the GitHub Action here): name: Azure Static Web Apps CI/CD on: push: ...

angularazureserver-side-renderingazure-static-web-app

Types of navigation items based on conditions

I want to create an interface where a navigationItem can have optional childs for a dropdown menu. If the childs property is provided, I want to require the icon property in the navigationItem object. If no childs are given, the icon property should not be ...

reactjstypescriptnext.js

Ionic's statement is clear: using multiple abstract views is not an effective approach

I have been working on a project using Ionic where I have nested multiple abstract views. However, I am running into issues as it doesn't seem to be working properly, even though I've followed the instructions in this post angular_app = angular. ...

angularjsionic-frameworkcoffeescriptangular-ui-router

I'm puzzled as to why $document.referrer in AngularJS is returning blank, whereas using document.referrer directly gives me a value

let source = $document.referrer; Looking for the value of $document.referrer and storing it in a variable. ...

jqueryangularjsjqlite

Dynamic SVG circles with timer and progress animation

Is there a way to modify the following: var el = document.getElementById('graph'); // get canvas var options = { percent: el.getAttribute('data-percent') || 25, size: el.getAttribute('data-size') || 220, lineW ...

javascripthtmlcsssvg

Issue encountered with Next.js 13.4 and NextAuth: A Type Error stating that 'AuthOptions' is not compatible with type 'never'

Currently, I am in the process of developing a Next.js 13.4 project and attempting to configure NextAuth using the app/router. Unfortunately, I have encountered a type error that I am struggling to troubleshoot. Below is my route.ts file: import NextAuth, ...

typescriptnext.jstypeerrornext-auth

What are the best methods for capturing individual and time-sensitive occurrences within a service?

I am currently working on structuring the events within a service to enable a mechanism for subscribing/unsubscribing listeners when a controller's scope is terminated. Previously, I utilized $rootScope.$on in this manner: if(!$rootScope.$$listeners[& ...

javascriptangularjsangularjs-scopedom-events

Utilizing TypeScript to reference keys from one interface within another interface

I have two different interfaces with optional keys, Obj1 and Obj2, each having unique values: interface Obj1 { a?: string b?: string c?: number } interface Obj2 { a: boolean b: string c: number } In my scenario, Obj1 is used as an argument ...

typescript

Executing a method of another component in Angular2

In my Angular2 application, I have created a Header component that is rendered within the main App component. Now, I am faced with the challenge of placing a submit button from another Form component into the Header. How can I achieve this? I find myself ...

angular

Developing new Azure AD users through Angular using MSAL.js

Is it feasible, from the perspective of Web Applications, for a user to create an Azure AD account by inputting their email, name, phone number, and other details that can then be forwarded to Azure AD through the web application? I am currently exploring ...

angularazureauthenticationazure-active-directoryazure-ad-msal

In Typescript, we can use a class to encapsulate another class and then return a generic result

Trying to wrap my head around the concept of generic classes, and now I need to dynamically create another class. However, I am uncertain about how to go about it. Class A {} Class B<T> { Return T } Const c = B(A); // which is T More context on w ...

javascripttypescript

Error in Typescript for callback function: The type 'Function' does not match any signature

I am encountering an error stating that Type 'Function' does not match the signature for the filter function below. This is because the filter function expects a specific type. How can I define my callback function to align with what the filter f ...

typescript

Dependency Injection: The constructor of the injectable class is called multiple times

There are multiple classes that inject the TermsExchangeService: import {TermsExchangeService} from './terms-exchange.service'; @injectable() export class TermsExchangeComponent { constructor( private termsExchangeService: TermsExchan ...

typescriptinversifyjs

Angular sends a blank object to the server

Utilizing angular along with spring boot 2 has presented a challenge for me. Each time I attempt to send a POST request, spring validation messages pop up indicating that my fields cannot be empty or null. Here is the form structure of my POST request: < ...

javascriptnode.jsangularintellij-idea

404 Error: The requested resource is not available on the web API

I have been attempting to utilize Web Api to send/receive data from the server. In my WebApiConfig.cs file: config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "{controller}/{act ...

angularjsasp.net-web-apiangularjs-http

Data transmission issue between Angular JS and Web Api

https://i.sstatic.net/ZEm8r.png https://i.sstatic.net/aaeoo.png https://i.sstatic.net/Ak6ue.png Having trouble with Angular's POST method when trying to send data to a web API controller. Despite making the $http call to the web API, the data is st ...

angularjswebasp.net-web-api

Exploring ways to conduct a thorough scan of object values, inclusive of nested arrays

My goal is to extract all values from an object. This object also includes arrays, and those arrays contain objects that in turn can have arrays. function iterate(obj) { Object.keys(obj).forEach(key => { console.log(`key: ${key}, value: ${o ...

typescriptiteration

Utilizing AngularJS watchCollection to monitor changes in scope variables alongside an array

Within my controller, I have several scope variables: $scope.searchText = "abc"; $scope.currentPage ="1"; $scope.sortBy ="dateTime"; $scope.sortOrder="reverse"; $scope.columnSettings = [ {"name": "dateTime", ...

angularjs

Jest Test - Uncaught TypeError: Unable to create range using document.createRange

my unique test import VueI18n from 'vue-i18n' import Vuex from "vuex" import iView from 'view-design' import {mount,createLocalVue} from '@vue/test-utils' // @ts-ignore import FormAccountName from '@/views/forms/FormAcco ...

typescriptunit-testingvue.jsjestjsiview