Semantic UI jquery functions doesn't work on Angular2 application

Question

Even thought jquery is not limited in angular2 application, and you can truly use it in some cases such as needing to including some classy FrontEnd frameworks whose functionality relies on jquery. In my problem I am including Semantic UI for my angular2 application. Im not following the Angular Integration since it is on development stage and for some reason you can run jquery in angular2 application so i guess you can go with the traditional installation and integration.

However when implementing a sticky ui, I encounter some functionality errors of semantic ui. e.g.

$('.ui.sticky').sticky();

Typescript wont allow the sticky() function yielding this error:

Property 'sticky' does not exist on type 'JQuery<HTMLElement>'.

I installed jquery by this step

$ npm install jquery --save
$ npm install @types/jquery --save-dev

I included both the semantic ui and jquery dependencies on my angular-cli styles and scripts sections like this:

    "styles": [
        "styles.css",
        "assets/default/momentum.css",
        "assets/semantic-ui/dist/semantic.min.css",
        "assets/semantic-ui/dist/components/icon.css",
        "assets/semantic-ui/dist/components/card.min.css",
        "assets/semantic-ui/dist/components/grid.min.css",
        "assets/semantic-ui/dist/components/sticky.min.css"
    ],
    "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "assets/semantic-ui/dist/semantic.min.js",
        "assets/semantic-ui/dist/components/sticky.min.js"
    ],

and call it in the angular application component

import * as $ from 'jquery'

It was no use at all. Here is what i did in every tries. Component in different approach and tries with error:

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

import * as $ from 'jquery'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'Momentum';

  constructor() { }

  ngAfterViewInit(): void {
     // The .sticky() has an error wrap: 
     // Property 'sticky' does not exist on type 'JQuery<HTMLElement>'.
     $('#header-panel').sticky()
  }

}

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

declare var $:any

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'Momentum';

  constructor() { }

  ngAfterViewInit(): void {
    // I got a run time error: ERROR ReferenceError: $ is not defined
    $('#header-panel').sticky()
  }

}

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

import * as $ from 'jquery' 

interface JQuery{
  sticky(): void
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'Momentum';

  constructor() { }

  ngAfterViewInit(): void {
    // Still the .sticky() has an error wrap: 
    // Property 'sticky' does not exist on type 'JQuery<HTMLElement>'.
    $('#header-panel').sticky()
  }

}

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

import * as $ from 'jquery'

declare global {
  interface JQuery {
    sticky(): void
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Momentum';

  constructor() { }

  ngAfterViewInit(): void {
    // On run time got this error: 
    // ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).sticky is not a function
    $('#header-panel').sticky()
  }

}

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

import * as $ from 'jquery'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Momentum';

  constructor() { }

  ngAfterViewInit(): void {
    // No matter what still got an
    // ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).sticky is not a function
    (<any> $('#header-panel')).sticky()
    ($('#header-panel') as any).sticky()
  }

}

It doesn't really work, It drives me nut shall i give up? or there is still some solution?

declare var $:any ,$('something').something() ...gives you error ?? — Vikhyath Maiya
– Vikhyath Maiya, Commented Aug 31, 2017 at 6:57
declare var $:any gives me `ReferenceError: $ is not defined`` — Shift 'n Tab
– Shift 'n Tab, Commented Aug 31, 2017 at 6:58
just completed developing a website with angular and semantic,declare var $:any worked for me — Vikhyath Maiya
– Vikhyath Maiya, Commented Aug 31, 2017 at 6:59

Saad · Accepted Answer · 2017-08-31 08:29:39Z

Well ,since you've tried including the dependencies way and didn't worked out for you , i suggest using this simple trick like the following :

[WORKING DEMO] (Scroll down to see sticky behavior)

1- Simply include Semantic-UI in index.html file :

    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.js"></script>
<!--or -->
    <script src="relaive_path_to/semantic.min.js"></script>

2- Simply include jQuery in index.html file (same way as semantic-ui):

3- In your.component.ts file add this:declare var $: any; next to the importing section , then initialize the component ) in ngAfterViewInit(){} like the following :

component.ts

import {Component,OnInit} from 'angular2/core';
declare var $: any;
@Component({
    selector: 'my-app',
    templateUrl: 'demo.html',
})
export class AppComponent implements OnInit { 

    ngAfterViewInit(){

          $('.ui.sticky').sticky();
    }
}

Vikhyath Maiya · Accepted Answer · 2017-08-31 08:58:59Z

From the discussion we had in chats,i realized that there are two problems in the way you are trying to make it work 1.Including both jquery and jquery types(not sure why this doesnt work) 2.The way you are including the semantic ui files in your project Follow following steps to make it work

1.ng new newProjectname
2.npm install jquery
download semantic from https://github.com/Semantic-Org/Semantic-UI-CSS/archive/master.zip and extract the folder into your project
.Give the reference to semantic ui and jquery in angular cli as

"scripts": [ "../node_modules/jquery/dist/jquery.min.js", "your-ui-folder-path/semantic.min.js" ], "styles": [ "styles.css", "your-ui-folder-path/semantic.min.css" ],
Now you can use jquery in the project as

declare var $:any;
And refer to functions as

$('id or class').dropdown();//any function

Hope this helps.If this doesnt work,please refer to the answer suggested by Saad

Eugene · Accepted Answer · 2018-09-20 07:36:35Z

0

I had the same problem. There is an issue about it on GitHub, where people propose to just include jQuery through tag script in an HTML file. This approach was not good for my situation. I've included jQuery in my app.module.ts and made it available globally through window object.

import * as jQuery from 'jquery';
(<any> window)['jQuery'] = jQuery;

It's not a good approach of work with imported libraries, but if semantic ui works by such way, that's what can we only do.

answered Sep 20, 2018 at 7:36

Eugene

9831 gold badge9 silver badges26 bronze badges

Collectives™ on Stack Overflow

Semantic UI jquery functions doesn't work on Angular2 application

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related