CODEWITHSUNDEEP
angularangular-directive
Neeraj
Neeraj

Reputation: 702

Angular - HTML element not found in directive

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.

Upvotes: 2

Views: 409

Answers (1)

Benjamin Caure
Benjamin Caure

Reputation: 2403

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

Upvotes: 2

Related Questions