Is there any equivalent for $(".class").click(); in Typescript?

Question

I am using date range picker in angular.

<button type="button" class="btn btn-danger daterange-ranges">
<i class="icon-calendar22 position-left"></i> <span></span> 
<b class="caret"></b>
</button>

When I click this, I get the dropdown to select the date-range with an Apply Button which has a class "applyBtn".

In JQuery there is an option $(".class").click(); to get onclick function. I can't write (click)="getdateRange()". Is there any equivalent for $(".class").click(); in typescript?

I want something like,

$(".applyBtn").click(function(){ alert("The button was clicked."); });

If using angular then you can use Renderer2.listen. Reference https://angular.io/api/core/Renderer2#listen — Suryan, Oct 21 '18 at 09:42
Hi Hemchandra, TypeScript doesn't supply any particular framework of its own. You can continue to use jQuery in your TypeScript application if you would like to (or any other framework). See https://stackoverflow.com/questions/32050645/how-to-use-jquery-with-typescript — Fenton, Oct 21 '18 at 09:58

Artyom Amiryan · Answer 1 · 2018-10-21T10:53:06.743

2

you can use pure javascript and do this

    document.querySelector('.applyBtn').addEventListener('click', () => {
       alert("The button was clicked.");
    });

it will do the same thing as $(".applyBtn").click(); in JQuery

edited Oct 21 '18 at 10:53

answered Oct 21 '18 at 10:41

Artyom Amiryan

2,846
1
10
22

But what you wrote is not a function. I want something like, `$(".applyBtn").click(function(){ alert("The button was clicked."); });` – Hemanth Oct 21 '18 at 10:49
2

what's wrong here why you can't do it like so `document.querySelector('.applyBtn').addEventListener('click', (event) => { alert("The button was clicked."); });` – Artyom Amiryan Oct 21 '18 at 10:50
you can add this in your ngOnInit or in another lifecycle hook – Artyom Amiryan Oct 21 '18 at 10:52

Sergey · Answer 2 · 2018-10-21T11:03:48.190

As I see in tags you are using an Angular. Using jQuery isn't a good idea in Angular since it has its own great tools.

To make a click handler you need to do following

<anyTag (click)="clickHandler($event)"></anyTag>

Then in your component paste next:

public clickHandler(event) {
  //do whatever you want
}

If you want to know what's passed with $event you are welcome to angular.io API

P.S. If you want to re-use it you need to make it an extra component like date-picker.component.ts and paste it there. Then you could access form's value by passing it into created component via [date]="date" and retrieve it in component @Input() date;.

Also you can emit values to a parent via

@Output() emitter = new EventEmitter();

public emitValue(): void {
  this.emitter.emit(value);
}

And get emitted value in the parent component <app-picker (emitter)="handleEmit($event)></app-picker>

parent-component.ts

public handleEmit(event) {
  //do something
}

Date-picker is not about Angular. Angular is just a way of implementation. But here you go https://material.angular.io/components/datepicker/overview — Sergey, Oct 21 '18 at 11:16

Is there any equivalent for $(".class").click(); in Typescript?

2 Answers2