Angular 5 Get reference inside ng-template

Asked Mar 06 '18 at 09:36

Active Mar 06 '18 at 09:42

Viewed 640 times

I have something like this :

<div class="row">
  <ng-template #filtersTemplate let-sidenavFilter="sidenavFilter">
    <div class="row flex mt-md-5">
      <canvas #barChart id="canvasStacked">{{ chart }}</canvas>
    </div>
  </ng-template>
</div>


<fn-filter [filters]="filters" [responsive]="false" [template]="filtersTemplate" (onSubmit)="search($event)"></fn-filter>

Is it possible to get a reference to #barChart? @ViewChild does not work due to ng-template wrapping the reference.

edited Mar 06 '18 at 09:42

asked Mar 06 '18 at 09:36

Scandinave

1,388
1
17
41

1

You can only get reference after creating embedded view – yurzui Mar 06 '18 at 09:39
Can you explain me a bit more? – Scandinave Mar 06 '18 at 09:40
How do you use this template? – yurzui Mar 06 '18 at 09:40
I have update my code. I passed the template to a component that add filters around the canvas. – Scandinave Mar 06 '18 at 09:43
Where are you going to use `#barChart` in parent component or in `fn-filter`? – yurzui Mar 06 '18 at 09:50
In parent component – Scandinave Mar 06 '18 at 09:51
1

See console here https://ng-run.com/edit/pzwtozXQ2095qIckF38w – yurzui Mar 06 '18 at 09:53
Is the fact that you access the reference after fnèfilter component was load, not inside the ngAfterViewInit, that make it work? – Scandinave Mar 06 '18 at 09:56

Angular 5 Get reference inside ng-template

0 Answers0

Linked