how to change button after press angularjs

In this weblog mail service, You learn How to add a button click event and on Clicking submit button, How to go value from input with an example.

Angular Button ClickEvent binding

In whatsoever web application, the user clicks the push for one of 2 reasons: to submit the form or to navigate from one page to another.

Y'all should handle some logic for course submission or navigate to some other page when the push 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 lawmaking to handle this DOM consequence.

Then, How a button click works in the Angular application? What is Angular upshot binding? In Angular application, displaying button code is placed in HTML template folio i.e view.

The trigger event is placed in the typescript component form. So user effect information will be passed from view to component class. This is chosen Athwart Event binding

This mail service covers the post-obit examples with a detailed explanation

Angular Button Click event example
Go input value on button click event

angular button onclick function case

Allow's add changes in the Angular component.

In Html template component- app.component.html:

component template HTML file Created with an HTML input push
Added click effect to a button with event binding syntax i.due east bracket() symbol
the outcome name is the proper name of the function placed inside the bracket.
This office is called when the button is clicked.
Next, displayed the condition using angular ii-way binding that passes the information from/to view to the component.
Information displayed using either ngModel or interpolation - {{}} syntax.
Used displayed interpolation syntax to display data

                          <div style=              "text-marshal:center"              >              <h1>              Angular Button Click Outcome Example              </h1>              <button  (click)=              "clickEvent()"              >              Click Me</push button>              <h2>{{msg}}</h2>              </div>

Issue treatment in Component

In component grade,

You have to define the method for treatment click events. This method is called always when a user has clicked a push.
defined msg variable of type string.
On clicking push 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=              'Push is Clicked';              return              this.msg;   } }

Output:

How to get Input text value on button click outcome example

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

In Html template,

Added click event to the button and provided name the function within 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>        Athwart Button Click Upshot Example     </h1>     <button              (click)="clickEvent()" >     Click Me</push button>     <input              blazon              =              "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/cadre';  @Component({   selector:              'app-root',   templateUrl:              './app.component.html',   styleUrls:              ['./app.component.css'] })              consign              course              AppComponent {   msg:cord;   msg1:string;    constructor() {     }     clickEvent(){              this.msg1=              this.msg   } }