Ajoutez des raccourcis clavier dans votre app Angular
Nous utilisons quotidiennement des raccourcis clavier (ctrl+s pour sauvegarder, Win+E pour ouvrir l’explorateur de fichiers, ….) et il est fort probable que les utilisateurs de votre application Angular les utilisent aussi. Dans cet article, nous allons créer une petite page dans laquelle nous intégrerons des raccourcis clavier. Commençons par créer notre app.
ng new demo-hotkeys
Pour avoir un résultat visuel agréable, ajoutons la librairie angular-material.
ng add @angular/material
Faisons simple, notre page contiendra 3 éléments :
- Un champ de texte dans lequel l’utilisateur encode le texte de son choix
- Un bouton « Sauvegarder »
- Un libellé qui affiche le texte de l’utilisateur lorsque ce dernier clique sur le bouton « Sauvegarder »
Créons donc notre page
ng g c demoPage
Ci-dessous le contenu HTML contenant nos 3 éléments
<mat-card class="demo-card">
<mat-card-header>
<mat-card-title>Demo Hotkeys</mat-card-title>
<mat-card-subtitle>Press alt+s to save, or alt+c to clear the textbox</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div>
<mat-form-field>
<mat-label>Your text</mat-label>
<input matInput placeholder="Enter your text" [(ngModel)]="inputText">
</mat-form-field>
</div>
<div>
<button mat-raised-button color="primary" (click)="save()"><i class="fas fa-save"></i> Sauvegarder</button>
</div>
<div>
<mat-list>
<mat-divider></mat-divider>
<mat-list-item class="small-text">Your saved text :</mat-list-item>
<mat-list-item>{{savedText}}</mat-list-item>
</mat-list>
</div>
</mat-card-content>
</mat-card>
Ainsi que le typescript associé.
import { Component } from '@angular/core';
@Component({
selector: 'app-demo-page',
templateUrl: './demo-page.component.html',
styleUrls: ['./demo-page.component.css']
})
export class DemoPageComponent {
inputText: string;
savedText: string;
constructor() { }
save() {
this.savedText = this.inputText;
this.inputText = '';
}
}
Nous allons à présent ajouter deux raccourcis clavier dans notre page :
- Alt+S : Cliquer sur le bouton « Save »
- Alt+C : Vider le contenu de la textbox
Pour ajouter ces deux raccourcis clavier, nous allons utiliser la librairie angular2-hotkeys.
npm install angular2-hotkeys
L’étape suivante est d’ajouter le module HotkeyModule dans notre fichier app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DemoPageComponent } from './demo-page/demo-page.component';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from './material-module';
import {HotkeyModule} from 'angular2-hotkeys';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
DemoPageComponent
],
imports: [
BrowserModule,
FormsModule,
MaterialModule,
BrowserAnimationsModule,
HotkeyModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Nous pouvons à présent injecter un service de type HotkeysService dans le constructeur de notre page. Ce service contient une méthode add(…) que nous utiliserons pour y définir nos raccourcis clavier et l’action à effectuer lorsque ces derniers sont utilisés.
import { Component } from '@angular/core';
import { HotkeysService, Hotkey } from 'angular2-hotkeys';
@Component({
selector: 'app-demo-page',
templateUrl: './demo-page.component.html',
styleUrls: ['./demo-page.component.css']
})
export class DemoPageComponent {
saveHotKey = 'alt+s';
clearHotKey = 'alt+c';
inputText: string;
savedText: string;
constructor(private _hotkeysService: HotkeysService) {
this.setHotKeys();
}
save() {
this.savedText = this.inputText;
this.inputText = '';
}
setHotKeys() {
this._hotkeysService.add(new Hotkey([this.saveHotKey, this.clearHotKey], (event: KeyboardEvent, combo: string): boolean => {
if (combo === this.saveHotKey) { this.save(); }
if (combo === this.clearHotKey) { this.inputText = ''; }
return false; // Prevent bubbling
}));
}
}
À présent que nous avons appris à intégrer nos raccourcis clavier dans notre application Angular, il ne vous reste plus qu’à vous amuser à en ajouter plein dans vos apps. Le code source utilisé pour cet article est disponible sur Github, n’hésitez pas à ajouter des stars sur ce dernier.
N’hésitez également pas à laisser vos questions ou votre avis en commentaire.
