Social Media component in Angular

footer.component.html

<footer>
    <ces-social-media ngClass="social-media-footer" [facebook]="{link: 'cloudengineeringstudio', user: 'Cloud Engineering Studio' }" [twitter]="{link: 'CloudEngineeer', user: 'CloudEngineer'}" [linkedIn]="{link: 'cloud-engineering-studio', user: 'Cloud Engineering Studio', company: true}" [medium]="{link:'yoko_65687', user: 'Yoko Ishioka'}"></ces-social-media>
    &copy; {{ startYear }} - {{ year }} Cloud Engineering Studio by, <a href="https://yokoishioka.com" title="Yoko Ishioka Cloud Engineering Website">Yoko Ishioka</a> |
    <a routerLink="privacy-policy" routerLinkActive="active" title="{{ name }}'s Privacy Policy">privacy policy</a>
</footer>

social-media.component.html

<div class="social-media" [ngClass]="{'vertical':vertical}">
    <div *ngIf="facebook" class="social-media-icon">
        <a [href]="facebookLink + facebook.link" target="_blank" rel="noopener" title="view {{ facebook.user }} on facebook"><img src="/assets/images/svgs/facebook.svg" alt="facebook icon"></a>
    </div>
    <div *ngIf="twitter" class="social-media-icon">
        <a [href]="twitterLink + twitter.link" target="_blank" rel="noopener" title="view {{ twitter.user }} on twitter"><img src="/assets/images/svgs/twitter.svg" alt="twitter icon"></a>
    </div>
    <div *ngIf="linkedIn" class="social-media-icon">
        <a *ngIf="linkedIn.company; else altLinkedIn" [href]="linkedInLinkCompany + linkedIn.link" target="_blank" rel="noopener" title="view {{ linkedIn.user }} on twitter"><img src="/assets/images/svgs/linkedin.svg" alt="linkedIn icon"></a>
        <ng-template #altLinkedIn>
            <a [href]="linkedInLink + linkedIn.link" target="_blank" rel="noopener" title="view {{ linkedIn.user }} on twitter"><img src="/assets/images/svgs/linkedin.svg" alt="linkedIn icon"></a>
        </ng-template>
    </div>
    <div *ngIf="medium" class="social-media-icon">
        <a [href]="mediumLink + medium.link" target="_blank" rel="noopener" title="view {{ medium.user }} on medium"><img src="/assets/images/svgs/medium.svg" alt="medium icon"></a>
    </div>
</div>

social-media.component.ts

import { Component, Input } from '@angular/core';
import { SocialMedia } from './social-media';

@Component({
  selector: 'ces-social-media',
  templateUrl: './social-media.component.html',
  styleUrls: ['./social-media.component.scss']
})
export class SocialMediaComponent  {
  @Input() facebook:SocialMedia;
  @Input() twitter:SocialMedia;
  @Input() linkedIn:SocialMedia;
  @Input() medium:SocialMedia;
  @Input() vertical:boolean = true;
  
  facebookLink:string = "https://www.facebook.com/";
  twitterLink:string = "https://twitter.com/";
  linkedInLink:string = "https://www.linkedin.com/";
  linkedInLinkCompany:string = "https://www.linkedin.com/company/"
  mediumLink:string = "https://medium.com/@";
}

Here's a link to my blog post that describes more in detail what I'm doing.