Ng content doesn't work inside Angular2 select tag

Question

I am trying to create my own dropdown component, but when I try to access data via ng content inside the select tag, it does not work.

this is my html file with custom component:

<select class="form-control">

    <ng-content></ng-content>

</select>

this is my main html file where i call the component:

<dropdown>
        <option value="">Select details type</option>
        <option value="">Personal</option>
        <option value="">General</option>
        <option value="">Contact</option>
        <option value="">Settings</option>
 </dropdown>

what am I doing wrong???

Answer 1

Currently angular2 uses its own (browser) HTML parser. In accordance with standard only <optgroup>and <option>HTML-enabled elements inside <select>element (see. Herein ). At least Chrome removes all other HTML tags. Try the following code in Chrome:

var div = document.createElement('div');
div.innerHTML = '<select><ng-content></ng-content></select>';
console.log(div.innerHTML) // "<select><select>"

, , angular2 , <ng-content> .

( if) angular2 HTML-