Allow Select, Autocomplete, and OptionGroup to content project arbitrary content

[zeddic]

Issue type

I'm submitting a ...

• [ ] bug report
• [X] feature request

Issue description

Current behavior: At the moment, Select, Autocomplete, and Option Group only allow a limited set of html content to be content projected. All other content is lost.

• Select allows

  • nb-option
  • nb-option-group

• Autocomplete sllows

  • nb-option
  • nb-option-group

• Option Group allows

  • nb-option
  • ng-container

Feature request: I'd like to propose that these components remove the list of allowed selectors and allow arbitrary content projection of content. The purpose is to allow additional customization of the components by the developer. This matches the behavior of other Angular component libraries such as Material.

Common situations I've seen where this would be helpful:

• Displaying non-selectable text in auto-complete / menus
• Displaying a loading indicator in the auto-complete menu when items are being searched for via network request
• Adding a custom search box within the nb-select popup that could be used to narrow the list of selectable items
  • distinct from auto-complete and would support #1859 #2042 #2029
• Allowing groups of items to be conditionally displayed behind an *ngIf on an ng-container

A current, hacky, work around to get this behavior is to wrap your arbitrary content in a <nb-option>, set [disabled]=true so the menus ignore it, then use ::ng-deep styling to remove the disabled styling.

[RikiGomes]

Very interesting suggestion, this could be a huge improvement!