Using Javascript and Jquery in a angular 6 cli project

Question

I am using angular 6 cli and i want to use jquery and javascript. i imported jquery and bootstrap but still get an error when trying to use jquery. I want to use the code below or convert it to ts. I looked online and followed a couple of suggestions but they didnt work.

when I add the code below to my angular component.ts file it flags error.

 $('.editValues').click(function () {
    $(this).parents('tr').find('td.editableColumns').each(function() {
      var html = $(this).html();
      var input = $('<input class="editableColumnsStyle" type="text" />');
      input.val(html);
      $(this).html(input);
    });
  });

the following errors are shown

ERROR in src/app/_services/user.service.ts(56,5): error TS1003: Identifier expected.
src/app/_services/user.service.ts(56,19): error TS1144: '{' or ';' expected.
src/app/_services/user.service.ts(56,26): error TS1138: Parameter declaration expected.
src/app/_services/user.service.ts(63,4): error TS1068: Unexpected token. A constructor, method, accessor, or property was expected.

i get these errors when i add that code . ERROR in

src/app/_services/user.service.ts(56,5): error TS1003: Identifier expected.
    src/app/_services/user.service.ts(56,13): error TS1144: '{' or ';' expected.
    src/app/_services/user.service.ts(56,20): error TS1138: Parameter declaration expected.
    src/app/_services/user.service.ts(56,31): error TS1005: ';' expected.
    src/app/_services/user.service.ts(57,1): error TS1128: Declaration or statement expected.

You have problems with TypeScript, not @angular/cli. Probably it doesn't know what is $. Did you install jquery and types for it? — Drag13, Sep 10 '18 at 15:47
@Drag13 Thanks for the reply, i have the following import import * as $ from 'jquery'; and in my package.json has "@types/jquery": "^3.3.6", — z123, Sep 10 '18 at 15:50
Quite strange... Cold you change that block for this: $('.test').click(() => false); and check if any error appears — Drag13, Sep 10 '18 at 16:05
@Drag13 i am updating my post to show the error that displays — z123, Sep 10 '18 at 16:08
@phuzi Hi, i tried to find a similar way to convert a table to editable on click but cant find anything that works. what do you suggest instead of this. — z123, Sep 10 '18 at 16:25

Timo · Accepted Answer · 2018-09-10T16:17:21.320

0

Your jQuery code is in a class body, where the compiler is expecting a constructor, accessor, property or a method (src/app/_services/user.service.ts(63,4): error TS1068: Unexpected token. A constructor, method, accessor, or property was expected).

You need to put it inside a method.

import { Component, OnInit, OnDestroy, OnViewInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-my-component',
  templateUrl: './app-my-component.html',
  styleUrls: ['./app-my-component.css'],
})
export class MyComponent implements OnInit, OnDestroy, OnViewInit {
  constructor(private store: Store<any>) {}

  ngOnInit() {
    // subscribe to store
  }

  ngOnDestroy() {
    // unsubscribe from store
  }

  ngOnViewInit() {
    // Put your jQuery code here
  }
}

Note that using jQuery with modern Angular is not really recommended and against best practises. Read more: Best Practice of Angular 2

edited Sep 10 '18 at 16:17

answered Sep 10 '18 at 16:08

Timo

2,740
1
24
22

do you mean like this import * as $ from 'jquery'; thats my import statement – z123 Sep 10 '18 at 16:11
No, your Angular app has classes and you can't put anything but constructors, accessors, properties or methods in the body of your class. – Timo Sep 10 '18 at 16:14
Thanks that worked but i have just one more question. this method i put it in is it called on init because the method is showing unused – z123 Sep 10 '18 at 16:23
IIRC you should put it in ngOnViewInit as the DOM view has not been loaded yet when you run ngOnInit and jQuery needs access to it. – Timo Sep 10 '18 at 16:25

Using Javascript and Jquery in a angular 6 cli project

1 Answers1