Angular - HTML element not found in directive

Question

I'm trying to create a pie chart on an element using the directive in Angular 5. I created a directive like:

@Directive({
  selector: '[pieChart]'
})
export class PieChartDirective implements AfterViewInit {

  @Input() pieChart: any;
  @Input() pieChartElementId: string;
  @Input() pieChartData: any;

  constructor(elem: ElementRef, renderer: Renderer2) {}

  ngAfterViewInit() {
    this.generatePieChart(this.pieChartElementId);
  }

  generatePieChart(elemId) {
    var values = [1, 2, 3];

    $('#' + elemId).sparkline(values, {
      type: "pie",

      tooltipFormat: '{{offset:offset}} ({{percent.1}}%)',
      tooltipValueLookups: {
        'offset': {
          0: 'First',
          1: 'Second',
          2: 'Third'
        }
      },
    });
  }
}

In the template I'm calling directive like:

<div class="pieChartDiv" [attr.id]="'classroom.field1' + '_'+ i" [pieChart]="'classroom.field1' + '_'+ i" [pieChartElementId]="'classroom.field1' + '_'+ i"></div>

I'm creating id dynamically and want to draw the pie chart on each id. But unfortunately, I'm not getting the length of element in directive when using console.log($("#"+this.pieChartElementId).length) in the directive file. Due to that charts are not working because they are not getting the element. Could anyone please tell me why this happening. Thanks in advance.

Instead of doing $('#' + elemId) try $(this.elem.nativeElement). For this to work you will also have to add an access modifier to the elem parameter for your constructor to automatically make it a property of your class e.g. constructor(private elem:ElementRef, renderer:Renderer2) {}. — TM_
– TM_, Commented Jul 19, 2019 at 12:48

Benjamin Caure · Accepted Answer · 2019-07-19 11:09:00Z

2

You should not use JQuery #() selector with Angular: as you can see, even after view init your pieChartElementId element might not be rendered yet.

Instead you should use elementRef or @ViewChild:

If pieChartElementId is the element on which pieChart directive is applied, you should use:

elementRef.nativeElement
If you want to select another element, it's a little more complexe. You have to use @ViewChild to get the element:

@ViewChild('pieChartElement') pieChartElement;

then pass it to the directive input:

<div pieChart [externalElement]="pieChartElement"> Element with directive </div> <p #pieChartElement> External element </p>

See this working example

answered Jul 19, 2019 at 11:09

Benjamin Caure

2,45324 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neeraj Sharma Over a year ago

great explanation.

Collectives™ on Stack Overflow

Angular - HTML element not found in directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related