{

Angular Button Click Event examples - Binding Event


Angular  Example  an anchor bind tag click event without a href

In this blog post, You learn How to add a button click event and on Clicking submit button, How to get value from input with an example.

Angular Button ClickEvent binding

In any web application, the user clicks the button for one of two reasons: to submit the form or to navigate from one page to another.

You should handle some logic for form submission or navigate to another page when the button is clicked.

Every HTML control like button, input type has an event that does fire during the user action. When the button is clicked, DOM Event onClick event is triggered, You have to handle code to handle this DOM event.

Then, How a button click works in the Angular application? What is Angular event binding? In Angular application, displaying button code is placed in HTML template page i.e 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

This post covers the following examples with a detailed explanation

  • Angular Button Click event example
  • Get input value on button click event

angular button onclick function example

Let’s add changes in the Angular component.

In Html template component- app.component.html:

  • component template HTML file Created with an HTML input button
  • Added click event to a button with event binding syntax i.e bracket() symbol
  • the event name is the name of the function placed inside the bracket.
  • This function is called when the button is clicked.
  • Next, displayed the status using angular two-way binding that passes the data from/to view to the component.
  • Data displayed using either ngModel or interpolation - {{}} syntax.
  • Used displayed interpolation syntax to display data
<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 events. This method is called always when a user has clicked a button.
  • 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:

Angular Button Click Event example

How to get Input text value on button click event example

This example explains about display input value on the clicking button.

In Html template,

  • Added click event to the button and provided name the function inside it
  • Input is defined with the ngModel attribute which binds the value from view to component or component to view
  • Displayed the value typed in the text box using interpolation syntax
<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 updates the value to a new variable which displayed in HTML using interpolation syntax {{}}

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

Conclusion

You learned two things. Firstly, the button with click event example in Angular, Secondly, how button event binding works in Angular application.

To summarize, It is easy to handle the click events in the Angular button.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.