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
JS code: document. getElementById('mat-checkbox-1-input'). click();
Events are handled in Angular using the following special syntax. Bind the target event name within parentheses on the left of an equal sign, and event handler method or statement on the right. Above, (click) binds the button click event and onShow() statement calls the onShow() method of a component.
the Angular 2 onClick Event The onclick event triggers an event or function when a user clicks on a component or an element. The define() statement executes the component's define() method, and (click) binds the button click event.
What is the type of event in Angular? Angular includes $event that contains the information about an event. The type of $event depends on the target event, e.g., if the target event is a native DOM element event, then it is an object.
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!
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