Define Keyboard Shortcut for direct access to search bar (even considering different modifiers for Macs)

Author: codeyard

src/app/core/header/header.component.html

@@ -10,9 +10,10 @@ <h1>RiverSurf</h1>
     <div class="header__search">
         <form>
             <input aria-label="Search jams or riders"
-                   placeholder="Search jams or riders"
+                   [placeholder]="isMac ? 'Search jams or riders (Ctrl-Opt-i)' : 'Search jams or riders (Alt-i)'"
                    [matAutocomplete]="auto"
                    [formControl]="autocompleteCtrl"
+                   accessKey="i"
                    class="header__search__input">
             <mat-autocomplete class="header__search__results" #auto="matAutocomplete">
                 <mat-option *ngFor="let event of filteredResults.events" [value]="event.name" (onSelectionChange)="goToSurfEvent(event)">

src/app/core/header/header.component.ts

@@ -21,6 +21,8 @@ export class HeaderComponent {
     autocompleteCtrl = new FormControl();
     filteredResults: SearchResults = {events: [], riders: []};
 
+    isMac: boolean = navigator.platform.toLowerCase().indexOf('mac') >= 0;
+
     constructor(
         private searchService: SearchService,
         private router: Router,