Angular 5 jQuery - How to modify DOM elements?

Question

In a directive.ts file, I would like to modify a DOM element. When I do a browser debug, and stop in the directive, I can inspect its elements, but I do not know how to access the elements in typescript as I see them in the debugger.

Here's the relevant ts code:

  drawSparklines() {
    console.log("drawSparklines");

    $('.sparkline:not(:has(>canvas))', this.container).each((i, el) => {
      const $el = $(el);
      const sparklineType = $el.data('sparkline-type') || 'bar';

      if($el.nativeElement.innerText === "dataIncome") {
        $el.nativeElement.innerText.val = this.dataIncome;
      }

I added the conditional, above, where I am trying to inspect the innerText value, and change it if it equals dataIncome to a class property.

In the attached screen shot taken in the debugger, you can see the innerText property. But, how to actually work with it in ts?

Debugger Screen Shot:

Thanks for helping! Bob

score 1 · Answer 1 · answered Jul 10 '19 at 01:54

1

Take a peek at the StackBlitz example included in below thread, it might help push you in the right direction:

How can I select an element in a component template?

cheers

answered Jul 10 '19 at 01:54

iHazCode

622
4
15

Thanks iHazeCode. That is a useful read. I followed it a few months ago when I was trying to solve problem, that the topic spells out nicely for using @ViewChild. But there wasn't much there for my current problem. I did solve my using trial&error on the DOM element. I will describe it in my answer. – BobC Jul 10 '19 at 07:57

score 1 · Answer 2 · answered Jul 10 '19 at 08:03

I solved the problem using trial&error in the debugger. I was actually trying to make it more complicated than needed. No need for jQuery $el, and nativeElement.

Here's what worked:

  drawSparklines() {
    console.log("drawSparklines");

    $('.sparkline:not(:has(>canvas))', this.container).each((i, el) => {
      const $el = $(el);
      const sparklineType = $el.data('sparkline-type') || 'bar';

      if(el.innerText === "dataIncome") {
        el.innerText = this.dataIncome;
      }

Thanks, Bob

Glad you got it sorted out, thanks for the share! :) – iHazCode Jul 13 '19 at 23:32 — iHazCode, Jul 13 '19 at 23:32

score 0 · Answer 3 · answered Jul 10 '19 at 03:35

it's two way first: in component file:

document.getElementById("");

and the second way if you modify element to use this:

@Component({
  selector: "",
  templateUrl: "",
  host: {
    "(document:click)": "onClickOutsideDropdown($event)"
  }
})
 constructor(private el: ElementRef) {
  }
 onClickOutsideDropdown(event: Event) {
     this.el.nativeElement.contains(event.target) ...
  }

Angular 5 jQuery - How to modify DOM elements?

3 Answers3

Linked