Saturday, October 13, 2018

Angular Button Click Event examples - Binding Event in Angular 4|5|6|7

In this blog post, We are going to learn how button click works, get value from input on button click

Angular Event binding - Button Click 

Usually, In any angular applications, User clicks on the button for form submission or navigation from one page to other using clicking button. Internally when the button is clicked, You need to handle some logic for form submission or navigate to some other page.
When the button is clicked, DOM EVEnt Click event is triggered, You have to handle code to handle this DOM event.
Button display logic is placed in HTML template page ie view. The trigger event is placed in the typescript component class. So user event information will be passed from view to component class. This is called Angular Event binding

Examples

We will see below examples
  • Angular Button Click event example
  • Get input value on button click event

Angular Button Click Event Example

Added below changes in app.component.html ie component template HTML file Created an HTML input button Added click event to a button, Here used bracket() symbol. the name placed inside is bracket is an event This will be called when the button is clicked by user Next is displayed the status using angular two-way binding which passes the data from/to view to the component. Data displayed using either ngModel or interpolation - {{}} approaches. Here data displayed using interpolation
<div style="text-align:center">
    <h1>
       Angular Button Click Event Example
    </h1>
    <button  (click)="clickEvent()" >
    Click Me</button>
    <h2>{{msg}}</h2>
 </div>
 
Event handling in Component In component class, You have to define the method for handling click event. This method si always called when user is clicked button In the component class defined msg variable of type string, On clicking button event, msg variable is updated with status "button is clicked" app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  msg:string;
  constructor() { 

   }

   clickEvent(){
    this.msg='Button is Clicked';
    return this.msg;
  }
}
 
Output is
Angular Button Click Event example

get Input text value on button click event example 

This example explains about display input value on button click button click input binding examples In HTML component, Input is defined with ngModel attribute which binds the value from view to component or component to view Displayed the value typed in the text box using interpolation

<div style="text-align:center">
    <h1>
       Angular Button Click Event Example
    </h1>
    <button  (click)="clickEvent()" >
    Click Me</button>
    <input type="text"  [(ngModel)]="msg">
    <h2>{{msg}}</h2>

 </div>
 
Typescript Component class on click event typed value to update to a new variable which displayed in HTML using interpolation

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  msg:string;
  msg1:string;

  constructor() { 

   }

   clickEvent(){
    this.msg1=this.msg
  }
}
 

Related article


EmoticonEmoticon