refactor: augmenting native element :)

Author: trungvose

src/app/components/github/github.component.html

@@ -3,47 +3,35 @@
     <div class="hint">
       Scan QR code to play with a mobile phone
     </div>
-    <img atl="QR Code to play on mobile"
-         src="https://res.cloudinary.com/dvujyxh7e/image/upload/v1595380432/angular-tetris-qr-code-no-text.png" />
+    <img atl="QR Code to play on mobile" src="https://res.cloudinary.com/dvujyxh7e/image/upload/v1595380432/angular-tetris-qr-code-no-text.png" />
   </div>
-  <div class="tweet-button top"
-       *ngIf="max$ | async as maxPoint">
-    <t-twitter-button [url]="getTweetMaxScoreShareUrl(maxPoint)"
-                      (click)="sendTwitterShareMaxScoreEvent()">
+  <div class="tweet-button top" *ngIf="max$ | async as maxPoint">
+    <a t-shared-button [href]="getTweetMaxScoreShareUrl(maxPoint)" (click)="sendTwitterShareMaxScoreEvent()">
       Share Your Score - {{ maxPoint }}
-    </t-twitter-button>
+    </a>
   </div>
   <div class="tweet-button" title="This is one of my favorite project!">
-    <t-twitter-button [showIcon]="false"
-                      [url]="'https://github.com/trungk18/angular-spotify'">
+    <a t-shared-button [showIcon]="false" [href]="'https://github.com/trungk18/angular-spotify'">
       🎧 Angular Spotify
-    </t-twitter-button>
+    </a>
   </div>
   <div class="tweet-button" title="This is one of my favorite project!">
-    <t-twitter-button [showIcon]="false"
-                      [url]="'https://jira.trungk18.com/'">
+    <a t-shared-button [showIcon]="false" [href]="'https://jira.trungk18.com/'">
       🔨 Angular Jira Clone
-    </t-twitter-button>
+    </a>
   </div>
   <div class="tweet-button" title="Thanks for your support!">
-    <t-twitter-button [showIcon]="false"
-                      [url]="'https://www.buymeacoffee.com/tuantrungvo'">
+    <a t-shared-button [showIcon]="false" [href]="'https://www.buymeacoffee.com/tuantrungvo'">
       🍺 Buy me a beer
-    </t-twitter-button>
+    </a>
   </div>
   <div class="tweet-button" style="margin-top: 2px;">
-    <t-twitter-button [url]="tweetAngularTetrisUrl"
-                      (click)="sendTwitterShareEvent()">
+    <a t-shared-button [href]="tweetAngularTetrisUrl" (click)="sendTwitterShareEvent()">
       Tweet
-    </t-twitter-button>
+    </a>
   </div>
   <div class="star-button">
-    <iframe src="https://ghbtns.com/github-btn.html?user=trungk18&repo=angular-tetris&type=star&count=true&size=large"
-            frameborder="0"
-            scrolling="0"
-            width="170"
-            height="30"
-            title="Angular Tetris Star">
+    <iframe src="https://ghbtns.com/github-btn.html?user=trungk18&repo=angular-tetris&type=star&count=true&size=large" frameborder="0" scrolling="0" width="170" height="30" title="Angular Tetris Star">
     </iframe>
   </div>
 </div>

src/app/components/github/github.component.ts

@@ -2,13 +2,13 @@ import { AsyncPipe, NgIf } from '@angular/common';
 import { Component } from '@angular/core';
 import { GoogleAnalyticsService } from '@trungk18/services/google-analytics.service';
 import { TetrisQuery } from '@trungk18/state/tetris/tetris.query';
-import { TwitterButtonComponent } from '../twitter-button/twitter-button.component';
+import { SharedButtonComponent } from '../shared-button/shared-button.component';
 const HASHTAG = 'angular,angulartetris,akita,typescript';
 
 @Component({
   selector: 't-github',
   standalone: true,
-  imports: [TwitterButtonComponent, AsyncPipe, NgIf],
+  imports: [SharedButtonComponent, AsyncPipe, NgIf],
   templateUrl: './github.component.html',
   styleUrls: ['./github.component.scss']
 })

src/app/components/shared-button/shared-button.component.html

@@ -0,0 +1,4 @@
+<svg *ngIf="showIcon" class="icon" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M196.9,462C317.2,462,383,362.3,383,275.9c0-2.8,0-5.6-0.2-8.5c12.8-9.3,23.8-20.7,32.6-33.9  c-11.9,5.3-24.6,8.8-37.6,10.3c13.7-8.2,23.9-21,28.8-36.2c-12.8,7.6-26.9,13-41.5,15.9c-24.8-26.3-66.2-27.6-92.5-2.8  c-17,16-24.2,39.8-18.9,62.5c-52.6-2.6-101.6-27.5-134.8-68.3c-17.4,29.9-8.5,68.1,20.2,87.3c-10.4-0.3-20.6-3.1-29.7-8.2  c0,0.3,0,0.5,0,0.8c0,31.1,22,57.9,52.5,64.1c-9.6,2.6-19.7,3-29.5,1.1c8.6,26.6,33.1,44.9,61.1,45.4  c-23.2,18.2-51.8,28.1-81.2,28.1c-5.2,0-10.4-0.3-15.6-0.9C126.5,451.8,161.3,462,196.9,462" id="XMLID_22_" />
+</svg>
+<ng-content></ng-content>

src/app/components/twitter-button/twitter-button.component.scss renamed to src/app/components/shared-button/shared-button.component.scss

@@ -0,0 +1,13 @@
+import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: '[t-shared-button]',//eslint-disable-line
+  standalone: true,
+  templateUrl: './shared-button.component.html',
+  styleUrls: ['./shared-button.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SharedButtonComponent {
+  @HostBinding('class') className = 'twitter-button';
+  @Input() showIcon = true;
+}