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.

Bắt đầu bằng cách xác định component labgrilla và các entry point list và selectItem hiện có của nó. Kiểm tra cách component hiện render các item, sau đó xác minh rằng input dạng mảng, việc chọn và highlight bằng bàn phím, việc chọn bằng Enter hoặc nhấp chuột phải, cũng như các breakpoint responsive items-per-row được liệt kê, đều đã được bao phủ.