ng-content is not working inside select tag Angular2

Question

i am trying to make a custom dropdown component but when i try to access data through ng-content inside select tag its not working.

this is my custom-component html file:

<select class="form-control">

    <ng-content></ng-content>

</select>

this is my main html file where i am calling 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 i am doing wrong ???

Answer 1

Currently angular2 uses native (browser) HTML parser. According to the standard only <optgroup> and <option> HTML elements are permitted inside <select> element (see here ). At least Chrome removes all other HTML tags. Try to execute the next code in Chrome:

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

So, at the time angular2 will start to process the markup, <ng-content> will be already removed.

This issue can be resolved after (and if) angular2 team implements its own HTML parser