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.

Answer 1

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