How does (click)= works?

Ionic Framework ionic-v3
1

First of all, sorry if this is a silly question.

I’m playing with Ionic 2 for a while, and don’t have any previous contact with TypeScript. I realized that TypeScript/Ionic functions are triggered with a (click)=“doSomething()” atributte, in contrast with onclick=“doSomething()” used in vanilla JavaScript.
I tried to seach about this, but Google simply ignores the parentheses when I search for “(click)”, so no sucess.

If I try to call the TypeScript function with Firebug / Chrome Inspect console, JavaScript embedded in <script>, or even a onclick= atributte, it fails with a “Uncaught ReferenceError: doSomething is not defined” (same way as if the function did not exist).

How does this works, and how I can call a TypeScript via console?

2

I’m not sure I’m getting what you intended to happen but if it is showing “doSomething is not defined” then it means that you did not declare the doSomething() function in your typescript (.ts) file.

Make sure in your typescript file that you reference the correct html with the (click)=“doSomething” element.

home.ts

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
}

If you mean printing messages on the console you can simply call

console.log(“Sample Message”);

inside the function in your typescript file.

3

Right like ionize said, in Angular2 you have 2 different bindings:

  1. Property-Binding: [myProp]="myValue"
  2. Event-Binding: (eventName)="myEventCallback($event)"

With property-binding you can set existing props like:

<div [style.backgroundColor]="bgColor"></div>

or you can add own properties mostly for @Inputs of another component

<my-component [shouldKnowAbout]="thisValues"></my-component>

@Component({
  selector: 'my-component'
})
class MyComponent {
  @Input() shouldKnowAbout; // Know your component has a custom Property/Input-Binding
  ...
}

You have noticed the [] brackets? --> this is an indicator that you want to pass a class member as value and a non static value. If you only want to set the value only once, you do not need the brackets!

In this way you can pass data down your component tree.

=============================================================================

But sometimes you do not only want to pass data to a child component, often you need to inform your parent component about something happened --> this is similar to listen to an event. But step by step.

The easy case --> a simple event listener like click, submit, … --> you can use all the native events

<button (click)="myCallback($event)">Click me</button>

If you want to listen, to an event --> you need the curly-brackets ;).

Now, our component from above get’s an output to share data with the parent:

<my-component [shouldKnowAbout]="thisValues" (myOutputEvent)="handleEvent($event)"></my-component>

@Component({
  selector: 'my-component'
})
class MyComponent {
  @Input() shouldKnowAbout; // Know your component has a custom Property/Input-Binding
  @Output() myOutputEvent = new EventEmitter()<string> // event-emitter of type string
  ...
}

So in some cases you can trigger your myOutputEvent with a string value:

myOutputEvent.emit('Hello');

You have noticed the $event --> it is a predefined thing in Angular >=2 (you can see that with prefix $).
$event holds the event-data. for native events it is simple the whole event-object you know from JavaScript.

For our custom event $event holds your event data --> the string “Hello”

============================================================================

To your problem:
But you are using typescript --> so you can type your classes, variabels, class members, parameters, return values of a function. So the ts compiler checks on build-time, if everything is working --> but only the ts files.

But in your case --> your are using a function in the template, which is not defined in your class --> BOOOooooom Error, because you want to call a function, that is not existing.