Angular 2 (click) doesn't work

Question

I can't understand where is a bug here.

add.component.ts:

import { Component } from '@angular/core';

@Component({
    selector: 'counter',
    templateUrl: './add.component.html'
})
export class CounterComponent {
    public currentCount = 0;

    public incrementCounter() {
        this.currentCount++;
    }
}

add.component.html:

<h1>Counter</h1>

<p>This is a simple example of an Angular component.</p>

<p>Current count: <strong>{{ currentCount }}</strong></p>

<button (click)="incrementCounter()">Increment</button>

When I click on the button, nothing happens.

Are you getting any console errors? This should work as far as I can tell. — John Montgomery
– John Montgomery, Commented Aug 7, 2017 at 15:46
Works as expected, here is a plunk: plnkr.co/edit/0eGfLSzZjhr9a6vtDhdC — FAISAL
– FAISAL, Commented Aug 7, 2017 at 15:48
Official documentation working sample embed.plnkr.co/?show=preview — Jameel Moideen
– Jameel Moideen, Commented Aug 7, 2017 at 15:54

Kim Kern · Accepted Answer · 2017-08-07 15:45:44Z

1

I have tested it in this plunker and it does work as expected. Apparently, something is wrong with your setup. What does the console say? (In your browser, press F12 and check for errors.)

Only difference is I used an inline template:

template: `<h1>Counter</h1>
<p>This is a simple example of an Angular component.</p>
<p>Current count: <strong>{{ currentCount }}</strong></p>
<button (click)="incrementCounter()">Increment</button>`
})

answered Aug 7, 2017 at 15:45

Kim Kern

61.1k20 gold badges221 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

D. Malakhov Over a year ago

Thank you. The problem was in the wrong sequence of importing modules

Collectives™ on Stack Overflow

Angular 2 (click) doesn't work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related