Sample AngularJS Component

contactBar.component.js

import { ContactBarController } from './contactBar.controller';

angular.module('RateMyAgent.Common').component('rmaContactBar', {
  templateUrl: '/templates/_common/contact-bar/contactBar.html',
  bindings: {
    agent: '<',
    buttonLocation: '<'
  },
  controllerAs: '$ctrl',
  controller: ContactBarController
});

contactBar.controller.js

/*
Sample AngularJS Component
*/
import styles from './contactBar.scss';

export class ContactBarController {
  constructor(ContactRequestService) {
    'ngInject';

    this.styles = styles;
    this.contactRequestService = ContactRequestService;

    this.showPhoneNumber = false;
    this.showPhoneList = false;
    this.phone = this.agent.Phone;
    this.mobile = this.agent.Mobile;
  }

  $onInit() {
    this.primaryPhoneNumber = this.mobile || this.phone;
    this.secondaryPhoneNumber = !!this.mobile ? this.phone : null;
    this.callLink = `tel:${this.primaryPhoneNumber}`;
    this.displayMultipleNumbers = !!this.secondaryPhoneNumber;
    this.phoneNumberClass = this.getPhoneNumberClass();
  }

  onContact(event) {
    event.preventDefault();
    const agentCode = this.agent.AgentCode;
    const trackingLabel = `Agent ${agentCode} - ${this.buttonLocation}`;

    this.contactRequestService.openAgentContactModal(agentCode, this.agent.AgentName, null, trackingLabel);
  }

  onShowPhoneNumber(event) {
    event.preventDefault();
    this.showPhoneNumber = true;
    this.phoneNumberClass = this.styles.contactBarButton;
    if (this.displayMultipleNumbers) {
      this.showPhoneList = !this.showPhoneList;
    }
  }

  getPhoneNumberClass() {
    return !this.displayMultipleNumbers && this.primaryPhoneNumber && this.primaryPhoneNumber.length > 6 ?
      `${this.styles.ellipsis} ${this.styles.contactBarButton}` : this.styles.contactBarButton;
  }
}

contactBar.html

<div ng-class="::$ctrl.styles.contactBar" class="container" sticky unsticky-class="{{::$ctrl.styles.unsticky}}" anchor="bottom" confine="true">
  <div ng-class="::$ctrl.styles.contactBarItem">
    <div ng-class="::$ctrl.styles.hideMobile">
      <button
        ng-class="$ctrl.phoneNumberClass" 
        ng-click="::$ctrl.onShowPhoneNumber($event)">
        <span ng-if="$ctrl.displayMultipleNumbers"><i class="rmaIco ico-phone" aria-hidden="true"></i> Phone</span>
        <span ng-if="!$ctrl.displayMultipleNumbers">
          <span ng-if="!$ctrl.showPhoneNumber"><i class="rmaIco ico-phone" aria-hidden="true"></i> {{::$ctrl.primaryPhoneNumber | limitTo: 6}}</span>
          <span ng-if="$ctrl.showPhoneNumber"><i class="rmaIco ico-phone" aria-hidden="true"></i> {{::$ctrl.primaryPhoneNumber}}</span>
        </span>
      </button>
      <ul ng-class="::$ctrl.styles.contactListing"
        ng-if="$ctrl.showPhoneList">
        <li>{{::$ctrl.primaryPhoneNumber}}</li>
        <li>{{::$ctrl.secondaryPhoneNumber}}</li>
      </ul>
    </div>
    <a
      class="{{::$ctrl.styles.contactBarButton}} {{::$ctrl.styles.showMobile}}"
      ng-href="{{::$ctrl.callLink}}">
        <span><i class="rmaIco ico-phone" aria-hidden="true"></i> Call</span>
      </a>
  </div>
  
  <div ng-class="::$ctrl.styles.contactBarItem">
    <button 
      ng-class="::$ctrl.styles.contactBarButton" 
      ng-click="::$ctrl.onContact($event)">
      <i class="rmaIco ico-email" aria-hidden="true"></i> Get in touch
    </button>
  </div>
</div>

contactBar.scss

@import "~@rma/styles/src/no-css";

:local {
  .contactBar {
    display: flex;
    flex: 0 0 44px;
    -webkit-transform: translateZ(0); /* Fix a strange chrome rendering bug: http://stackoverflow.com/questions/15152470/chrome-rendering-issue-fixed-position-anchor-with-ul-in-body */
    z-index: 2; 
  }

  .contactBarItem {
    flex: 1 1 50%;
    text-align: center;
    position: relative; 
  }

  .contactBarButton {
    background: $sky-2018;
    color: $white;
    font-weight: $fontWeightBold;
    padding: 15px;
    cursor: pointer;
    border: none;
    width: 100%;
    
    &:hover, 
    &:focus, 
    &:active {
      outline: none;
      background-color: #005bb1;
    }

    i {
      color: $white;
      margin-right: 15px;
    }
  }

  .contactListing {
    position: absolute;
    left: 0;
    bottom: 39px;
    width: 100%;
    
    li {
      cursor: auto;
      @extend .contactBarButton;

      &:hover, 
      &:focus, 
      &:active {
        outline: none;
        background: $sky-2018;
      }
    }
  }
  
  .ellipsis {
    &:after {
      content: '...';
      display: inline-block;
    }
  }

  .unsticky {
    ul {
      top: 49px;
    }
  }

      
  .hideMobile {
    @media(max-width: $screen-sm-max) {
      display: none;
    }
  }  

  .showMobile {
    display: none !important;

    @media(max-width: $screen-sm-max) {
      display: inline-block !important;
      width: 100%;
    }
  }
}