0

I am trying to use this datetime picker within an angular 2.0 component.

Here is my index.html

<head>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
</head>

Here is my component file

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

@Component({
    selector : 'datepicker-display',
    template: `
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `
})

export class DatePickerDisplayComponent implement OnInit {

    ngOnInit(): void {
        $('#datetimepicker1').datetimepicker();  // don't want to initialize DP until component is initialized
    }
}

When I go to compile the typescript, I get the error 

app/components/datepicker-display.component.ts(28,9): error TS2304: Cannot find name '$'.

This makes sense to me, because I haven't explictitly declared "$" to exist in this component file. However, I am now unsure how to use JQuery inside one of my components. If I remember correctly, what I am trying to do in NG1 would have worked... I could have just included the jquery source in my index.html and used "$" normally.

What is the proper way to do this in NG2? For a bit of background, I am using gradle to build my project, with the node/npm plugin.

Zack
  • 13,454
  • 24
  • 75
  • 113
  • Possible duplicate of [How to use jQuery with Angular2?](http://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2) – eko Dec 29 '16 at 17:45
  • I gave this a shot, but "declare var $:JQueryStatic;" threw an error, saying it couldn't find "JQueryStatic" – Zack Dec 29 '16 at 17:56
  • What version of typings are you using? – randominstanceOfLivingThing Dec 29 '16 at 17:56
  • In my package.json, I've got it listed as "1.8.7" – Zack Dec 29 '16 at 17:57
  • Did you install the d.ts file? – eko Dec 29 '16 at 17:57
  • What is this and how do you do it? – Zack Dec 29 '16 at 17:58
  • It is written in that answer.. – eko Dec 29 '16 at 17:59
  • Install typescript jquery bindings following the thread @http://stackoverflow.com/questions/37409912/how-to-install-jquery-using-typings – randominstanceOfLivingThing Dec 29 '16 at 17:59
  • Don't use jQuery.. Its not nessesary. if you are trying to grab elements you can use constructor(myElement: ElementRef) { ... } (it can get all the elements from your template) – ed-tester Dec 29 '16 at 18:00
  • Is there a way to do this from within the gradle build script? I'm going to be deploying this app, and it won't do me any good to just do a global install on my own machine. – Zack Dec 29 '16 at 18:00
  • @ed-tester, is there a better datetimepicker that you know of without jquery? – Zack Dec 29 '16 at 18:01
  • @Zack https://github.com/ng2-ui/ng2-datetime-picker – ed-tester Dec 29 '16 at 18:02
  • @ed-tester, I feel like this is only delaying any issues though... is Jquery really that deprecated within the development community? I feel like a lot of things still depend on it, and then I'm right back to this post. – Zack Dec 29 '16 at 18:04
  • Jquery is powerful and will be around for a long time. The cool thing is, angular 2, provides all the tools you need to do just about anything, so you don't need to intermix 2 frameworks together. I am not dissing Jquery by any means, its just not needed with angular 2 – ed-tester Dec 29 '16 at 18:07

0 Answers0