angular templateRef nativeElement is an empty comment instead of original element

Question

I am developing an angular directive that converts dropdownlist to radioListbox. here is my initial code :

import { Directive, Input, TemplateRef, ViewContainerRef,OnInit } from '@angular/core';

@Directive({
  selector: '[radioList]'
})
export class RadioListDirective implements OnInit  {



  constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef) {

  }

  ngOnInit() {

    console.log(this.templateRef);
    this.vcRef.createEmbeddedView(this.templateRef);

  }
}

and

<div>
  test
</div>


<select *radioList><option>1</option><option>2</option></select>

It should log the TemplateRef whose ElementRef 's nativeElement is a select. But the result is and empty comment that its next element is the select .

Answer 1

Hacky solutions currently working:

Grab the next sibling:

this.templateRef.elementRef.nativeElement.nextSibling

Use viewContainerRef.get

(this.viewContainerRef.get(0) as any).rootNodes[0]

(Note, from your example code you used vcRef instead of viewContainerRef as I used here.)