I'm new to HTML and Angular 2. I'm currently trying to figure out how to call a function that's inside a Typescript file from an HTML file.
Stripped down, the Typescript file (home.ts) function looks like this:
getConfigurations(sensorName: string) {
console.log('Home:getConfigurations entered...');
return 'sensor1';
}
In my HTML file (home.html), I would like to call 'getConfigurations' with a string parameter (right now 'getConfigurations()' returns 'sensor1' since I'm still testing things out). So, in HTML, how do I go about calling my getConfigurations method with a parameter (for simplicity - how can I call the method inside a simple div panel)? (I already have the value I want to pass in a variable called 'selectedSensor').
To invoke this function in the html document, we have to create a simple button and using the onclick event attribute (which is an event handler) along with it, we can call the function by clicking on the button.
A JavaScript library has already been developed for this purpose - it's called TypeScript Compile, and it allows typescript to be embedded in HTML (as shown above.)
TypeScript supports the existing JavaScript function syntax for declaring and calling it within the program or the code snippet.
There is feature provided by angular is events binding by using you are able to call function whihc is exist in your ts file also you can use interpolation syntax of angular to call function like this : -
<button (click)='getConfigurations("parameter")'>Button Click</button>
or something like this
{{getConfigurations('parameter')}}
for more info related to event binding in angular2 see here
working example Working Plunker
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With