Concept d'événement onClick dans Angular 2

  2. HowTo
  3. Howtos Angular
  4. Concept d'événement onClick dans Angular …
Muhammad Adil 30 janvier 2023
Angular Angular onClick
  1. l’événement onClick Angular 2
  2. Étapes simples pour créer un événement onClick dans Angular 2
  3. Exemple d’événement Angular 2 onClick
Concept d'événement onClick dans Angular 2

Le framework Angular 2 est un framework structurel permettant de construire le front-end d’une application.

Angular 2 a de nombreuses nouvelles fonctionnalités qui le rendent plus convivial que son prédécesseur.

L’une des fonctionnalités est la possibilité d’appeler une fonction à l’aide d’un événement onClick dans Angular 2.

l’événement onClick Angular 2

Le système d’événements Angular 2 peut être utilisé pour gérer différents types d’événements, tels que les clics de souris, les pressions sur le clavier et les gestes tactiles.

L’événement onclick déclenche un événement ou une fonction lorsqu’un utilisateur clique sur un composant ou un élément.

<button (click)="define()">Define</button>

L’instruction define() exécute la méthode define() du composant et (click) lie l’événement de clic sur le bouton.

Étapes simples pour créer un événement onClick dans Angular 2

Nous devons effectuer les étapes suivantes.

  • Créer un modèle HTML pour l’application Angular.
  • Ajouter un bouton au modèle.
  • Définissez click event handler dans la directive du bouton.
  • Gérer l’événement de clic dans le contrôleur du module d’application et mettre à jour les données du view-model en conséquence lorsque l’utilisateur clique sur le bouton.
  • Implémenter une mise à jour des données du modèle de vue pour rafraîchir la vue lorsque l’utilisateur clique sur le bouton.
  • Ajout d’une directive pour mettre à jour un champ de saisie lorsque l’utilisateur clique sur un bouton.

Exemple d’événement Angular 2 onClick

Commençons par écrire le code Html.

<button class="clickBtn" (click)="show=!show" >Click me</button>

 <div class="Demo" *ngIf="show"> 

  <h3>you can see how things are changing by pressing Clickme button</h3>

<br/>

<h3>This is how we use the concept of OnCLick Event in Angular 2</h3>

L’attribut ngif définit l’entrée, qui lie la valeur de la vue au composant ou du composant à la vue.

Passons au code Typescript.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-click',
  templateUrl: './fm.component.html',
  styleUrls: ['./fm.component.css']
})
export class MyFmComponent implements OnInit {
  registerForm: FormGroup;
  submitted:false;
  constructor() { }
  ngOnInit() {
  }
}

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

@Component({
  selector: 'app',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})

export class MyComponent implements OnInit {
show = false;
  constructor() { }
  ngOnInit() {
  }
}

Enfin, écrivons le code TypeScript pour app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { MyFmComponent } from './clickme/fm.component';
import { MyComponent } from './Event/my.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, MyComponent, MyFmComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Cliquez ici pour vérifier le code de travail complet.

Auteur: Muhammad Adil
Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook