How to create a social media component in Angular for all of your users

Using Angular means you never have to repeat your code again! For example, I created a social media component that is account neutral so that it can be reused over and over again, even if the user has completely different accounts. I’ve outlined the steps below:

Step 1: Create an interface called Social Media

You should take advantage of Typescript’s strong typing capability to indicate what parameters the user will need to provide. I chose to include “link” for a hyperlink to the user’s account and “user” for the account holder’s name.

export interface SocialMedia {
  link:string,
  user:string
}

Step 2: Create a social media component

Use variables in your component’s HTML so that the hyperlink and icon will automatically be created for the user.

<div class="social-media" [ngClass]="{'vertical':vertical}">
  <div *ngIf="facebook" class="social-media-icon">
    <a [href]="facebook.link" target="_blank" rel="noopener" title="view {{ facebook.user }} on facebook"><ces-svg-facebook></ces-svg-facebook></a>
  </div>
  <div *ngIf="twitter" class="social-media-icon">
    <a [href]="twitter.link" target="_blank" rel="noopener" title="view {{ twitter.user }} on twitter"><ces-svg-twitter></ces-svg-twitter></a>
  </div>
  <div *ngIf="linkedIn" class="social-media-icon">
    <a [href]="linkedIn.link" target="_blank" rel="noopener" title="view {{ linkedIn.user }} on linkedIn"><ces-svg-linkedin></ces-svg-linkedin></a>
  </div>
  <div *ngIf="medium" class="social-media-icon">
    <a [href]="medium.link" target="_blank" rel="noopener" title="view {{ medium.user }} on medium"><ces-svg-medium></ces-svg-medium></a>
  </div>
</div>

Note: You can make your component even more dynamic by substituting the social platform’s name with a variable and filling all values within a for loop, but I chose to write them out so that it’s clearer to see what’s available.

Additional note: All of the icons on Cloud Engineering Studio were created by componentizing SVGs I purchased with my Font Awesome subscription.

Step 3: Create Angular Inputs to accept the necessary values

I added an additional boolean called “vertical” so the user can specify if they want the icons to be displayed inline.

export class SocialMediaComponent  {
  @Input() facebook:SocialMedia;
  @Input() twitter:SocialMedia;
  @Input() linkedIn:SocialMedia;
  @Input() medium:SocialMedia;
  @Input() vertical:boolean = true;
}

Step 4: Use the component

I included the social media component in the footer of my website.

<ces-social-media ngClass="social-media-footer" [facebook]="{link: 'https://www.facebook.com/cloudengineeringstudio/', user: 'Cloud Engineering Studio' }" [twitter]="{link: 'https://twitter.com/CloudEngineeer', user: 'CloudEngineer'}" [linkedIn]="{link: 'https://www.linkedin.com/company/cloudengineeringstudio', user: 'Cloud Engineering Studio'}" [medium]="{link:'https://medium.com/@yoko_65687', user: 'Yoko Ishioka'}"></ces-social-media>

And voila, here is what will get rendered:

Here is a link to the code in Github Gist.