Third-party library in Angular 2 Typescript
Question
I'm trying to use a pickadate.js libary in my project.
What I've tried so far...
ngAfterViewInit() {
$('.datepicker').pickadate({
format: 'mm/dd/yyyy',
formatSubmit: 'mm/dd/yyyy',
hiddenName: true
});
}
Gets the following error:
$(...).pickadate is not a function
I really don't want to write a td.ts for anything in my index.html:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Angular2 App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- inject:css -->
<link rel="stylesheet" href="/node_modules/pickadate/lib/themes/default.css">
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/app/assets/main.css">
<!-- endinject -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"> </script>
<!-- inject:js -->
<script src="/node_modules/pickadate/lib/legacy.js"></script>
<script src="/node_modules/pickadate/lib/picker.time.js"></script>
<script src="/node_modules/pickadate/lib/picker.date.js"></script>
<script src="/node_modules/pickadate/lib/picker.js"></script>
<!-- endinject -->
</head>
<body>
...
2 answers
solution1
2 2016-02-01 15:18:29
You can't add the library script tag inside a components template. <script> tags in Angular2 templates are dropped.
solution2
2 ACCPTED 2016-02-01 15:24:33
Make sure you have included the TSD (right click, save as...) for jQuery into your App Component:
/// <reference path="../path/to/jquery.d.ts" />
Then also download this typing and import as so:
/// <reference path="../path/to/pickadate.d.ts" />
Lastly, make sure jQuery and PickADate are imported into your HTML. If everything is right, your code should work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.