Integrating the missions module
According to the specifications of our application, a user should be able to do the following:
- Assign a new mission to a hero
- Mark a mission in progress as completed
So, we need to create a new feature module that contains functionality about missions. The folder structure of the module should be as follows:
Figure 13.7 – The missions folder structure
It contains the following Angular artifacts:
mission: A component that is used to assign a new mission to a hero.mission-list: A component that is used to display a list of missions. It also allows us to complete a mission.missions.service.ts: A service that uses the HTTP client to manipulate the missions of a specific hero.
In the following section, we'll explore the first component, which allows us to assign a new mission.
Assigning a new mission
We can assign a new mission to a hero by clicking on the Assign button...