Получить ссылку на элемент внутри ng-шаблона

Question

Это мой шаблон:

<ng-template #template>
    <input #newimg  type="file" class="col-md-10" (change)="fileChange($event)"/>
</ng-template>

Я не могу получить ссылку на #newimg когда его внутри ng-template(работает нормально, если я меняю ng-template в div!)

@ViewChild('newimg') img: ElementRef; //doesnt work

Мне нужно установить его значение пустым после загрузки изображения, но всегда неопределенным.

Answer 1

<ng-template> не добавляется в DOM, он существует только в коде JavaScript при запуске приложения. Только когда это штампуется с использованием, например, структурной директивы, такой как *ngFor или же *ngIfсодержимое на самом деле создается в DOM, а привязки, компоненты, директивы... создаются.

Поэтому без тиснения не будет #template запросить.

Answer 2

Используйте ContentChild вместо ViewChild, потому что ссылка на ваш шаблон находится в проецируемом содержимом (ngtemplate)

      @ContentChild('newimg') img: ElementRef;