Concepto de evento onClick en Angular 2

  2. HowTo
  3. Howtos de Angular
  4. Concepto de evento onClick en Angular 2
Muhammad Adil 23 mayo 2022
Angular Angular onClick
  1. el evento Angular 2 onClick
  2. Pasos simples para crear un evento onClick en Angular 2
  3. Ejemplo de evento onClick de Angular 2
Concepto de evento onClick en Angular 2

El marco Angular 2 es un marco estructural para construir el front-end de una aplicación.

Angular 2 tiene muchas características nuevas que lo hacen más fácil de usar que su predecesor.

Una característica es la capacidad de llamar a una función con la ayuda de un evento onClick en Angular 2.

el evento Angular 2 onClick

El sistema de eventos Angular 2 se puede usar para manejar diferentes tipos de eventos, como clics del mouse, pulsaciones del teclado y gestos táctiles.

El evento onclick activa un evento o función cuando un usuario hace clic en un componente o elemento.

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

La instrucción define() ejecuta el método define() del componente, y (click) vincula el evento de clic del botón.

Pasos simples para crear un evento onClick en Angular 2

Necesitamos hacer los siguientes pasos.

  • Crear una plantilla HTML para la aplicación Angular.
  • Añadir un button a la plantilla.
  • Defina click event handler en la directiva del botón.
  • Manejar el evento de clic en el controlador del módulo de aplicación y actualizar los datos del view-model en consecuencia cuando el usuario haga clic en el botón.
  • Implementar una actualización de los datos del modelo de vista para actualizar la vista cuando el usuario hace clic en el botón.
  • Agregar una directiva para actualizar un campo de entrada cuando el usuario hace clic en un botón.

Ejemplo de evento onClick de Angular 2

Primero, escribamos el Código 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>

El atributo ngif define la entrada, que vincula el valor de la vista al componente o del componente a la vista.

Avancemos hacia el código 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() {
  }
}

Finalmente, escribamos el código TypeScript para 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 { }

Haga clic aquí para comprobar el código de trabajo completo.

Autor: 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