Click to tweet Angular Component

click-to-tweet.component.html

<a href="{{tweetUrl}}" target="_blank">
  <span class="cta">{{cta}}</span>
  <i class="fab fa-twitter twitter-icon"></i>
</a>

click-to-tweet.component.scss

:host {
  --text-color: #788797;
}

.cta {
  text-transform: uppercase;
  color: var(--text-color);
}

.twitter-icon {
  font-size: 20px;
  margin-left: 6px;
}

click-to-tweet.component.ts

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

@Component({
  selector: 'cc-click-to-tweet',
  templateUrl: './click-to-tweet.component.html',
  styleUrls: ['./click-to-tweet.component.scss']
})
export class ClickToTweetComponent implements OnInit {

  @Input() text: string;
  @Input() url: string;
  @Input() via: string;
  @Input() hashtags: string;
  @Input() cta: string;

  tweetUrl: string;

  constructor(private router: Router) { }

  ngOnInit(): void {

    this.tweetUrl = 'https://twitter.com/intent/tweet';
    this.tweetUrl += '?text=' + '"' + this.text + '"';


    if (this.hashtags) {
      this.tweetUrl += '&hashtags=' + this.hashtags;
    }

    if (this.url) {
      this.tweetUrl += '&url=' + this.url;
    } else {
      // current url
      this.tweetUrl += '&url=' + location.origin + this.router.url;
    }

    if (this.via) {
      this.tweetUrl += '&via=' + this.via;
    }
    
  }
}

your-post.component.html

<div class="click-to-tweet-wrapper">
  <p>
    From a preloading standpoint, it's ideal to stay one step ahead of the user and preload any routes he might try to go to next. For example, when a user visits a listing screen, you could preload the details view so it's ready to go.
  </p>
  <cc-click-to-tweet class="click-to-tweet"
    [cta]="'Click to tweet'"
    [hashtags]= "'ionic,angular'"
    [text]="'From a preloading standpoint, it is ideal to stay one step ahead of the user and preload any routes he might try to go to next.'"
    [url]="'https://ionicthemes.com/tutorials/ionic-navigation-and-routing-ultimate-guide'">
  </cc-click-to-tweet>
</div>

Result: