CODEWITHSUNDEEP
jqueryasp.net-mvcangularasp.net-corewebpack
Efe Özazar
Efe Özazar

Reputation: 61

.Net Core Angular 2 Jquery decleration

I need to use a jquery function when my angular component is finished generating. I found the the usage below but i couldn't make it work.

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Http } from '@angular/http';
declare var $:any;
@Component({
    selector: 'nav-menu',
    template: require('./NavMenu.component.html')
})
export class NavMenuComponent implements AfterViewInit {
    @ViewChild('selectElem') el: ElementRef;
    public navigation: IMenuItem[];
    constructor(http: Http) {
        http.get('http://localhost:52908/api/PageManager/Get?applicationID=3')
            .subscribe(res => this.navigation = res.json().TransactionResult);
    }
    ngAfterViewInit(): any {
        $(this.el.nativeElement).find('nav ul').jarvismenu({
            accordion: true,
            speed: true,
            closedSign: '<em class="fa fa-plus-square-o"></em>',
            openedSign: '<em class="fa fa-minus-square-o"></em>'
        });
    }
}
export interface IMenuItem {
    PageID: number;
    Code: string;
    ApplicationID?: number;
    DisplayText: string;
    IconPath: string;
    ParentID?: number;
    IsFolder: boolean;
    IsDefault: boolean;
    ParentPage?: IMenuItem;
    ChildPages: IMenuItem[];
    BreadCrumb: string;
}

When I run this code I get an error that $ is not defined. I tried it with a number variable it gave the same error. Seems I cant declare anything outside class.

I am using webpack too btw.

Thanks.

Upvotes: 0

Views: 793

Answers (3)

Jeffrey Rosselle
Jeffrey Rosselle

Reputation: 765

Have you checked out the InjectionToken? Basically you'll inject the global jQuery instance in your application. Like seen in this post here: Use jQuery in Angular/Typescript without a type definition.

You'll create a jQueryService.ts which will define the global instance.

import { InjectionToken } from '@angular/core';

export const JQ_TOKEN = new InjectionToken('jQuery');

export function jQueryFactory() {
    return window['jQuery'];
}

export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

Once you have to you need to import it in your app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { JQ_TOKEN } from './jQuery.service';

declare let jQuery: Object;

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

So that you can use it inside your component.ts

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';

@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }

    somefunction() {
        this.$('...').doSomething();
    }
}

Upvotes: 0

Zasypin N.V.
Zasypin N.V.

Reputation: 234

When you use webpack you should tell it to set $ as global variable. I found this solution:

Install expose-loader. In your vendor file (or any other that you use for importing jquery) type

 import 'expose?jQuery!jquery';

In webpack plugins section use ProvidePlugin

new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' })

Upvotes: 1

Pardeep Jain
Pardeep Jain

Reputation: 86740

Just wrap the JQuery code into try catch may help you ,also declare before use of $.

ngAfterViewInit(): any {
        try{
         $(this.el.nativeElement).find('nav ul').jarvismenu({
            accordion: true,
            speed: true,
            closedSign: '<em class="fa fa-plus-square-o"></em>',
            openedSign: '<em class="fa fa-minus-square-o"></em>'
        });
       }
       catch(exception){}
    }

Upvotes: 3

Related Questions