React TypeScript Parent - Child components example

In the previous post we saw a React class component written in TypeScript, the component had state support and event handling (button click event and text change event). The component has a textbox and a button, we handle the onChange event of the textbox set the value in the name state property. We capture the onClick event of the button and set a greeting text in the message state object, this message is displayed in the screen

In this post we will alter this component a bit so that the greeting message is passed as a property from the parent component.

ng-change directive with Textbox

Change events are used to handle user interactions with controls like TextBox, Dropdown list, checkboxes etc. In this post we shall see on how to handle change events associated with the textbox control.

Change event in these controls can be handled by creating a handler function and associating the event to the function using the ng-change directive. The following is the syntax for the ng-change directive and the handler function.

ng-change="HandleChange()

In the following example the textbox control has as ng-change directive which binds the events from the textbox controller to the function HandleChange(), the letters entered by the user are immediately handled by the HandleChange() function and the letters are displayed in the label.

Change Events

AngularJS provides a set of events to handle user interactions in the UI layer, AngularJS events can be broadly classified into the following 3 categories.

Change Events – To handle triggered from controls like TextBox, Dropdown, checkbox etc.
Keyboard Events – To handle events triggered by user typing keys in the keyboard.
Mouse Events – To handle mouse events like mouse_up, mouse_down, etc

In this post we shall see on the various possible change events provided by AngularJS.