31.7. Studio: Angular, Part 3¶
In this studio, you must combine data-binding and attribute directives to dynamically change the appearance or behavior of HTML elements.
31.7.1. Getting Started¶
This studio uses the same mission planner repository as Angular studio part 2. There is no need to fork and clone new starter code.
- Open your work from Part 2 in Visual Studio Code.
git statusto see if you have any uncommitted work. If you do, resolve it.
- Checkout the
git checkout studio-3.
npm installto download dependencies.
ng serveto build and serve the project.
When viewed in your browser, the project should look like this:
Mission Name and Carrier Rocket are still editable, but the functionality for the crew, equipment, and experiments have been removed.
31.7.2. Part 1: Select Cargo¶
We want to add items from the equipment list to the cargo hold, but we must NOT
exceed the values of the
The interactive equipment list will eventually behave as follows:
- When clicked, an Add to Cargo Hold button adds the selected equipment to
cargoHoldarray and updates the
- As items are added to the hold, their names should appear in the Cargo Hold section of the page. Also, the Mass in Hold, Mass Budget Remaining, and Spots Filled values should update.
- The Add to Cargo Hold buttons should be disabled if all of the spots in the hold have been filled.
- If the mass of a particular item will push the cargo hold over
maximumAllowedMass, that item's button should be disabled.
cargoMasscomes within 200 kg of
maximumAllowedMass, then the Mass Budget Remaining text should turn red.
The following sections will guide you through completing Part 1.
126.96.36.199. Code the
equipment.component.ts and create the
- It should take an equipment object as a parameter.
- It should add the equipment object to the
- It should increase the
cargoMassvariable by the mass of the new equipment.
- It should return
falsedepending on whether
cargoMassis within 200 kg of
188.8.131.52. Update the
Cargo Hold Display¶
equipment.component.css and do the
- Add a
nearMaxMassclass in the CSS file that styles the text to be:
- Bold OR italic,
[class.nearMaxMass]to a boolean that will change the style of the Mass Budget Remaining text whenever the cargo hold gets within 200 kg of
- Add an Empty Hold button that clears the
cargoHoldarray and resets
cargoMass. As a side effect, clearing the hold should reactivate all of the buttons and return Mass Budget Remaining to its original style.
184.108.40.206. Status Check¶
At this point, the equipment component should behave something like:
Before moving on to part 2, be sure to commit and push your work.
31.7.3. Part 2: Select Crew Members¶
We want to add up to three astronauts to the mission crew, and we want to do this by clicking on their names rather than creating more buttons.
The interactive candidates list will eventually behave as follows:
- When clicked, the candidate's name will change color and will appear in the Crew list.
- If a candidate is already part of the crew, clicking their name again in the Candidates list will remove them from the crew.
- When the mouse pointer hovers over an astronaut's name in the Crew list, their photo appears below the list. When the pointer leaves their name, their photo disappears.
- When the crew size reaches 3 members, the heading changes to Crew Full and clicking on more candidate names will not do anything.
The following sections will guide you through completing Part 2.
220.127.116.11. Code the
crew.component.ts and create the
- It should take a candidate object as a parameter.
- It should check if the candidate is already part of the crew.
- If the crew size is less than 3 AND the candidate is not part of the crew,
then their data should be added to the
- If the candidate is already part of the crew, then their data should be
removed from the
18.104.22.168. Update the Candidates List¶
crew.component.css and do the following:
- Add a
(click)event to each
lielement that calls the
addCrewMemberfunction and passes the selected candidate as the argument.
- Add a
selectedclass in the CSS file that styles the text to be a different color from the other list items.
[class.selected]to a boolean statement that will change the color of a candidate's name when they are selected or de-selected for the crew.
22.214.171.124. Update the Crew List¶
- When the crew size reaches 3, the heading should change to "Crew Full".
(mouseout)events to the
litags to determine if the mouse pointer is currently over a name in the Crew list.
- If a crew member is selected by moving the mouse over their name:
- Use an
*ngIfto display a photo of the astronaut below the crew list.
- Bind the
.photoproperty of the astronaut to the
- When the mouse pointer moves off of a name, the photo should disappear.
- Use an
126.96.36.199. Status Check¶
At this point, the crew component should behave something like:
Before moving on to the bonus missions, be sure to commit and push your work.
31.7.4. Bonus Missions¶
To boost your Angular skills, add one or more of the following features:
- Update the CSS files to make the web page look a little less bland.
- Don't allow more than two of the same item in the cargo hold.
- Allow the user to remove individual items from the hold.
- Complete the
experimentscomponent with features similar to the
- Add other data to the astronaut objects, and center this data below the crew photo.
31.7.5. Sanity Check¶
Complete code for this studio can be found in the
of the repository.