Capture click event in Angular with Typescript?

Question

I need to convert the following jquery codes to typescript code.

Jquery

$(".room").click({
    console.log("clicked");
});

TypeScript

import { Component } from '@angular/core';
declare var $: any;

export class AppComponent {

}

Because it is not recomended to use jQuery inside angular project — Patryk Brejdak
– Patryk Brejdak, Commented Nov 28, 2017 at 8:38

Vinod Bhavnani · Accepted Answer · 2017-11-28 08:33:38Z

3

On your element that has room class in HTML you can do something like this in your component template:

For example if your element is a button:

<button class="room" #btn (click)="buttonClick()">Click Me!</button>

And then in your class:

import { Component } from '@angular/core';
declare var $: any;

export class AppComponent {
    buttonClick(){
        console.log("Button Clicked!");
    }
}

Hope this helps :)

answered Nov 28, 2017 at 8:33

Vinod Bhavnani

2,2431 gold badge17 silver badges19 bronze badges

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

2 Comments

sebu Over a year ago

Your answer is ok to me, but i do not want to wrap it in angular side. i need it globally of full page.

Vinod Bhavnani Over a year ago

It is not advisable to have events outside component scope. You have an option to do this on your appComponent, which is the parent most component. That will make it global.

Collectives™ on Stack Overflow

Capture click event in Angular with Typescript?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related