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
You should do it in the ts file
(click)="myFunc();"
and inside the .ts file
myFunc():any{
console.log('clicked');
}
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!
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>
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.