Comments

20 responses to “Add and Run Jquery in Angular 7”

1. 

   November 20, 2018

   paparao

   i did all steps what u said,
   but got errors when i aam column resizing using jquery .
   the error llike
   TypeError: jquery__WEBPACK_IMPORTED_MODULE_1__(…).css(…).prepend(…).resizable is not a function

   ,
   Uncaught ReferenceError: jQuery is not defined

   my code is
   —————
   import { Component, OnInit } from ‘@angular/core’;
   import * as $ from ‘jquery’;

   @Component({
   selector: ‘app-root’,
   templateUrl: ‘./app.component.html’,
   styleUrls: [‘./app.component.css’]
   })
   export class AppComponent implements OnInit{
   title = ‘tables’;

   ngOnInit() {
   alert(“$ vesion is “+jQuery.fn.jquery)
   //$(“td,th”)
   $(“td:first-child,td:nth-child(2),td:nth-child(3)”)
   .css({
   /* required to allow resizer embedding */
   position: “relative”
   })
   /* check .resizer CSS */
   .prepend(“”)
   [‘resizable’]({
   resizeHeight: false,

   // we use the column as handle and filter
   // by the contained .resizer element
   handleSelector: “”,
   onDragStart: function(e, $el, opt) {
   // only drag resizer
   if (!$(e.target).hasClass(“resizer”))
   return false;
   return true;
   }
   });

   }
   }

   html code is
   —————-

   Drag and Resize

   Table Head
   Table Head
   Table Head
   Table Head

   Table Data
   Table Data
   Table Data
   Table Data 12412412414124
2. 

   November 20, 2018

   Ajay Malhotra

   HI Paparao, it seems like, you are jquery ui elements so you’re getting this error.
   Try to use :

   declare let $: any;
   instead of
   import * as $ from ‘jquery’;

   ———-or ————-

   1 : Import jquery-ui-dist
   npm install jquery jquery-ui-dist

   2: Add scripts in angular-cli.json
   “scripts”: [
   “../node_modules/jquery/dist/jquery.min.js”,
   “../node_modules/jquery-ui-dist/jquery-ui.js”
   ],

   Thank you
3. 

   February 2, 2019

   moustafa youssif

   That’s nice , great idea I will try to use it because you know not all UI plugins have angular7 implementation yet . So you are my hero 👍
4. 

   February 3, 2019

   Ajay Malhotra

   Thank you moustafa
5. 

   March 18, 2019

   dacheng

   ok it goes well
   Thanks for your proposal
6. 

   March 19, 2019

   Ajay Malhotra

   Great..
7. 

   March 20, 2019

   safa

   hello i want to ask if you tried to use Mapster or maphilight in Angular 7 to highlight areas in an image , as i am currently working on this and i faced some issues .
   Thank you
8. 

   March 20, 2019

   Ajay Malhotra

   You can show me your working example and you can tell me the issue coming in console?
9. 

   March 21, 2019

   safa

   This is the HTML code : it is for image mapping :

   This is the component.ts file :

   import {OnInit,Component} from ‘@angular/core’;
   import { HttpClient } from ‘@angular/common/http’;
   import * as jQuery from ‘jquery’;
   declare var $: any;

   @Component({
   selector: ‘app-maphilight’,
   templateUrl: ‘./maphilight.component.html’,
   styleUrls: [‘./maphilight.component.scss’]
   })

   export class MaphilightComponent implements OnInit {
   title = ‘web_ui’;
   State: JSON;
   ngOnInit(){
   $(“map[name=map] area”).on(“click”, function(e){
   e.preventDefault();
   alert($(this).attr(‘coords’));
   });

   $(‘img’).mapster({mapKey: ‘room’});

   }

   there is no error in Console but this is not working correctly, because each area should be highlighted onclick , like in this example : http://jsfiddle.net/jamietre/jQG48/

   I am using the latest version of Jquery .
   Thank you for your time
10. 

    March 21, 2019

    safa

    .
11. 

    March 21, 2019

    safa

    Actually i am new to Angular …
    this is my html code for mapping the image

    and this is the component.ts

    import {OnInit,Component} from ‘@angular/core’;
    import { HttpClient } from ‘@angular/common/http’;
    import * as jQuery from ‘jquery’;
    declare var $: any;

    @Component({
    selector: ‘app-maphilight’,
    templateUrl: ‘./maphilight.component.html’,
    styleUrls: [‘./maphilight.component.scss’]
    })

    export class MaphilightComponent implements OnInit {
    title = ‘web_ui’;
    State: JSON;
    ngOnInit(){
    $(“map[name=map] area”).on(“click”, function(e){
    e.preventDefault();
    alert($(this).attr(‘coords’));
    });

    $(‘img’).mapster({mapKey: ‘room’});

    }

    i wanted to use mapster API to trigger highlight or selection onclick on each area like in this example http://jsfiddle.net/jamietre/nM7kq/

    and i am not getting any error but it doesn’t work correctly , onclick nothing is selected or highlighted even when i remove the alert giving the coordinates.

    Thank you in advance for your time
12. 

    March 21, 2019

    Ajay Malhotra

    you can email me : therichposts@gmail.com
13. 

    March 21, 2019

    Ajay Malhotra

    No need to use: import * as jQuery from ‘jquery’;

    Also you need to add mapster also.
14. 

    March 25, 2019

    safa

    Thank you , You’re right the error was that i haven’t added the mapster plugin and it is fixed now.
15. 

    March 25, 2019

    Ajay Malhotra

    wow that is great..
16. 

    May 27, 2019

    yusuf

    thank you
    short and useful post
17. 

    May 27, 2019

    Ajay Malhotra

    Thank you Yusuf
18. 

    July 31, 2019

    marcel

    hello, I am loading some libraries external to my project but so far I can’t make it work,

    my error is TypeError: jquery__WEBPACK_IMPORTED
19. 

    July 31, 2019

    Ajay Malhotra

    Define jquery global and it will work. Thanks! –
20. 

    November 18, 2019

    Julien Pitt

    great