I'm currently developing a user profile feature that allows users to submit links to their social media accounts. Each account is represented by a clickable icon, and the selection of which icon to display is based on various conditions within [ngClass]. Here's the code snippet:
<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',
//Different conditional classes for each social media icon...
}"></i>
</a>
<mat-divider></mat-divider>
</div>
The issue I'm facing is that only the last icon in the condition list displays correctly, while the rest appear as uniform blocks, as shown here: https://i.sstatic.net/Dn4Cd.png. This occurs when FLICKR is randomly included in the list of social media accounts. If FLICKR is removed, all icons become blocks. Swapping conditions changes the displayed icon, but the problem persists.
I've referred to the ngClass example at and can't find any errors.
This is how the list is initialized using the SocialMediaLink class:
export class SocialMediaLink{
constructor(public socialMediaType:string, public link: string){}
}
//Initializing social media accounts
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)));
}
If anyone has a solution to this problem, I would greatly appreciate it. Thank you.
EDIT: Font Awesome CDN link being used: @import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';