Fala Galera! Minha dúvida é a seguinte:
- imaginem uma DIV que dentro dela existam vários componentes como o exemplo abaixo:
<div class="row">
<app-fogao></app-fogao>
<app-geladeira></app-geladeira>
<app-notebook></app-notebook>
<app-ar-condicionado></app-ar-condicionado>
<app-televisao></app-televisao>
<app-celular></app-celular>
<app-maquina-lavar></app-maquina-lavar>
</div>
E ai eu queira ordenar a exibição destes componentes conforme a ordem que eu receber do backend, algo do tipo abaixo:
let ordemProdutos = [
{produto: 'fogao' , posicao: 3},
{produto: 'geladeira' , posicao: 5},
{produto: 'notebook' , posicao: 1},
{produto: 'ar-condicionado' , posicao: 4},
{produto: 'televisao' , posicao: 2},
{produto: 'celular' , posicao: 7},
{produto: 'maquina-lavar' , posicao: 6}
];
E então a exibição dos componentes que inicialmente ficariam igual ao trecho 01, fosse alterada para ficar igual o trecho abaixo (conforme a ordem recebida acima):
<div class="row">
<app-notebook></app-notebook>
<app-televisao></app-televisao>
<app-fogao></app-fogao>
<app-ar-condicionado></app-ar-condicionado>
<app-geladeira></app-geladeira>
<app-maquina-lavar></app-maquina-lavar>
<app-celular></app-celular>
</div>
Alguém tem ideia de como fazer essa ordenação dos componentes dinamicamente?
OBS.: Esta é uma forma de demonstrar o problema que eu tenho. os componentes reais não possuem estes nomes. Não pude criar uma componente genérico porque cada um deles são completamente diferentes em termos de conteúdo e estrutura. Eles são exibidos lado a lado e eu preciso criar uma forma de ordená-los de acordo com o posicionamento que cada componente possui gravado no backend.