Only one font awesome icon displaying correctly using [ngClass] conditions

Question

I am building a user profile where the user can submit links to his or her social media accounts. Each account is represented with a clickable link. Which icon should be chosen is decided by multiple conditions in [ngClass], heres the code:

    <div *ngIf="socialMediaLinkList.length > 0" class="topic">
            <strong>can be followed on:</strong>
                <a *ngFor="let socialMediaLink of socialMediaLinkList" [href]="socialMediaLink.link">
                    <i [title]="socialMediaLink.socialMediaType" 
                    [ngClass]="{
                        'fa fa-youtube':socialMediaLink.socialMediaType === 'YOUTUBE',
                        'fa fa-facebook-official':socialMediaLink.socialMediaType === 'FACEBOOK',
                        'fa fa-twitter':socialMediaLink.socialMediaType === 'TWITTER',
                        'fa fa-reddit':socialMediaLink.socialMediaType === 'REDDIT',
                        'fa fa-pinterest':socialMediaLink.socialMediaType === 'PINTEREST',
                        'fa fa-linkedin-square':socialMediaLink.socialMediaType === 'LINKEDIN',
                        'fa fa-instagram':socialMediaLink.socialMediaType === 'INSTAGRAM',
                        'fa fa-google-plus':socialMediaLink.socialMediaType === 'GOOGLE_PLUS',
                        'fa fa-tumblr-square':socialMediaLink.socialMediaType === 'TUMBLR',
                        'fa fa-vimeo-square':socialMediaLink.socialMediaType === 'VIMEO',
                        'fa fa-vk':socialMediaLink.socialMediaType === 'VKONTAKTE',
                        'fa fa-weibo':socialMediaLink.socialMediaType === 'WEIBO',
                        'fa fa-renren':socialMediaLink.socialMediaType === 'RENREN',
                        'fa fa-odnoklassniki':socialMediaLink.socialMediaType === 'ODNOKLASSNIKI',
                        'fa fa-flickr':socialMediaLink.socialMediaType === 'FLICKR'
                }"></i>
                </a> 
        <mat-divider></mat-divider>
    </div>

The problem is that only the last icon in the condition list is displaying correctly, all the others are displayed like uniform blocks like so:

And this is only because FLICKR happens to be in the list of randomly generated social media accounts. If FLICKR is not part of that list then all the social media account icons will be blocks. Things change if for example i swap the condition for ODNOKLASSNIKI with FLICKR, making ODNOKLASSNIKI be the last. Now Odnoklassniki is the only icon that will display correctly.

I've followed the ngClass example here https://codecraft.tv/courses/angular/built-in-directives/ngstyle-and-ngclass/ and i as far as i'm concerned i'm not making any errors.

Heres how the list is being initialized using the SocialMediaLink class

export class SocialMediaLink{
  constructor(public socialMediaType:string, public link: string){}
}

if(this.aboutSection.socialMediaAccounts !== undefined){
    this.selectedSocialMediaAccounts = new Map<SocialMedia,string>((<any>Object).entries(this.aboutSection.socialMediaAccounts));
    this.selectedSocialMediaAccounts.forEach((link: string, socialMediaType:SocialMedia) => 
    this.socialMediaLinkList.push(new SocialMediaLink(socialMediaType.toString(), link)));
} 

Can anyone tell me how i can remedy this problem? Thank you

EDIT: this is the font awesome cdn i'm using @import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';

Answer 1

In your ngClass binding, if a condition is true, it sets the fa class. However, the following conditions, which are false, remove it. That is why the fa class is preserved only when the last condition is true.

You should set the common class fa outside of the conditional ngClass binding:

<i [title]="socialMediaLink.socialMediaType" 
  class="fa" 
  [ngClass]="{
    'fa-youtube': socialMediaLink.socialMediaType === 'YOUTUBE',
    'fa-facebook-official': socialMediaLink.socialMediaType === 'FACEBOOK',
    'fa-twitter': socialMediaLink.socialMediaType === 'TWITTER',
    'fa-reddit': socialMediaLink.socialMediaType === 'REDDIT',
    'fa-pinterest': socialMediaLink.socialMediaType === 'PINTEREST',
    'fa-linkedin-square': socialMediaLink.socialMediaType === 'LINKEDIN',
    'fa-instagram': socialMediaLink.socialMediaType === 'INSTAGRAM',
    'fa-google-plus': socialMediaLink.socialMediaType === 'GOOGLE_PLUS',
    'fa-tumblr-square': socialMediaLink.socialMediaType === 'TUMBLR',
    'fa-vimeo-square': socialMediaLink.socialMediaType === 'VIMEO',
    'fa-vk': socialMediaLink.socialMediaType === 'VKONTAKTE',
    'fa-weibo': socialMediaLink.socialMediaType === 'WEIBO',
    'fa-renren': socialMediaLink.socialMediaType === 'RENREN',
    'fa-odnoklassniki': socialMediaLink.socialMediaType === 'ODNOKLASSNIKI',
    'fa-flickr': socialMediaLink.socialMediaType === 'FLICKR'
  }"></i>

See this stackblitz for a demo.

---

An alternative solution is to keep fa in the ngClass binding, and to set its condition to true:

<i [title]="socialMediaLink.socialMediaType" 
  [ngClass]="{
    'fa': true,
    'fa-youtube': socialMediaLink.socialMediaType === 'YOUTUBE',
    ...
  }"></i>