08 Add a PsSelect to the edit page - prosoft-edv/newcomer-experience GitHub Wiki

After the introduction to bundle size analysis we will continue the journey with a look at another one of our components. The ps-select.

The selectbox should meet the following requirements:

• Should be appended to the input controls of the pokemon-detail.page.
• You can use DefaultPsSelectDataSource from @prosoft/components/select.
• httpGetTypeList(...) from the shared/http folder and the corresponding dtos should be used to fill the selectable options.
• The options should be loaded when the ps-select is opened for the first time.
• The options should be displayed using the property 'name'.
• The options should be identified by the property 'name'.
• The selected options should be sorted to the top. Otherwise, the items should use default sorting.
• The search should be debounced by 300ms.

Create a custom validation function to the types control which meets the following requirements:

• Shows message "You should not select more than two types." if more than two types are selected.
• Shows message "You must select at least one type." if no type is selected.
• Valid otherwise.

• Try to use the ps-select without creating a DefaultPsSelectDataSource in the .ts file. Hint

In the end your solution should look similar to our provided example in this commit. Note that the solution without a DefaultPsSelectDataSource is currently our favored method because it is shorter and generally makes the HTML more readable. Only create a data source if you need to customize its behavior.

As of now, this is the last step of the tutorial. Please take a moment and have a look at the conclusion.

Why should I use ps-select instead of mat-select?

The ps-select provides built in filtering, sorting, error handling, a loading indicator and many more features. You have to build all of this yourself with the other options.