Semantic-UI Dropdown with Angular 4

Question

I'm currently trying to implement an Angular directive to manage Semantic UI dropdown. First, I use Angular (4.3.3), jQuery (3.2.1) and Semantic UI (2.2.13) via npm.

To integrate them, I have reconfigured the angular-cli.json in order to imports these libraries:

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

Declare the Semantic UI directive:

import {Directive, ElementRef, AfterViewInit} from "@angular/core";
import * as jQuery from "jquery";

@Directive({
  selector: "[sm-dropdown]"
})

export class SemanticDropdownDirective implements AfterViewInit {

  constructor(private dropdown: ElementRef) {}

  ngAfterViewInit(): void {
    jQuery(this.dropdown.nativeElement).dropdown();
  }
}

And give it a try:

<div class="ui selection dropdown" sm-dropdown>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div 
      class="item" 
      *ngFor="let item of [10, 20, 30, 50, 100]" 
      [attr.data-value]="item"
    >
      {{ item }}
    </div>
  </div>
</div>

The issue is it always ends up with:

ERROR TypeError: WEBPACK_IMPORTED_MODULE_1_jquery(...).dropdown is not a function

I notice that creating a dropdown in the browser console (after the error is thrown) works:

$('.dropdown').dropdown()

I have already google it and tried lot of alternatives but without success...

Any idea?

did you install typings for jQuery, perhaps it is messing up webpack build..? — Pankaj Parkar
– Pankaj Parkar, Commented Aug 13, 2017 at 7:46

Gaurav Srivastava · Accepted Answer · 2017-08-13 08:23:36Z

1

Try this:

import {Directive, ElementRef, AfterViewInit} from "@angular/core";
import * as $ from 'jquery';

declare var $: any;

@Directive({
  selector: "[sm-dropdown]"
})

export class SemanticDropdownDirective implements AfterViewInit {

  constructor(private dropdown: ElementRef) {}

  ngAfterViewInit(): void {
    $(this.dropdown.nativeElement).dropdown();
  }
}

Working Plunkar Link

edited Aug 13, 2017 at 8:23

answered Aug 13, 2017 at 7:42

Gaurav Srivastava

3,2323 gold badges20 silver badges37 bronze badges

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

5 Comments

egeloen Over a year ago

Thanks for your answer but I got the exact same error with your snippet. Since the component works if I trigger it from the browser console, it sounds like semantic is not loaded yet when the directive event is triggered...

Gaurav Srivastava Over a year ago

@can you share the snippet url it will be easier to debug the error

egeloen Over a year ago

What do you mean by sharing an url? A plnkr?

Gaurav Srivastava Over a year ago

i mean if you have created a plunkar or fiddle!

egeloen Over a year ago

Thanks for your time but the main difference in your plunkar is that you directly inject the semantic-ui js in the head of the page, can't it be handle by webpack?

egeloen · Accepted Answer · 2017-08-13 09:04:56Z

0

I just found my mistake, thanks to https://github.com/angular/angular-cli/issues/5944#issuecomment-299430703, you can't import and use script as the same time, so basically, I need to replace:

import * as jQuery from 'jquery';

by

declare var jQuery: any;

and everything is working so far :)

answered Aug 13, 2017 at 9:04

egeloen

5,8841 gold badge30 silver badges38 bronze badges

Collectives™ on Stack Overflow

Semantic-UI Dropdown with Angular 4

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related