use jquery ui widget in angular template

Question

I have an angular project and I have not found nice looking checkboxes in any of the css libraries that come close to jquery ui checkboxes and was wanting to use these in my angular project. Using jquery you can style checkboxes once the page loads using following code...

$(document).ready(function(){
    $(":checkbox").checkboxradio();
});

providing you have the jquery libraries imported using.. something like this in the index.html file

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

although i have installed jquery with npm and there is probably another way to do this. Then in my component I have declared a variable between the imports and called the jquery function after initialisation ..

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

declare var $:any;

@Component({
  selector: 'app-test',
  template: `<label for="checkbox1">checkbox 1</label>
            <input type="checkbox" name="checkbox1" id="checkbox1">`
})
export class CrimeTableComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    $(document).ready(function(){
      $( "#checkbox1" ).checkboxradio({
        icon: false
      });
    });
  }

I keep getting Uncaught TypeError: $(...).checkboxradio is not a function

Is this possible or am I doing something wrong?

The respective post might help you https://stackoverflow.com/questions/41861464/how-to-use-jquery-ui-with-angular-2 check for `Georgi Arnaudov` answer — Sivakumar Tadisetti, Aug 06 '18 at 12:56
This does not help.. Georgi's answer states to re install jquery and jquery-ui but I am importing in index.html page so don't need to do this. — jonesy, Aug 06 '18 at 13:53

score 0 · Answer 1 · answered Aug 07 '18 at 16:13

Solved this reading around similar issues on SO (I may have been a bit hasty posting this question), went down the route of installing jquery and jquery-ui via npm. Following this answer walakad's answer I needed to insall the jquery-ui-dist via npm, then ensure everything imported by referencing in my angular-cli.json file..

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/jquery-ui-dist/jquery-ui.min.js",
        ...etc..
],

Also (and this is the part that stopped me marking this as a duplicate as was different to any other answer) added the following to the styles section in angular-cli.json..

"styles": [
        "../node_modules/jquery-ui-dist/jquery-ui.css",
        ...etc..
],

This was important to get the jquery-ui widget which I was using to work (checkboxradio).

Then the same as above where you declare your jquery variable and just call the jquery, no need to have document ready, this is covered by angular AfterViewInit...

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

declare var $:any;

@Component({
  selector: 'app-test',
  template: `<label for="checkbox1">checkbox 1</label>
            <input type="checkbox" name="checkbox1" id="checkbox1">`
})
export class CrimeTableComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    $("#checkbox1").checkboxradio({
        icon: false
      });
  }
}

Now it works :)

use jquery ui widget in angular template

1 Answers1