CODEWITHSUNDEEP
jqueryangularsemantic-ui
egeloen
egeloen

Reputation: 5864

Semantic-UI Dropdown with Angular 4

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?

Upvotes: 2

Views: 2859

Answers (2)

egeloen
egeloen

Reputation: 5864

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 :)

Upvotes: 0

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

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

Upvotes: 1

Related Questions