How to integrate jQuery code into Angular 8?

Question

I tried following this tutorial, but I get errors like Identifier expected., '{' or ';' expected., Parameter declaration expected., Cannot find name '$'. Did you mean the instance member 'this.$'? thrown out. The code is supposed to click on the treeview arrows to expand the view and then bind a click event to each single element.

Component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-treeview-tab',
  templateUrl: './treeview-tab.component.html',
  styleUrls: ['./treeview-tab.component.scss']
})
export class TreeviewTabComponent implements OnInit {
  $(".tree-node").find("span").not("span[class*='toggle-children']").click(function (){console.log($(this))});
  constructor() { }
.....
 }
}

App.component.ts:

import { Component, OnInit } from '@angular/core';
declare var $: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

  title = 'Avior';

  constructor() {
  }

  ngOnInit() {  }
}

UPDATE

Rendered HTML, which is rendered by Angular and contains the treeview from the treeview plugin:

<div _ngcontent-ais-c3=""><router-outlet _ngcontent-ais-c3=""></router-outlet><app-treeview-tab _nghost-ais-c4=""><tree-root _ngcontent-ais-c4="" ng-reflect-nodes="[object Object],[object Object" ng-reflect-options="[object Object]"><tree-viewport><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><div style="height: auto;"><div class="angular-tree-component"><!--bindings={
  "ng-reflect-ng-if": "[object Object],[object Object"
}--><tree-node-collection ng-reflect-nodes="[object Object],[object Object" ng-reflect-tree-model="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><div style="margin-top: 0px;"><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object",
  "ng-reflect-ng-for-track-by": "function (index, node) {\n     "
}--><tree-node ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-1 tree-node tree-node-expanded"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="0"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-wrapper toggle-children-wrapper-expanded"><span class="toggle-children"></span></span><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!----></tree-node-expander><div class="node-content-wrapper" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="0"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Admin</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2",
  "ng-reflect-is-open": "true"
}--><div class="tree-children"><!--bindings={
  "ng-reflect-ng-if": "[object Object],[object Object"
}--><tree-node-collection ng-reflect-nodes="[object Object],[object Object" ng-reflect-tree-model="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><div style="margin-top: 0px;"><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object",
  "ng-reflect-ng-for-track-by": "function (index, node) {\n     "
}--><tree-node ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-2 tree-node tree-node-leaf"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="0"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-placeholder"></span><!----></tree-node-expander><div class="node-content-wrapper" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="0"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Name1</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2"
}--><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="1"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node><tree-node ng-reflect-node="[object Object]" ng-reflect-index="1" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-2 tree-node tree-node-leaf"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="1" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-placeholder"></span><!----></tree-node-expander><div class="node-content-wrapper" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="1"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Name2</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2"
}--><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="2"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node></div></tree-node-collection><!--bindings={
  "ng-reflect-ng-if": "false"
}--></div><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="1"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node><tree-node ng-reflect-node="[object Object]" ng-reflect-index="1" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-1 tree-node tree-node-expanded"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="1" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-wrapper toggle-children-wrapper-expanded"><span class="toggle-children"></span></span><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!----></tree-node-expander><div class="node-content-wrapper" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="1"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Anwender</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2",
  "ng-reflect-is-open": "true"
}--><div class="tree-children"><!--bindings={
  "ng-reflect-ng-if": "[object Object],[object Object"
}--><tree-node-collection ng-reflect-nodes="[object Object],[object Object" ng-reflect-tree-model="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><div style="margin-top: 0px;"><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object",
  "ng-reflect-ng-for-track-by": "function (index, node) {\n     "
}--><tree-node ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-2 tree-node tree-node-leaf"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="0"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-placeholder"></span><!----></tree-node-expander><div class="node-content-wrapper" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="0"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Name3</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2"
}--><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="1"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node><tree-node ng-reflect-node="[object Object]" ng-reflect-index="1" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-2 tree-node tree-node-leaf"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="1" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-placeholder"></span><!----></tree-node-expander><div class="node-content-wrapper" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="1"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Name4</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2"
}--><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="2"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node></div></tree-node-collection><!--bindings={
  "ng-reflect-ng-if": "false"
}--></div><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="2"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node><tree-node ng-reflect-node="[object Object]" ng-reflect-index="2" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-1 tree-node tree-node-active tree-node-focused tree-node-expanded"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="2" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-wrapper toggle-children-wrapper-expanded"><span class="toggle-children"></span></span><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!----></tree-node-expander><div class="node-content-wrapper node-content-wrapper-active node-content-wrapper-focused" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="2"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Entwickler</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2",
  "ng-reflect-is-open": "true"
}--><div class="tree-children"><!--bindings={
  "ng-reflect-ng-if": "[object Object]"
}--><tree-node-collection ng-reflect-nodes="[object Object]" ng-reflect-tree-model="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><div style="margin-top: 0px;"><!--bindings={
  "ng-reflect-ng-for-of": "[object Object]",
  "ng-reflect-ng-for-track-by": "function (index, node) {\n     "
}--><tree-node ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-2 tree-node tree-node-leaf"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="0"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-placeholder"></span><!----></tree-node-expander><div class="node-content-wrapper" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="0"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Name5</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2"
}--><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="1"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node></div></tree-node-collection><!--bindings={
  "ng-reflect-ng-if": "false"
}--></div><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="3"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node></div></tree-node-collection><!--bindings={
  "ng-reflect-ng-if": "false"
}--></div></div></tree-viewport></tree-root></app-treeview-tab></div>

