Idea 1

Inizia individuando il componente labgrilla e i suoi punti di ingresso esistenti list e selectItem. Controlla come il componente esegue attualmente il rendering degli elementi, quindi verifica che siano coperti l’input di array, la selezione e l’evidenziazione da tastiera, la selezione con Enter o con il clic destro e i breakpoint responsive items-per-row elencati.

El componente debería de funcionar atraves de un arreglo.

frutas = ["Manzana", "Pera", "Piña", "Pepino"];

<labgrilla #frutas [list]="frutas" (selectItem)="SelectItemEmit($event)"></labgrilla>

Además se requiere que sea posible seleccionar un item atraves de las flechas del teclado.

• El item en el cual estamos posicionados debería de resaltar entre los demás.
• La selección sera atraves de la tecla enter o el click derecho del ratón.
  

Responsive Design
Este componente debe de ser responsivo.

• Si mi pantalla de navegador es mayor a 1200px deberia mostrarse 12 items por fila.
• Si mi pantalla de navegador es menor a 1201px y mayor a 1000px deberia mostrarse 10 items por fila.
• Si mi pantalla de navegador es menor a 1001px y mayor a 800px deberia mostrarse 8 items por fila.
• Si mi pantalla de navegador es menor a 801px y mayor a 600px deberia mostrarse 6 items por fila.
• Si mi pantalla de navegador es menor a 601px y mayor a 500px deberia mostrarse 5 items por fila.
• Si mi pantalla de navegador es menor a 501px y mayor a 400px deberia mostrarse 4 items por fila.
• Si mi pantalla de navegador es menor a 401px y mayor a 300px deberia mostrarse 3 items por fila.
• Si mi pantalla de navegador es menor a 301px y mayor a 200px deberia mostrarse 2 items por fila.