Search code examples
angularsemantic-ui

Semantic 2 Dropdown angular 2 not working

EDIT - 1 - implemented AfterViewInit in the class as per the suggestion.

I am trying to find the issue but am not able to. I have used a simple dropdown and have imported (I believe so) all the semantic configurations, but the dropdown wont work like it should. I think the css is getting applied but the animation isn't. I'm really confused, any help is greatly appreciated.

It gives error at 

 ngAfterViewInit(){
    $('.ui.dropdown').dropdown();
  }

Below are the details of the app.

Index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

<link rel="stylesheet" type="text/css" href="../semantic/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
<script src="../semantic/dist/semantic.min.js"></script>
<script src="../semantic/dist/components/dropdown.js"></script>

</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

Module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MaterialModule,MdButtonModule} from '@angular/material';
import 'hammerjs';
import { AppComponent } from './app.component';
import { ScripttableComponent } from './scripts/scripttable/scripttable.component';
import { ScriptsComponent } from './scripts/scripts.component';

@NgModule({
  declarations: [
    AppComponent,
    ScripttableComponent,
    ScriptsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule,
    MdButtonModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

import {$} from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'app works!';

  ngAfterViewInit(){
    $('.ui.dropdown').dropdown();
  }


}

app.component.html

   <select name="Program" id="program" class="ui search dropdown">
        <option value="">Program</option>
        <option value="eCQMs">eCQMs</option>
        <option value="Mips">Mips</option>
        <option value="Pqrs">Pqrs</option>
      </select>

- App folders -

enter image description here

Console-error

enter image description here

Solution

  • If you are looking for webpack configuration semantic ui with angular-cli you can try this:

    index.html

      <link rel="stylesheet" type="text/css" href="../semantic/dist/semantic.min.css">
</head>
<body>
  ...

    polyfills.ts

    import $ from 'jquery'
window['jQuery'] = $;

declare let require: any;

require("../semantic/dist/semantic.min.js");
require( "../semantic/dist/components/dropdown.js");

    app.component.ts

    import $ from 'jquery'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  ngAfterViewInit(){
    $('.ui.dropdown').dropdown();
  }
}