Concept of onClick Event in Angular 2

  2. HowTo
  3. Angular Howtos
  4. Concept of onClick Event in Angular 2
Muhammad Adil Feb 23, 2022
Angular Angular onClick
  1. the Angular 2 onClick Event
  2. Simple Steps to Create onClick Event in Angular 2
  3. Example of Angular 2 onClick Event
Concept of onClick Event in Angular 2

The Angular 2 framework is a structural framework for building the front end of an application.

Angular 2 has many new features that make it more user-friendly than its predecessor.

One feature is the ability to call a function with the help of an onClick event in Angular 2.

the Angular 2 onClick Event

The Angular 2 event system can be used to handle different types of events, such as mouse clicks, keyboard presses, and touch gestures.

The onclick event triggers an event or function when a user clicks on a component or an element.

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

The define() statement executes the component’s define() method, and (click) binds the button click event.

Simple Steps to Create onClick Event in Angular 2

We need to do the following steps.

  • Create an HTML template for the Angular application.
  • Add a button to the template.
  • Define click event handler in the button’s directive.
  • Handle click event in the controller of application module and update view-model data accordingly when the user clicks on the button.
  • Implement an update of view-model data to refresh the view when the user clicks on the button.
  • Add a directive for updating an input field when the user clicks on a button.

Example of Angular 2 onClick Event

First, let’s write the Html Code.

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

The ngif attribute defines input, which ties the value from view to component or component to view.

Let’s move towards the Typescript code.

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() {
  }
}

Finally, let’s write the typescript code for 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 { }

Click here to check the complete working code.

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