Share button do not appear?

Ionic Framework ionic-v3
1

I want a share function thru social media like Facebook on top of the navigation bar (or any other places)

I found this example online.

Then I create share.js under js folder (add the app\pages\home\home.js from the example) and add the app\pages\home\home.html into my-stock.html.

I templateurl in share.js

@Page({
  templateUrl: 'stockMarketApp/www/templates/my-stocks.html',
})

However, I do not see any share button appear.

Do you know which part of my scripts not correct?
I am not sould should I create a new html file. Currently I put the code in an existing my-stock.html that consist of other ionic items

<ion-view view-title="Watchlist" id="my-stocks">
  <ion-navbar *navbar>
   <ion-title>
     Home
   </ion-title>
 </ion-navbar>
  
 <ion-content class="has-header preview-icons">
   <ion-card>
     <ion-card-header>
       Card Header
     </ion-card-header>
     <ion-card-content>
       Hello World
     </ion-card-content>
   </ion-card>
  
     <ion-card>
       <button full (click)="whatsappShare()">Share on WhatsApp</button>
       <button full secondary (click)="twitterShare()">Share on Twitter</button>
       <button full danger (click)="facebookShare()">Share on Facebook</button>
       <button full dark (click)="otherShare()">Share Other</button>
    </ion-card>
   
 </ion-content>
  <ion-nav-buttons side="right">
    <button class="button button-clear" ng-click="modalService.openModal(1)">
    <i class="icon icon-small ion-ios-search"></i>
    </button>
  </ion-nav-buttons>

  <ion-content>

    <ion-refresher
      pulling-text="Pull to refresh..."
      on-refresh="getMyStocksData()"
      class="margin-auto"
    ></ion-refresher>

    <ion-list>

      <ion-item ng-repeat="stock in myStocksData | orderBy: '-chg_percent' track by stock.symbol" ng-href="#/app/{{stock.symbol}}">

        <div class="row row-center">
          <div class="col stock-ticker-name">
            <h3>{{stock.symbol}}</h3>
            <h6 ng-bind-html="::stock.name"></h6>
          </div>

          <div class="col col-25 stock-price-time">
            <h3>{{stock.price | shrinkNumber:2}}</h3>
            <h6>{{stock.utctime | date:'h:mm a'}}</h6>
          </div>

          <div class="col col-33 stock-change" ng-class="stock.change >= 0 ? 'background-green' : 'background-red'">
            <h3><span ng-if="stock.change >= 0">+</span>{{stock.chg_percent | number:3}}%</h3>
            <h6><span ng-if="stock.change >= 0">+</span>{{stock.change | shrinkNumber:2}}</h6>
          </div>
        </div>

        <ion-option-button class="button-light icon ion-minus-circled color-red inset-shadow" ng-click="unfollowStock(stock.symbol)"></ion-option-button>

      </ion-item>

    </ion-list>
  </ion-content>
</ion-view>