Angular 2 - jQuery

Question

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.jsincluded 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.

first check console. Are you getting 404 resource not found error ? — Ankush Jain, Nov 28 '16 at 10:46
I'm not using express and I don't get errors in the console. — Oudstand, Nov 28 '16 at 10:53
Yes. I just want to use the jQuery of the used theme and not programm it my self. Does this make a difference? — Oudstand, Nov 28 '16 at 10:58

wuno · Accepted Answer · 2016-11-29T20:25:04.217

1

Make sure the Jquery file is added after the view is initialized.

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;

edited Nov 29 '16 at 20:25

answered Nov 28 '16 at 10:48

wuno

9,547
19
96
180

I am Using Typescript, but `typings install dt~jquery --global --save` didn't help. – Oudstand Nov 28 '16 at 11:39
I am using TypeScript. The server runs with Symfony. In the Angular html files I am using the classes of the theme. – Oudstand Nov 29 '16 at 08:00
The jQuery files are stored in the folder of my Angular application and not on the server side. – Oudstand Nov 29 '16 at 08:22
I have a folder /assets with the css, images, jquery... The css files of this folder are working. – Oudstand Nov 29 '16 at 08:39
I am not sure if jQuery is not loaded, but to collapse the sidebar does not work. Should I still post the ? – Oudstand Nov 29 '16 at 08:45
Okay, thank you for your help. I will try to use a boolean. `showNavigation` does not collapse the navigation. – Oudstand Nov 29 '16 at 09:05
Can I maybe write you somewhere else? So I don't spam the comments in this question? – Oudstand Nov 29 '16 at 09:08

score 0 · Answer 2 · answered Nov 29 '16 at 11:54

I could fix it. The problem was that the jQuery files were included before the view was initialized. This solved the problem:

ngAfterViewInit() {
        this.loadScript("../assets/js/jquery.slimscroll.js");
        this.loadScript("../assets/js/jquery.core.js");
        this.loadScript("../assets/js/jquery.app.js");
}

public loadScript(script: string) {
        let node = document.createElement('script');
        node.src = script;
        node.type = 'text/javascript';
        node.async = true;
        node.charset = 'utf-8';
        document.getElementsByTagName('head')[0].appendChild(node);
}

Angular 2 - jQuery

2 Answers2