Semantic UI - jquery in typescript

Question

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

Vikhyath Maiya · Accepted Answer · 2018-01-13 13:16:14Z

2

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

1.ng new newProjectname
2.npm install jquery
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
.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" ],
Now you can use jquery in the project as

declare var $:any;
And refer to functions as

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

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

answered Jan 13, 2018 at 13:16

Vikhyath Maiya

3,2123 gold badges39 silver badges72 bronze badges

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

1 Comment

Bartas Over a year ago

Vikhyath thank you for help. This work really well :)

Josh Blotter · Accepted Answer · 2020-01-29 16:36:17Z

0

If you follow this link: https://www.npmjs.com/package/@types/semantic-ui and run the npm install, your project should be able to recognize the types of the semantic ui functions. ex .popup() or .dropdown()

(I think this is a better solution than the declare var $: any)

answered Jan 29, 2020 at 16:36

Josh Blotter

1

1 Comment

JerodG Over a year ago

Perhaps you could elaborate on why you think this is a better solution; including specifics would be helpful.

Collectives™ on Stack Overflow

Semantic UI - jquery in typescript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related