Oudstand Oudstand - 11 days ago 8
jQuery Question

Angular 2 - jQuery

I'm using a template for my Angular application which uses jQuery. The needed files are included like this in my index.html:

...
<script src="assets/js/jquery.core.js"></script>
<script src="assets/js/jquery.app.js"></script>
...


The problem is, that no jQuery seems to be working. How can I fix it?

EDIT

I am using TypeScript and have some code in my AppComponent.html like this:

<!-- Button mobile view to collapse sidebar menu -->
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class>
<div class="pull-left">
<button class="button-menu-mobile open-left waves-effect waves-light">
<i class="md md-menu"></i>
</button>
<span class="clearfix"></span>
</div>
</div>
<!--/.nav-collapse -->
</div>
</div>


<script src="assets/js/jquery.app.js"></script>
should be used to collapse the sidebar. It is not my code, it's from a theme I am using. I can't figure out, why the button does not hide the sidebar.
I thought all I have to do is to use the correct class and import the
jquery.app.js
included in the theme.

EDIT 2

appcomponent.html:

<!-- Begin page -->
<div id="wrapper">

<!-- Top Bar Start -->
<div class="topbar" *ngIf="showNavigation()">

<!-- LOGO -->
<div class="topbar-left">
<div class="text-center">
<!-- Image Logo here -->
<a href="index.html" class="logo">
<i class="icon-c-logo"> <img src="../smartrocks_icon.png" height="42"/> </i>
<span><img src="../smartrocks_schriftzug.png" height="35"/></span>
</a>
</div>
</div>

<!-- Button mobile view to collapse sidebar menu -->
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class>
<div class="pull-left">
<button class="button-menu-mobile open-left waves-effect waves-light">
<i class="md md-menu"></i>
</button>
<span class="clearfix"></span>
</div>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Top Bar End -->


<!-- ========== Left Sidebar Start ========== -->

<div class="left side-menu" *ngIf="showNavigation()">
<div class="sidebar-inner slimscrollleft">
<!--- Divider -->
<div id="sidebar-menu">
<ul>
<li class="text-muted menu-title">Navigation</li>
<li><a routerLink="/guides">Umfragen</a></li>
<li><a routerLink="/guide/{{getGuideId()}}/tutorials">Tutorials</a></li>
<li><a routerLink="/guide/{{getGuideId()}}/questions">Fragen</a></li>
<li><a routerLink="/guide/{{getGuideId()}}/categories">Kategorien</a></li>
<li><a routerLink="/guide/{{getGuideId()}}/products">Produkte</a></li>
<li><a routerLink="/guide/{{getGuideId()}}/attributes">Attribute</a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="slimScrollBar"
style="background: rgb(152, 166, 173); width: 5px; position: absolute; top: -305px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 2204px; visibility: visible;"></div>
<div class="slimScrollRail"
style="width: 5px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
</div>
<!-- Left Sidebar End -->


<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div [class.content-page]="showNavigation()">
<!-- Start content -->
<div class="content">
<div class ="container">

<router-outlet></router-outlet>

</div> <!-- container -->

</div> <!-- content -->

<footer class="footer text-right" *ngIf="showNavigation()">
© 2016. All rights reserved.
</footer>

</div>


<!-- ============================================================== -->
<!-- End Right content here -->
<!-- ============================================================== -->
</div>


appcomponent.ts:

import {Component} from "@angular/core";
import {GlobalsService} from "./globals/globals.service";
import {Router} from "@angular/router";

@Component({
selector: 'app',
templateUrl: './app/app.component.html'
})

export class AppComponent {

constructor(private router: Router, private globals: GlobalsService) {

}

showNavigation():boolean {
let location = this.router.url;
let regexp = new RegExp('^/guide/[0-9]+$');
return !(location == '/login' || location == '/guides' || location == '/guide' || regexp.test(location));
}

getGuideId(): number{
return this.globals.getCurrentGuideId();
}
}


The function
showNavigation()
is not responsable to collapse the sidebar. On the views
/login
,
/guide
and
/guide/id
should never be a sidebar.

Answer

Your problem is you need to add a boolean to keep track if the menu is collapsed or not.

In my case I am using ng2-bootstrap so all I have to do is use a boolean to keep track if the collapse directive.

In my html

<button type="button" class="building btn btn-primary btn-info btn-default btn-lg btn-block responsive-width" (click)="isCollapsed1 = !isCollapsed1">SEC. 402. FINDINGS AND PURPOSES.</button>
<div [collapse]="isCollapsed1" class="card card-block card-header"></div>

In my component that uses the html template with the html above in it.

public isCollapsed:boolean = true;