Question: Angular.js In this challenge, your task is to create a component called grouper. This component determines how many groups of each element from a given

Angular.js

In this challenge, your task is to create a component called grouper. This component determines how many groups of each element from a given array can be made matching a user-specified size.

Your component will receive @Input data: string[] in the following format (some example strings have been provided):

The array is not in any particular order. For the purposes of the challenge, you can assume each element is a string consisting entirely of alphabetical lowercase characters.

Additionally, the component will offer an input box which enables the user to specify the size of the groups to create from the provided data.

For example, given the above data array and a user input size of 3, the complete groups that can be made are as follows:

1 group of "red" (3 elements, none are left over)

1 group of "yellow" (4 elements, 1 element is left over)

2 groups of "blue" (6 elements, none are left over)

If the user should change their input to size 5, the groupings become

0 groups of "red" (3 elements aren't enough to build a group of 5)

0 groups of "yellow" (4 elements aren't enough to build a group of 5)

1 group of "blue" (5 elements, 1 is left over)

Next, we'll describe the requirements the component should adhere to in displaying this grouping information.

Functional requirements

This section outlines the requirements for this challenge. You'll be evaluated by a test suite which will verify that your grouper component renders certain elements which exhibit the behavior described below.

An which will be used by the test suite to enter data. The element should respond to an input event; any change to the value of the input will re-render the groupings using the new value.

This element should have a two-way bound value which is initially set to "2" when the component is created. This is the default value for the user-specified group size. The component will always start out with a populated result in elements for groups and group-totals(see below) based on this size.

If the user should enter an invalid number for the group size (anything other than one or more digits or 0), your component should leave the previously rendered result untouched.

A