jquery.ui's function is not executing in angular component's template

Question

I have the jquery-ui.js inside my angular's asset folder, I need to call the .accordion function from my component's template to wrap a <div id="accordion"> with the accordion functionalities but I can't get the script to be executed.

angular-cli.json:

angular-cli compile error

ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/assets/jquery-ui.css
Module not found: Error: Can't resolve './images/ui-icons_444444_256x240.png' in '/home/rr7/workspace/emtv2/src/assets'
resolve './images/ui-icons_444444_256x240.png' in '/home/rr7/workspace/emtv2/src/assets'
  using description file: /home/rr7/workspace/emtv2/package.json (relative path: ./src/assets)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /home/rr7/workspace/emtv2/package.json (relative path: ./src/assets)
    using description file: /home/rr7/workspace/emtv2/package.json (relative path: ./src/assets/images/ui-icons_444444_256x240.png)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png.js doesn't exist
      as directory
        /home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png doesn't exist
[/home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png]
[/home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png.ts]
[/home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png.js]
[/home/rr7/workspace/emtv2/src/assets/images/ui-icons_444444_256x240.png]
 @ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/assets/jquery-ui.css 7:25768-25815 7:25892-25939
 @ ./src/assets/jquery-ui.css

a.component.html

...
<div "id"="accordion">
...
</div>
..
<script>
$( "#accordion" ).accordion({
    collapsible: true
  });
</script>

Any help?

See here maybe? stackoverflow.com/questions/41861464/…

David
– David

2018-03-18 20:30:53 +00:00
Commented Mar 18, 2018 at 20:30 — David
– David, Commented Mar 18, 2018 at 20:30

David · Accepted Answer · 2018-03-18 18:56:17Z

0

Put it in your component's ngAfterViewInit method. Script tags in component templates are executed

component.ts

declare let $ :any;

ngAfterViewInit()
{
    $( "#accordion" ).accordion({
      collapsible: true
     });
}

Note: If you can avoid it, it's better not to use jquery with angular projects

edited Mar 18, 2018 at 18:56

answered Mar 18, 2018 at 18:17

David

34.6k13 gold badges90 silver badges124 bronze badges

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

8 Comments

Rafael Reyes Over a year ago

Following you comment I get this console's error: $(...).accordion is not a function

David Over a year ago

Did you include jquery-ui's js file in your .angular-cli.json?

Rafael Reyes Over a year ago

Yes, they are at the bottom of the corresponding array, please check the picture in my edit.

Vikas Over a year ago

try this import * as $ from 'jquery';

David Over a year ago

Did you restart ng serve after addign jquery ui in your angular-cli.json?

|

Collectives™ on Stack Overflow

jquery.ui's function is not executing in angular component's template

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related