CODEWITHSUNDEEP
angularinternet-explorersvgattributes
sandrooco
sandrooco

Reputation: 8716

Angular: attr.class on svg doesn't work with IE

I want to indicate if a user favorited a certain element or not.

The svg has a class for basic styling: favoritesStar. If the user favorited the element, there should be a second class: favoritesStarActive.

<div class="favoriteStarWrapper">
    <svg [ngClass]="getFavoriteStarClasses(project)" viewBox="0 0 99.109 94.258" enable-background="new 0 0 99.109 94.258" xml:space="preserve">
        <polygon points="49.555,0 64.868,31.028 99.109,36.003 74.333,60.155 80.181,94.258 49.555,78.156 18.928,94.258 24.777,60.155 0,36.003 34.241,31.028 " />
    </svg>
</div>

Usually we use a normal class="favoritesStar" and [class.favoritesStarActive]="project.IsUserFavorite". project is async by the way.

Because of some certain problems with IE, there's a bug. See this discussion.

There's a fix linked. I tried it with the following counterpart for the upper html:

private getFavoriteStarClasses(project: Project) {
    let classes = "favoritesStar";
    if (project.IsUserFavorite) {
        classes = classes + " favoritesStarActive";
    }

    return classes;
}

Strangely, this works without problems on Chrome, IE although always returns false when checking for the IsUserFavorite property.

Upvotes: 2

Views: 710

Answers (1)

sandrooco
sandrooco

Reputation: 8716

Using attr.class with a public method that returns the classes that should be used worked. Not sure if the classList.js shim is used, I will leave it included for possible future bugs.

<svg [attr.class]="getFavoriteStarClasses(project)" viewBox="0 0 99.109 94.258" enable-background="new 0 0 99.109 94.258" xml:space="preserve">
    <polygon points="49.555,0 64.868,31.028 99.109,36.003 74.333,60.155 80.181,94.258 49.555,78.156 18.928,94.258 24.777,60.155 0,36.003 34.241,31.028 " />
</svg>

Upvotes: 1

Related Questions