Liaison de données Partie 2 — Liaison d'événements

La liaison de données peut être déroutante lorsque vous démarrez dans Angular. Décomposons-le ! Cet article couvre la liaison d'événements, qui est l'une des méthodes de liaison de données à sens unique.

Il s'agit du deuxième article de la liaison de données dans la série Angular. Si ce n'est pas le cas, vous pouvez consulter le post d'interpolation ici. Dans cet article, nous verrons comment effectuer la liaison d'événements dans Angular.

Avant de commencer

Cet article convient à tous les niveaux de développeurs frontaux qui utilisent Angular. supposé.

Voici quelques prérequis que vous devriez avoir pour suivre la démonstration de cet article avec Angular 12 :

• Visual Studio Code comme environnement de développement intégré
• Node version 11.0 installée sur votre machine
• Node Package Manager version 6.7 (il est généralement livré avec l'installation de Node)
• Angular CLI version 8.0 ou supérieure
• La dernière version d'Angular (version 12)

// exécuter la commande dans un terminal
ng version

Confirmez que vous utilisez la version 12, et mettez à jour vers la 12 si ce n'est pas le cas. ]Événements dans Angular

L'une des raisons pour lesquelles les frameworks de développement frontend comme Angular sont si populaires est l'interactivité que vous pouvez obtenir en utilisant des fonctionnalités faciles à utiliser. L'une de ces fonctionnalités est la liaison d'événements.

Lorsque vous avez une application, il est très important que vous pensiez aux interactions initiées par l'utilisateur. Les interactions initiées par l'utilisateur sont essentiellement ce qui se passe lorsqu'un utilisateur exécute un événement. Ces événements peuvent aller du clic sur un bouton ou sur une partie du DOM à la saisie de données dans un formulaire ou au survol d'un bouton.

Event Binding

Angular vous permet de gérer au mieux ces interactions initiées par l'utilisateur. Avec Angular, vous pouvez rechercher un événement spécifique, puis lier ou déclencher des actions spécifiques qui devraient se produire lorsque ces événements sont détectés. C'est toute l'idée de la liaison d'événements et il s'agit d'un processus de liaison de données unidirectionnel de la vue au composant. Assistant dans VS Code et montrez comment configurer la liaison d'événements à quelques exemples d'événements.

Ouvrez votre application VS Code et accédez à la palette de commandes (tapez Command + Shift + P sur Mac ou Ctrl + Shift + P sur PC) pour ouvrir l'assistant Kendo UI. Si vous n'avez pas encore installé l'assistant d'interface utilisateur Kendo, accédez à l'onglet Extensions, recherchez l'assistant de modèle d'interface utilisateur Kendo et installez-le. Redémarrez l'application VS Code, puis revenez à la palette de commandes pour ouvrir l'assistant d'interface utilisateur Kendo.

Choisissez Angular, puis choisissez vierge avec 1 page et cliquez sur "Suivant".  » title= »wizard-page »/>

Choisissez CSS par défaut comme style et cliquez sur « Créer ». Une fois l'opération terminée, cliquez sur « Ouvrir un nouveau projet ». Ouvrez le terminal et téléchargez toutes les dépendances Node avec cette commande :

npm install

Après cela, vous pouvez exécuter l'application sur le serveur de développement avec cette commande :

ng serve

L'application devrait ressembler à ceci si vous visitez localhost:4200 dans votre navigateur.

Regardons maintenant quelques événements et comment nous pouvons les lier à nos interactions choisies dans notre application.

Événements clavier

Il existe de nombreux événements clavier. Certains d'entre eux sont keyup, keydown et keypress, qui se produisent tous lorsque vous appuyez sur une touche de votre clavier. Keydown fait référence à la dépression sur la presse. Keyup fait référence à ce moment précis où vous relâchez une touche après avoir appuyé. Keypress fait référence à la presse elle-même. Créons un modal lors de l'appui sur une touche, puis enregistrons quelques chaînes sur les touches et les touches enfoncées. div class="content">
<app-header></ app-header>
<router-outlet>
<input (keypress)="pressFunction ()">
</routeur-outlet>

</div>
<div[19659039]class="footer">
<app-footer></app- pied de page>
</div>

Vous pouvez voir le champ de saisie que nous avons introduit dans la vue et ce que nous avons fait, c'est dire à Angular que, chaque fois qu'une touche est enfoncée dans ce champ de saisie, la fonction appelée "appuyez sur la fonction" doit s'exécuter. Pour définir la fonction de presse, accédez au fichier app.component.ts et définissez la fonction comme ceci :

import { Component } from '@angular/core ';
@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
pressFunction([19659041]){
    alerte('Vous venez d'appuyer sur une touche')
   }
}

Maintenant, nous avons configuré la fonction pour faire apparaître un modal qui vous indique que vous avez appuyé sur une touche.

Keyup and Keydown[19659004]Comme nous l'avons vu précédemment, lorsque vous cliquez sur n'importe quelle touche du clavier, le moment où vous appuyez sur la touche peut être enregistré en tant que touche enfoncée et le moment exact où vous relâchez la touche peut être enregistré en tant que touche. Considérez-les comme le cycle de vie des boutons du clavier. Définissons maintenant les journaux sur la console lorsque les touches sont enfoncées pour le keyup et keydown.

<div class="content"[19659041]>
    <app-header></app-header>
    <router-outlet>
        <h3>
            Entrée pour appuyer sur une touche
        </h3>
        <input (touche)="pressFunction()"[19659041]> <br>
        <h3>
            Entrée pour la touche haut
        </h3>
        <input (keyup)="upFunction()"[19659039](keydown)="downFunction()"> <br>
    </routeur-sortie>
    
</div>
<div class="footer">[19659043][app-footer></app-footer>
</div>

Dans le fichier composant, ajoutez les fonctions ci-dessous :

upFunction(){
    console.log('Vous venez de relâcher la touche sur laquelle vous avez appuyé')
  }
  downFunction(){
    console.log('Vous venez d'appuyer sur un bouton du clavier')
  }

Si vous enregistrez les fichiers et regardez votre navigateur, vous devriez voir que la touche enfoncée est déclenchée avant la touche, comme vous vous en doutez.

Click Events

La liaison d'événement fonctionne sur chaque type d'événement DOM, alors testons-la sur les événements de clic.

Ajoutez ce bouton au modèle :

<bouton (click)="clickFunction()">Nouveau bouton</bouton>[19659181]

Dans le fichier du composant, mettez-le à jour avec la fonction clic ci-dessous :

import { Component } from '@angular/core';
@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
pressFunction([19659041]){
    alert('Vous venez d'appuyer sur une touche')
  }
  upFunction(){
    console.log('Vous venez de relâcher la touche sur laquelle vous avez appuyé')
  }
  downFunction(){
    console.log('Vous venez d'appuyer sur un bouton du clavier')
  }
clickFunction(){[19659090]alerte('Vous venez de cliquer sur un bouton')
  }
}

Si vous enregistrez le fichier, vous devriez voir l'alerte s'afficher lorsque vous cliquez sur le bouton.

Conclusion

Nous avons vu les bases de la liaison d'événements dans Angular – pourquoi la liaison d'événements est importante pour concevoir des solutions interactives pour vos clients. Nous avons vu quelques événements et comment configurer facilement la liaison d'événements. Assurez-vous de rester à l'écoute car nous avons plus de messages sur la liaison de données dans Angular sur le blog. Bon piratage !