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 compoennts.
• 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 savebar that navigates to the edit view of a random Pokémon. The range of possible ids is 1-899.
• 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