8

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

1
  • Where in that site the author binded a console.log to a click event in the template? Commented Apr 3, 2017 at 10:48

4 Answers 4

6

You should do it in the ts file

(click)="myFunc();"

and inside the .ts file

myFunc():any{
  console.log('clicked');
}
Sign up to request clarification or add additional context in comments.

3 Comments

I edited my answer based on your advise, thank you for your help!
At the end i found what it was (check my answer).... i feel so stupid! thank you for your help
its the samething posted above
4

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!

2 Comments

better to run with Development Tool and Disable cache while DevTool is open
I added some settings to the virtualhost at the end, i edited my answer
0

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>

3 Comments

I edited my answer based on your advise, thank you for your help!
try with only button html and comment all OnInit, service call and other code and then check, if work or not?
I posted an answer... it was really simple and i feel stupid... thanks for your help
0

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;

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.