Warning: A non-numeric value encountered in /home2/lqtdr7wbo/public_html/meet-expert.org/wp-includes/functions.php on line 74
How Event Bind with Component in Angular 2 | Meet Expert

How Event Bind with Component in Angular 2

Event Bind with Component in Angular

DOM element have events that event can be handle through the component methods…

With DOM Event we update the component ….

Event Binding in Angular


DOM elements  have events  like keystroke / Mouse Movements / clicks etc…..

We can bind Event  with Two syntax

i)  Option

          (  )     =   ”  “

      Branthisis   =  Binding Expressions

Event Binding Expression

Just put event name in the branthisis and  in the expression put method name  like this …


              ( click ) =  ” showList( ) “


Here is click is the event name and showList( ) Method in the component …

ii)  Option

Another way is prefix   ” on- “  prefix with Element Event …. Like this


On-click = “ showList(  ) “


Event Name Call Method

let say we have DOM element button and we can bind Event as following Screen

<button (click) = ” ” > Show List < / button >

with prefix

<button on-click=” ” > Show List </button>


button Event Binding

lets Bind this button with Event handler or Method in the component ….


You Can see the Following Screenshot a method ” showListOfStudents( ) ” ….

we user click on the button the “showListOfStudents( ) ” method will call …


Button click event

in mathod “showListOfStudents( )” where  string message ” I Get All Students List “  going to log in the browser console..


see the following screen shot when i   ‘clicked on the Button message is appear in the Console ”


brower Console Message Appear

DOM element Event use to communicate with the component method.

Angular 2 Property Binding Understanding


Be the first to comment

Leave a Reply

Your email address will not be published.


downloadfilmterbaru.xyz bigoporn.club bok3p.site sablonpontianak.com