Jquery not working in angular 4+ while using semanti-ui

Question

I am trying to implement semantic-ui dropdown in my angular project and I am getting an error when I click the dropdown. I have installed semantic-ui and jquery through npm and have included the scripts and styles in my angular-cli.

My html code:

<div class="ui selection dropdown field">
<input type="hidden" name="operator">
<i class="dropdown icon"></i>
<div class="default text">+</div>
<div class="menu">
  <div class="item" data-value="0">+</div>
  <div class="item" data-value="1">-</div>
  <div class="item" data-value="2">*</div>
  <div class="item" data-value="3">/</div>
</div>

my app.component:

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

import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    $('.ui.dropdown')
       .dropdown();
  }
}

My angular-cli :

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/semantic-ui/dist/semantic.min.css"
  ],
  "scripts": ["../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/semantic-ui/dist/semantic.min.js"
  ],

My error :

Please help

EDIT-1 : Package.json :

{
  "name": "wow-some.1",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
   },
  "private": true,
  "dependencies": {
     "@angular/animations": "^5.2.0",
     "@angular/common": "^5.2.0",
     "@angular/compiler": "^5.2.0",
     "@angular/core": "^5.2.0",
     "@angular/forms": "^5.2.0",
     "@angular/http": "^5.2.0",
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
     "bootstrap": "^4.0.0",
     "core-js": "^2.4.1",
     "jquery": "^3.3.1",
     "rxjs": "^5.5.6",
     "semantic-ui": "^2.2.13",
     "zone.js": "^0.8.19"
   },
    "devDependencies": {
    "@angular/cli": "1.6.5",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
    }
 }

I updated my answer. Check the working solution.

Gregor Doroschenko
– Gregor Doroschenko

2018-01-26 20:35:42 +00:00
Commented Jan 26, 2018 at 20:35 — Gregor Doroschenko
– Gregor Doroschenko, Commented Jan 26, 2018 at 20:35

Gregor Doroschenko · Accepted Answer · 2018-04-20 06:57:28Z

1

Step 1: install types for jquery

npm install @types/jquery --save

Step 2: change your jquery import

From this:

import * as $ from 'jquery';

to this:

import 'jquery';

Step 3: Change your dropdown() call

From this:

ngOnInit(): void {
    $('.ui.dropdown').dropdown();
  }

to this:

ngOnInit(): void {
    (<any>$('.ui.dropdown')).dropdown();
  }

You should have following imports for styles and scripts in your .angular-cli.json:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "../node_modules/semantic-ui/dist/semantic.min.css",
  "styles.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js",
  "../node_modules/semantic-ui/dist/semantic.min.js"
],

Now that should be work.

Here is github repository of my local working example. Check out and try.

edited Apr 20, 2018 at 6:57

answered Jan 26, 2018 at 10:36

Gregor Doroschenko

11.7k6 gold badges28 silver badges37 bronze badges

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

8 Comments

Gregor Doroschenko Over a year ago

Try to import jquery.js, bootstrap.min.js and semantic.min.js globaly in your index.html and not in angular-cli.json. See updated answer.

Gregor Doroschenko Over a year ago

Can you provide your example on plunkr or stackblitz? Otherwise I will try to build similar app later.

user8885733 Over a year ago

I am not familiar with them :/

user8885733 Over a year ago

Could you please help me whenever you get time

Gregor Doroschenko Over a year ago

ok, can you edit your question and add your package.json. That will ease debugging.

|

Sergio Correnti · Accepted Answer · 2018-01-28 13:28:40Z

0

Use declare key
declare var jquery:any;
declare var $ :any;

Take a look for this url. How to use jQuery Plugin with Angular 4?

edited Jan 28, 2018 at 13:28

answered Jan 28, 2018 at 13:23

Sergio Correnti

113 bronze badges

Comments

MarzoRiccardo · Accepted Answer · 2023-04-18 09:00:35Z

0

First Step: install types for jquery

npm install @types/jquery --save

Second Step: set file in script on angular.json file

    "scripts": [
  "node_modules/jquery/dist/jquery-3.6.4.min.js"
]

Third Step: insert types in tsconfic.app.json file

"types": ["jquery"]

Fourth Step: import in example.component.ts

import * as $ from 'jquery'

Fifth Step: Try using jquery example.component.html example.component.ts

edited Apr 18, 2023 at 9:00

answered Apr 18, 2023 at 8:49

MarzoRiccardo

213 bronze badges

Collectives™ on Stack Overflow

Jquery not working in angular 4+ while using semanti-ui

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related