Today I’m going to show how to pass event data to the code behind from the view in NativeScript and modify the widget
Here’s what I am going to show you today
Note: My example will show how to do this using a button but it can be done with any UI widget.
Set Up the View
Inside of your component.html
file add the following:
<StackLayout>
<Button text="Tap me" class="btn btn-primary" (tap)="onButtonTap($event)"></Button>
</StackLayout>
You may have seen this around and wonder what is $event?
To put it simply, it is an event
, in this case the event is a tap
event.
Set Up the Tap Method
Now we need to set up the onButtonTap()
method in our component.ts
file.
You might have seen $event
passed to the code behind method like so onButtonTap(args)
but since this isn’t typed, you won’t get any intellisense help.
Let’s set up our onButtonTap()
method like this:
onButtonTap(args: EventData): void {
// We'll fill this out next
}
Note: Add this import to the top of your component.ts
file:
import { EventData } from "tns-core-modules/ui/page/page";
Now let’s fill out that method and update the button from the component.ts
file
First, we need to get a reference to the button, lets take a look at args
which is typed as EventData
This means it has 2 properies on it:
- eventName - string which is the name of the event
- object - Observable object
We can use that object
property to get a reference to the button in the view.
Update your onButtonTap()
method to look like this:
onButtonTap(args: EventData): void {
const button = <Button>args.object;
}
Note: Add this import to the top of your component.ts
file:
import { Button } from "tns-core-modules/ui/button";
Now if you type button.
you will see a big list of properties and methods you can call on that Button
Let’s change the background color to red and update its text after tapping on the button by adding the following line:
onButtonTap(args: EventData): void {
const button = <Button>args.object;
//Add These
button.backgroundColor = "red";
button.text = "You tapped me!";
}
Now when the app launches it will be a blue button, but after tapping the button will change to red.
Before Tapping
After Tapping
Hope this helps you out on your app!
See you next time! :)
Comments