Angular2 click event not working

6
votes

I'm facing an issue with an angular2 click event, it's not launching a simple console.log or an alert.

Here I post my component template:

<div class="col-md-4">
<div *ngFor="let phone of phones">
{{phone.text}}
</div>
<input class="form-control" type="text" [(ngModel)]="phone"/>
<button class="btn btn-primary" (click)="console.log('clicked');" type="button">Call</button>
</div>

When I click the button, there is nothing in the console.

I tried to execute a component function, with no luck as well.

I'm doing it the same way than here: http://learnangular2.com/events/

Do you guys need more files? I just don't understand why this is not working

Thank you so much, Daniel

Edit:

Ok so now I'm doing it like this:

Template:

<div class="col-md-4">
<div *ngFor="let phone of phones">
    {{phone.text}}
</div>
<input class="form-control" type="text" [(ngModel)]="phone"/>
<button class="btn btn-primary" (click)="callPhone();" type="button">Call</button>
</div>

And my ts file component:

import {Component, OnInit, OnDestroy} from '@angular/core';
import {FormControl} from '@angular/forms';
import {CallService} from '../call.service';

@Component({
moduleId: module.id,
selector: 'app-call-formular',
templateUrl: './call-formular.component.html',
styleUrls: ['./call-formular.component.css'],
providers: [CallService]
})
export class CallFormularComponent implements OnInit, OnDestroy {

phones = [];
connection;
phone;

constructor(private callService: CallService) {
}

callPhone(): any {
    console.log('callPhone executed.');
}

ngOnInit() {
    this.connection = this.callService.getPhones().subscribe(phone =>                         
{
        this.phones.push(phone);
    });
}

ngOnDestroy() {
    this.connection.unsubscribe();
}

}

And still not launching my click event

4
node.jsangularevents
Where in that site the author binded a console.log to a click event in the template? – eko
You have to expose console object in your component context, then only you can access it.. native browser object would not be available inside template events directly.. – Pankaj Parkar
I edited my answer, thank you all! – DaRo

4 Answers

4
votes

You should do it in the ts file

(click)="myFunc();"

and inside the .ts file

myFunc():any{
  console.log('clicked');
}
4
votes

So yeah, at the end the "solution" was really stupid...

I've used what @Sajeetharan Told me, but the "problem" was that chrome was keeping the cache somehow, even flushing them with Ctr + shift + R.

At some point i deleted the cache from chrome and it worked.

Thank you all!

Edit:

So i explain here how I did it:

I just added some configurations to the virtualhost, so i don't need to use the incognitus mode of chrome, and what I added is:

# DISABLE ALL CACHING WHILE DEVELOPING
<FilesMatch "\.(html|htm|js|css|json)$">
FileETag None

<IfModule mod_headers.c>
  Header unset ETag
  Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
  Header set Pragma "no-cache"
  Header set Note "CACHING IS DISABLED ON LOCALHOST"
  Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</IfModule>

Again, thanks to all!

0
votes

Add your logic in backend/typescript:

 CallClick(): any {
    console.log('clicked');
}

And at html side:

<button class="btn btn-primary" (click)="CallClick()" type="button">Call</button>
0
votes

Once in my angular app, I was stuck where from a DIV, was unable to call function in TS against click and mouse down events.
Then following simple CSS change fixed my issue.

Add to the corresponding DIV CSS:

pointer-events: all;