Angular 6 with Chrome device toolbar click event firing multiple times

Question

I'm new to the world of Angular and am just starting a web app in Angular 6. I ran into this strange problem today while trying to show/hide my menu on a click. For some reason, in the Chrome device toolbar (trying to emulate a phone to develop for mobile first) it will fire the click event twice unless I use the very edge of the touch circle on the icon. It works in the normal Chrome window with the mouse pointer as well as in Firefox's "responsive design mode" which basically is the same thing as Chrome's device toolbar mode. This makes me suspect it has something to do with the simulated touch it's doing, but I'm not sure. Is there anything I'm doing wrong or that I should be worried about? Or this a weird Chrome bug? I'm not to the point where I can actually test this on a phone, sadly.

In-progess code below:

<ng-container>
  <div id="top-header-sm">
    <div class="header-bar" id="name-header-bar">
      <i class="fa fa-bars" (click)="toggleMobileMenu()" id="menu-btn"></i>
      <i class="fa fa-home" id="geomni-logo" aria-hidden="true"></i>Geomni <i class="header-sub-text">PRODUCTS</i>
    </div>
    <div *ngIf="showMenu" id="mobile-nav-container">
      <div id="mobile-nav-menu">
        <ul>
          <li>
            <a href="/orders">ORDERS</a>
          </li>
          <li>
            <a href="/billing">BILLING</a>
          </li>
          <li>
            <a href="/data">DATA</a>
          </li>
          <li>
            <a href="/settings">SETTINGS</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</ng-container>

And the component here:

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  showMenu = false;

  constructor() {

  }

  toggleMobileMenu() {
    this.showMenu = !this.showMenu;
  }

  ngOnInit() {
  }

}