0

I'm currently writing my own logic for leaflet and need a way to load ng-templates in the same component to display icons on the map.

My current state looks like this (unfortunately nothing is displayed on the map).

My template:

<ng-template #myTemp let-data="cl" let-gl="cl.gl" let-lid="cl.id">
  <ng-container>
    <div class="custom-class">
      <!-- .. -->
    </div>
  </ng-container>
</ng-template>

Inside the .ts file:

@ViewChild('myTemp') myTemp: TemplateRef<any>;

And then I set the map options in the ngAfterViewInit lifecycle method like this:

this.opts.myTemp = this.myTemp;

I have the feeling that the templates are not loaded because they are in the same components and ViewChild is used. However, the map has the correct coordinates that it automatically zooms in place.

What am I doing wrong or is the reason more of something else?

Codehan25
  • 2,704
  • 10
  • 47
  • 94
  • where are you loading the `ng-template` inside your component template? For example by the use of [NgTemplateOutlet](https://angular.io/api/common/NgTemplateOutlet) – Poul Kruijt Jul 23 '19 at 07:00
  • @PierreDuc The ng-templates are placed inside the .component.html file and referenced inside the component.ts file like described above. Then I have a function thats sets the map options and gets called inside the ngOnInit lifecycle method. – Codehan25 Jul 23 '19 at 07:29
  • You should probably show this code as well, to make it a bit more clear what you are trying to achieve – Poul Kruijt Jul 23 '19 at 08:17
  • Sorry I can't provide that part of the code. I think it has something to do with ViewChild and assume that it is not able to use it in its own component and has to be placed in a parent component? Am i right? – Codehan25 Jul 23 '19 at 09:24
  • You can try to use `ContentChild` instead of `ViewChild`, or `@ContentChildren('myTemp', { descendants: true })` – Poul Kruijt Jul 23 '19 at 09:37

0 Answers0