AngularアプリにTwitterなどのシェアボタンを実装する方法

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-share-button',
  templateUrl: './share-button.component.html',
  styleUrls: ['./share-button.component.css']
})
export class ShareButtonComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

<div class="container">
  <!-- Twitter -->
  <button mat-flat-button class="twitter-button">
    <img src="assets/img/twitter.png" alt="Twitter">
    <a href="https://twitter.com/share?url=https://yoteiPicker.com&text=yoteiPickerで予定をピックアップする" rel="nofollow" target="_blank">Twitterでシェアする</a>
  </button>
  <!-- facebook -->
  <button mat-flat-button class="facebook-button">
    <img src="assets/img/facebook.png" alt="facebook">
    <a href="https://www.facebook.com/share.php?u=https://yoteiPicker.com&text=yoteiPickerで予定をピックアップする" rel="nofollow" target="_blank">Facebookでシェアする</a>
  </button>
  <!-- LINE -->
  <button mat-flat-button class="line-button">
    <img src="assets/img/line.png" alt="LINE">
    <a href="https://social-plugins.line.me/lineit/share?url=https://yoteiPicker.com&text=yoteiPickerで予定をピックアップする" rel="nofollow" target="_blank">LINEでシェアする</a>
  </button>
</div>

<a href="http://twitter.com/share?url=[シェアするURL]&text=[ツイート内テキスト]&hashtags=[ハッシュタグ]" target="_blank">ツイート</a>

.container {
  text-align: center;
  padding: 30px 0 100px 0;
  display: grid;
  justify-content: center;
}

.twitter-button {
  background-color: #55acee;
}

.facebook-button {
  background-color: #315096;
}

.line-button {
  background-color: #1dcd00;
}

button {
  margin: 10px;
  width: 225px;
}

img {
  width: 20px;
  height: 20px;
}

a {
  padding-left: 10px;
  text-decoration: none;
  color: #fff;
}

<ng-container>
  <app-share-button></app-share-button>
</ng-container>