After inheriting a project in disarray, I am perplexed by the previous developer's choice to code the social icon component this way. Handling the URLs for each when clicked is proving to be a challenge. Here is where the code stands currently.
TS:
import { Component, OnInit, ElementRef, EventEmitter } from "@angular/core";
import {faFacebook, faTwitter, faLinkedin} from "@fortawesome/free-brands-svg-icons";
import { FaIconComponent } from "@fortawesome/angular-fontawesome";
@Component({
selector: "app-social-media",
templateUrl: "./social-media.component.html",
styleUrls: ["./social-media.component.scss"]
})
export class SocialMediaComponent implements OnInit {
iconTwitter = faTwitter;
iconFaceBook = faFacebook;
iconLinkedIn = faLinkedin;
public static SocialMediaClicked: EventEmitter<FaIconComponent> = new EventEmitter();
constructor() { }
ngOnInit() {
}
onIconClicked(ele:FaIconComponent){
SocialMediaComponent.SocialMediaClicked.emit(ele);
console.log(ele);
}
}
HTML:
<fa-icon aria-label="Twitter" class="bopd-footer-icon"
#twitter
(click)="onIconClicked(twitter)"
[icon]="iconTwitter"
></fa-icon>
<fa-icon aria-label="LinkedIn" class="bopd-footer-icon"
#linkedIn
(click)="onIconClicked(linkedIn)"
[icon]="iconLinkedIn"
></fa-icon>
<fa-icon aria-label="Facebook" class="bopd-footer-icon"
#faceBook
(click)="onIconClicked(faceBook)"
[icon]="iconFaceBook"
></fa-icon>