Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 click event not working

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

like image 870
Daniel Avatar asked Apr 03 '17 10:04

Daniel


People also ask

How do I programmatically trigger click event in angular 6?

JS code: document. getElementById('mat-checkbox-1-input'). click();

How does angular handle click event?

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.

Which is the standard onClick event in angular?

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 type is $event angular?

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.


2 Answers

You should do it in the ts file

(click)="myFunc();"

and inside the .ts file

myFunc():any{
  console.log('clicked');
}
like image 103
Sajeetharan Avatar answered Nov 02 '22 05:11

Sajeetharan


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!

like image 35
Daniel Avatar answered Nov 02 '22 06:11

Daniel