Idea 1

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.

Start by locating the labgrilla component and its existing list and selectItem entry points. Check how the component currently renders items, then verify that array input, keyboard selection and highlighting, Enter or right-click selection, and the listed responsive items-per-row breakpoints are covered.