(click) event not working in HTML template

Question

The (click) event is not working in my component.

HTML:

<button (click)="onClick">Click</button>

Below is the method in my component class.

onClick(): void { console.log('Button Clicked'); }

Saurabh Agrawal · Accepted Answer · 2018-04-24 05:49:23Z

4

onClick should be a function

Try this

<button (click)="onClick()">Click</button>

Here is the working example

https://stackblitz.com/edit/angular-oudvby?file=app/app.component.ts

edited Apr 24, 2018 at 5:49

answered Apr 24, 2018 at 5:30

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

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

5 Comments

Jith Over a year ago

Thanks for the answer, I have added the function body in the question. That is defined in my component class.

Saurabh Agrawal Over a year ago

@Jith try that link

Jith Over a year ago

any thing I need to import in my component class to make it work?

Saurabh Agrawal Over a year ago

no you don't just check the example I have provided. you just need to replace onClick with onClick().

Aluan Haddad Over a year ago

Which isn't a function :)

Pardeep Jain · Accepted Answer · 2018-04-24 05:41:15Z

3

try this

<button (click)="onClick()">Click</button>

or

<button on-click="onClick()">Click</button>

working example

edited Apr 24, 2018 at 5:41

answered Apr 24, 2018 at 5:31

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

1 Comment

Jith Over a year ago

Thanks for the answer. I have same button declaration in my template file.

Collectives™ on Stack Overflow

(click) event not working in HTML template

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related