Why would you want to use `jQuery` in `Angular`? You can use `ViewChild` and native selectors to do the same thing? — tftd, Jan 06 '20 at 09:58
Not a duplicate, but you absolutely need to read this highly related question: https://stackoverflow.com/q/53534894/519413 — Rory McCrossan, Jan 06 '20 at 10:04
@tftd can I do the same thing without jQuery by just using Angular? Could you give an example how I could accomplish the clicking and setting click handlers without jQuery? — Munchkin, Jan 06 '20 at 10:06
@Munchkin You should read/search for [Using @ViewChild to inject a reference to a DOM element](https://blog.angular-university.io/angular-viewchild/). In summary, you can use `@ViewChild` to get a reference of the `DOM element` and from there it's pure javascript. You can use `element.addEventListener` or `element.click()` (to simulate click) and do whatever you need to do. No `jQuery` needed what so ever. — tftd, Jan 06 '20 at 11:02

manikant gautam · Accepted Answer · 2020-01-06T10:53:40.583

2

Make sure you have installed Jquery.To Install JQuery follow below steps

install jQuery using npm as

npm install jquery — save.

Navigate to the ./angular-cli.json file at the root of your Angular CLI project folder, and find the scripts: [] property, and include the path to jQuery

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

Now you have to do is to import it in whatever component you want to use jQuery
```
 import * as $ from 'jquery';
 (or)
 declare var $: any;
```

To make sure Jquery is working

 public ngOnInit()  {
    $(document).ready(function(){
       // Now use your code 
      // $(".tree-node").find("span").not("span[class*='toggle-children']").click(function (){console.log($(this))});
       $('.tree-node > span:not(.toggle-children)').off('click').on('click', function(){
 console.log('clicked');
 }) }); }

Edit To get html of elements.

$('div span').each(function(){
  alert($(this).html());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="banner-message">
<span>First </span>
<span>Second </span>
<span>Thirs </span>
</div>

edited Jan 06 '20 at 10:53

answered Jan 06 '20 at 09:58

manikant gautam

3,521
1
17
27

I did what you wrote, I get no errors now, but the code does not execute... Do I need to write a ready function or something like that? – Munchkin Jan 06 '20 at 10:03
P.S the code does work if I execute it in the browser console, so the code is ok – Munchkin Jan 06 '20 at 10:04
@Munchkin see the answer. – manikant gautam Jan 06 '20 at 10:07
the click handlers get attached to the non-expanded tree... the alert is working, the click doesn't work and the click handler partly works, because the click for some reason did not execute properly... – Munchkin Jan 06 '20 at 10:10
@Munchkin show your `HTML` it seems like there is problem with your jquery code i.e event handler – manikant gautam Jan 06 '20 at 10:11
I'm stupid I added the wrong code... the correct code is $(".toggle-children").click();$(".tree-node").find("span").not("span[class*='toggle-children']").click(function (){console.log($(this))}); and it works – Munchkin Jan 06 '20 at 10:25
maybe you could also expand upon how to print out the innerHTML/innerText value? I tried using console.log($(this.eq(0).innerHTML) but it doesn't work – Munchkin Jan 06 '20 at 10:35
try using `.text() or .html() ` instead of `.innerHTML` – manikant gautam Jan 06 '20 at 10:37
`ERROR TypeError: "this.html is not a function"` – Munchkin Jan 06 '20 at 10:38
use `html()` not `html` like `$(this).html()` – manikant gautam Jan 06 '20 at 10:38
`',' expected.` – Munchkin Jan 06 '20 at 10:43
show your `function` otherwise it is difficult to predict. – manikant gautam Jan 06 '20 at 10:44
I fixed it but now it returns an empty object. My code is `$(".tree-node").find("span").not("span[class*='toggle-children']").click(function (){console.log($(this.html))}); }); }` – Munchkin Jan 06 '20 at 10:46
again `.html` is not right it should be like `.html()` – manikant gautam Jan 06 '20 at 10:50
then I get `ERROR TypeError: "this.html is not a function"` :/ – Munchkin Jan 06 '20 at 10:59
it worked, thanks. I had to move the ) to the end of the this statement and it worked. – Munchkin Jan 06 '20 at 11:44

score 1 · Answer 2 · answered Jan 06 '20 at 09:57

The reason you're getting an exception if because there's code-execution within a class declaration without it being wrapped within a function.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-treeview-tab',
  templateUrl: './treeview-tab.component.html',
  styleUrls: ['./treeview-tab.component.scss']
})
export class TreeviewTabComponent implements OnInit {

  constructor() {
    $(".tree-node").find("span").not("span[class*='toggle-children']").click(function (){console.log($(this))}); <!-- moved -->
 }
}

Moving your jQuery function will resolve your issue and will also execute it when the TreeviewTabComponent class is being instanced.

I'm stupid I added the wrong code... the correct code is $(".toggle-children").click();$(".tree-node").find("span").not("span[class*='toggle-children']").click(function (){console.log($(this))}); and it works — Munchkin, Jan 06 '20 at 10:26

Pushprajsinh Chudasama · Answer 3 · 2020-01-06T10:26:00.893

0

Use it in either of your function. Not outside of the function.

import { Component, OnInit } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-treeview-tab',
  templateUrl: './treeview-tab.component.html',
  styleUrls: ['./treeview-tab.component.scss']
})
export class TreeviewTabComponent implements OnInit {

  constructor() {
     $(".tree-node").find("span").not("span[class*='toggle-children']").click(function (){
         console.log($(this))
     });
 }
}

edited Jan 06 '20 at 10:26

answered Jan 06 '20 at 09:57

Pushprajsinh Chudasama

7,772
4
20
43

`Parameter declaration expected.`, `Unexpected token. A constructor, method, accessor, or property was expected.`gets thrown out – Munchkin Jan 06 '20 at 10:19

How to integrate jQuery code into Angular 8?

3 Answers3