05 Add a delete dialog

With the edit page completed we can now move on to the creation of a delete dialog.

Task 1: Create the delete dialog

The delete dialog should meet the following requirements:

• Should be placed in pages/list/dialogs folder
• Should consist at least of the following files: confirm-delete.dialog.html, confirm-delete.dialog.ts and maybe confirm-delete.dialog.scss.
• The dialog should be opened via a delete button, which must be added to the pokemon-list
• It should be possible to either delete a single Pokémon or an selection of them at once.
• The dialog should display the sprites (https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/<pokemon_id>.png) of the Pokémon to delete using the ps-dialog-wrapper.
• You can use DemoDialogWrapperDataSource from the shared folder as the datasource for your ps-dialog-wrapper.
• httpDeletePokemon(...) from the shared/http folder and the corresponding dtos should be used to delete the data. Note: As of now, the delete function does not really delete the Pokémon but instead returns an error "You no delete Pokémon!".
• The button "Cancel" should close the dialog without further actions while the button "OK" should try to delete the Pokémon and reload the list on success. In case of an error, the dialog should stay open and display the error of the http call.
• The dialog should have a caption.
• The dialog should not be wider than the list itself.

Task 2 (optional): Make a Pokémon sprite in the dialog shiny randomly

• Choose a percentage at which the sprite becomes shiny (i.e. 1 in a 100)
• Check for every Sprite if it is shiny (https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/<pokemon_id>.png)

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

This concludes the creation of the delete dialog. The tutorial continues with Step 6.

Further information

Why should I use a confirm dialog for deletion?

Makes the deletion process saver. A user does not accidentally delete data.

Why should I use ps-dialog-wrapper?

The ps-dialog-wrapper provides built in error handling, a blocked state and some more features.