04 Add a Pokémon edit page

With the list page completed we can now move on to the creation of an edit page.

Task 1: Create the edit page

The edit page should meet the following requirements:

• Should be placed in pages/detail folder
• Should consist of the following files: pokemon-detail.module.ts, pokemon-detail.page.html, pokemon-detail.page.ts and maybe pokemon-detail.page.scss.
• The SharedModule can be used just like in the previous step with the same restrictions.
• Should be accessible under http://localhost:4600/:nameOrId where nameOrId is a route parameter
• The route should be lazy loaded.
• The page should display the details of Pokémon using the ps-card, ps-form, ps-form-field and ps-number-input components and maybe some Material components.
• The following properties should be editable using reactive forms:

Property name	control	required	Validators	hint
id	text	X	min: 1	-
name	text	X	minLength: 1	Don't you dare use MissingNo!
height	number	-	min: 0.1	-
weight	number	-	min 0.1	-

• You can use DemoFormDataSource from the shared folder as the datasource for your ps-form.
• httpGetPokemon(...) from the shared/http folder and the corresponding dtos should be used to load the data.
• httpSavePokemon(...) from the shared/http folder and the corresponding dtos should be used to save the data. Note that the save function will currently not really save anything and throw an exception if the name is Missingno.
• The buttons "Cancel" and "Save & close" should navigate to the list page whereas the table columns "Id" and "Name" should be edited so that they become links that navigate to the detail view of the respective Pokémon.
• The card should have a caption.

Task 2: height and weight are provided in the wrong magnitude. Fix it!

• The two values are provided in decimeters and hectogram. They should be converted to meters and kilogram for editing but must be converted back before saving.
• The ps-number-inputs should also be adjusted to work with one decimal and steps of 0.1.

Task 3: Add a button to the save bar to navigate to a random Pokémon.

• A button should be added to the save bar that navigates to the edit view of a random Pokémon. The range of possible ids is 1-899.
• The random number should not be calculated on every change detection cycle.
• Should be possible to open the random Pokémon in a new tab with the browser-provided methods.

Task 4: Add a component displaying the provided sprites

• Should be placed in pages/detail/components folder
• Should consist of the following files: pokemon-sprites.component.ts.
• Html and css should be defined inline (only to see how it is done).
• Should have at least one Input to provide the component with the required information
• Should display the sprites side by side with a text centered above each one indicating which sprite it is.
• Should be placed inside the card on the pokemon-detail.page

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

This concludes the creation of the edit page. The tutorial continues with Step 5

Further information

Why should I use ps-form?

The ps-form provides built in error handling, form validation handling, a loading/saving indicator, a sticky save bar and some more features.

Why should I use ps-number-input instead of type="number"?

An input with type="number" provides a number value as string. Furthermore, the spinner arrows of type="number" look different depending on the browser you choose. Additionally the ps-number-input provides a maximum number of decimals, a max and a min where it auto corrects invalid values to the nearest valid value.

Why should I use lazy loading?

Lazy loading can lead to a massive decrease of initial load times because it splits the application into bundles and only loads the ones and their dependencies required to show the landing page of the app. Everything else is loaded on demand. Navigating to parts of the app that are not yet loaded are slightly higher. This could be mitigated by preloading those parts in the background.