jquery click event not being triggered in production mode angular5

Question

I am using jquery this plugin in my angular 5 app . I have nested accordion menu on left side. When I run app in development mode the menu works fine it opens and close as accordion menu as expected , but when I run the app in production mode by running command

ng build --prod

then click event triggered only once it opens the menu and then never being triggered (menu remains open ) . I have used angular cli to include menu js script in my angular app. what could be the solution of this problem. Thanks in advance here is component ts file

import { Component, Inject, OnInit, AfterViewInit } from '@angular/core';
import * as $ from 'jquery'
declare var ace :any;
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html'
})

export class SidebarComponent {
currentDate:Date;
constructor( @Inject('Window') window: Window) { }
ngOnInit() {
$("#sidebar-collapse").on("click", function () {
  $('body').toggleClass('menumin');
});
this.currentDate=new Date();
 }
 ngAfterViewInit() {

ace.demo.init();

}
}

here is html file

 <div id="sidebar" class="sidebar responsive ace-save-state"> <ul class="nav nav-list"> <li class="productname"> <a class="mjms_nav"> <span class="menu-text"> MJMS </span> <em> {{currentDate | date:'MMM-dd-yyyy'}}</em> </a> <b class="arrow"></b> </li> <li> <a [routerLink]="['/home/dashboard']"> <i class="menu-icon fa fa-tachometer"></i> <span class="menu-text"> Dashboard </span> </a> <b class="arrow"></b> </li> <li routerLinkActive="open"> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-graduation-cap"></i> <span class="menu-text"> Education Management </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class="open"> <a href="#0" class="dropdown-toggle"> <i class="menu-icon fa fa-caret-right"></i> Admission Information <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li routerLinkActive="active"> <a [routerLink]="['/education/admission/applicants/new']"> <i class="menu-icon fa fa-caret-right"></i> New Applications </a> <b class="arrow"></b> </li> <li routerLinkActive="active"> <a [routerLink]="['/education/admission/confirmed']"> <i class="menu-icon fa fa-caret-right"></i> Confirmed Applicant </a> <b class="arrow"></b> </li> <!-- <li class=""> <a href="entry_test_list.html"> <i class="menu-icon fa fa-caret-right"></i> Entry Test List </a> <b class="arrow"></b> </li> <li class=""> <a href="final_batch.html"> <i class="menu-icon fa fa-caret-right"></i> Final Batch </a> <b class="arrow"></b> </li> --> </ul> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Class Activity </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Results </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Co-Curricular activities </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Class Scheduling /Time table </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Course Upload </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Attendance </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Examination and results </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Hostel management </a> <b class="arrow"></b> </li> </ul> </li> <li routerLinkActive="open"> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-pie-chart"></i> <span class="menu-text"> Financial Management </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Payroll </a> <b class="arrow"></b> </li> <li routerLinkActive="open"> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa fa-caret-right"></i> <span class="menu-text"> Manage Fee </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li routerLinkActive="active"> <a [routerLink]="['/finance/fee/group']"> <i class="menu-icon fa fa-caret-right"></i> Fee Group </a> <b class="arrow"></b> </li> <li routerLinkActive="active"> <a [routerLink]="['/finance/fee/category']"> <i class="menu-icon fa fa-caret-right"></i> Fee Category </a> <b class="arrow"></b> </li> <li routerLinkActive="active"> <a [routerLink]="['/finance/fee/structure']"> <i class="menu-icon fa fa-caret-right"></i> Fee Structure </a> <b class="arrow"></b> </li> </ul> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> General Ledger </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Balance Sheet </a> <b class="arrow"></b> </li> <li class=""> <a > <i class="menu-icon fa fa-caret-right"></i> Income Statement </a> <b class="arrow"></b> </li> </ul> </li> <li class=""> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-cube"></i> <span class="menu-text"> Assets Management </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Inventory </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Assets Assignment </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Assets Tracking </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Procurement </a> <b class="arrow"></b> </li> </ul> </li> <li class=""> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-th"></i> <span class="menu-text"> HR Management </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a href="HR_emp_personalInfo.html"> <i class="menu-icon fa fa-caret-right"></i> Employee Profile </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Attendance </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Leaves </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Benefit & incentives </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Promotion Management </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Performance management </a> <b class="arrow"></b> </li> </ul> </li> <li class="#"> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-envelope"></i> <span class="menu-text"> Communication Management </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Notice Board </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Notification </a> <b class="arrow"></b> </li> </ul> </li> <li class="#"> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-th-large"></i> <span class="menu-text"> Administrative Management </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a href="Dashboard-Admin.html"> <i class="menu-icon fa fa-caret-right"></i> Directors Dashboard </a> <b class="arrow"></b> </li> <li class=""> <a href="Dashboard-teacher.html"> <i class="menu-icon fa fa-caret-right"></i> Teachers Dashboard </a> <b class="arrow"></b> </li> <li class=""> <a href="Dashboard-student.html"> <i class="menu-icon fa fa-caret-right"></i> Students Dashboard </a> <b class="arrow"></b> </li> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Parents Dashboard </a> <b class="arrow"></b> </li> </ul> </li> <li class="#"> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-check"></i> <span class="menu-text"> User Rights Management </span> <b class="arrow fa fa-angle-down"></b> </a> <b class="arrow"></b> <ul class="submenu"> <li class=""> <a href="#0"> <i class="menu-icon fa fa-caret-right"></i> Portal Admin </a> <b class="arrow"></b> </li> </ul> </li> <li class=""> <a href="#" class="dropdown-toggle"> <i class="menu-icon fa fa-power-off"></i> <span class="menu-text"> Logout </span> </a> <b class="arrow"></b> </li> </ul> <!-- /.nav-list --> <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse"> <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i> </div> </div> 

Answer 1

You should use binding click event in template

in html

<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse" (click)="collapseSideBar()">

and in component

collapseSideBar() {
  $('body').toggleClass('menumin');
}