семантический пользовательский интерфейс боковой панели не работает в угловой

Question

Я пытался создать боковую панель, используя семантический интерфейс в угловых.но это не работает, когда я нажимаю кнопку, я получаю сообщение об ошибке в консоли, что функция .sidebar не найдена в jquery.это мой компонент html:

<div class="ui sidebar inverted vertical menu">
 <a class="item">
  1
 </a>
 <a class="item">
  2
 </a>
 <a class="item">
  3
 </a>
</div>
<div class="pusher">
 <button class="ui button toggle">toggle</button>
</div>

Код моего компонента:

import { Component, OnInit } from '@angular/core';
import * as $ from '../../../node_modules/jquery';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.less']
})
export class EditorComponent implements OnInit {

  constructor() { }

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

Я получаю эту ошибку в консоли.

ERROR TypeError: _node_modules_jquery__WEBPACK_IMPORTED_MODULE_2__(...).sidebar is not a function
at HTMLButtonElement.<anonymous> (editor.component.ts:17)
at HTMLButtonElement.dispatch (jquery.js:5183)
at HTMLButtonElement.elemData.handle (jquery.js:4991)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:16147)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
at invokeTask (zone.js:1744)
at HTMLButtonElement.globalZoneAwareCallback (zone.js:1770)