03 Add a Pokémon list view - prosoft-edv/newcomer-experience GitHub Wiki

Everything is set up now and we can start programming the first page. This will be a list view showing all existing Pokémon.

The list page should meet the following requirements:

• Should be placed in pages/list folder
• Should consist of the following files: pokemon-list.module.ts, pokemon-list.page.html, pokemon-list.page.ts and maybe pokemon-list.page.scss.
• The SharedModule from the shared folder can be used to cover some required imports which will be used multiple times throughout this tutorial. It is ready to use from Step 2 and does not need further adjustments. However, it will not contain every module required for this step.
• Should be accessible under http://localhost:4600/
• The route should not be lazy loaded.
• The page should display a list of Pokémon using the ps-card and ps-table components.
• The table should display the following columns:

Column name	Type	Mandatory	Sortable	Info
Id	text	-	X
Name	text	X	X
Sprite	img	-	-	Sprite url: https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/<pokemon_id>.png
Pokémon-Api-Url	text	-	X

• httpGetPokemonList(...) from the shared/http folder and the corresponding dtos should be used to load the data.
• Both 'server' and 'client' mode should be tried. Client is the more fitting solution though as the underlying api does not provide server side filtering/sorting. The datasource with server mode is therefore only configured for learning purposes and will not be used going forward.

In the end your solution should look similar to our provided example in this commit.

This concludes the creation of the list page. The tutorial continues with Step 4

Why should I use ps-table instead of (mat-)table?

The ps-table provides built in pagination, filtering, sorting, error handling, a loading indicator and many more features, some of which will be used in later steps. You have to build all of this yourself with the other options.

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

Depends on your solution. ps-card follows our companies current styling guidelines. If your project differs from it you may be better of using mat-card, maybe in combination with ps-header or something else entirely.

Why do I not lazy load the list?

This page is mainly not lazy loaded to show how it is done without it (lazy loading is shown in the next step). Another reason is that the list serves as the landing page and is loaded anyway in most cases. Usually, a bigger project uses a mix of both.

Why do I name my component page?

We suggest you name everything 'page' that is directly used in the route definition. Dialogs should be named 'dialog'. All other components are named 'component'. This creates a clear distinction between component types by just reading its name and makes it clear where you can use route information (pages), dialog data (dialogs) or inputs/outputs (components).

Why does the list page need its own module?

If you capsule every component into its own module you can properly separate the imported modules to where they are required. This reduces clustering in modules, increases maintainability and may also benefit tree shaking in combination with lazy loading.