akveo / akveo/nebular

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

Abierto
#3,007 1 comentario 7 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
8.1k
Forks
1.5k
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

### 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](https://github.com/akveo/nebular/blob/d6374b1a1dbdfd99b23544b91a02a61871da7039/src/framework/theme/components/select/select.component.html#L27)
* nb-option
* nb-option-group

* [Autocomplete sllows](https://github.com/akveo/nebular/blob/d6374b1a1dbdfd99b23544b91a02a61871da7039/src/framework/theme/components/autocomplete/autocomplete.component.html#L9)
* nb-option
* nb-option-group

* [Option Group allows](https://github.com/akveo/nebular/blob/d6374b1a1dbdfd99b23544b91a02a61871da7039/src/framework/theme/components/option/option-group.component.ts#L41)
* 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 ``, set `[disabled]=true` so the menus ignore it, then use `::ng-deep` styling to remove the disabled styling.

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.