Search code examples
jquerysemantic-uiangular5

Semantic UI - jquery in typescript

I have a problem beacuase I instal semantic ui and try create sidebar nut I've got this message: [ts] Property 'sidebar' does not exist on type 'JQuery'. I use Angular 5

app.component.ts:

import { Component } from '@angular/core';
import * as $ from 'jquery';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';

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

  arr: Array<any> = [1,2,3,4,5,6,7,8];


  ngOnInit() {
    $('.ui.sidebar').sidebar('toggle');
  }
}

index.html: 

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">

</head>
<body>
  <app-root></app-root>



  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
</body>
</html>

app.module.ts: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgSemanticModule } from "ng-semantic";
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgSemanticModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

jQuery is working but for example sidebar is not. Thanks for every help :)

Solution

  • I normally use the following method to use semantic with angular.

    1. 1.ng new newProjectname
    2. 2.npm install jquery

    3. download semantic from https://github.com/Semantic-Org/Semantic-UI-CSS/archive/master.zip and extract the folder into your project. If you want semantic-ui for angular, please refer their website for the same

    4. .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" ],

    5. Now you can use jquery in the project as

      declare var $:any;

    6. And refer to functions as

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

    Hope this helps.If this doesnt work. Hope this helps