In this studio, you must combine data-binding and attribute directives to dynamically change the appearance or behavior of HTML elements.
This studio uses the same mission planner repository as Angular studio part 2. There is no need to fork and clone new starter code.
git statusto see if you have any uncommitted work. If you do, resolve it.
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.
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:
cargoHoldarray and updates the
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.
equipment.component.ts and create the
cargoMassvariable by the mass of the new equipment.
falsedepending on whether
cargoMassis within 200 kg of
equipment.component.css and do the
nearMaxMassclass in the CSS file that styles the text to be:
[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
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.
At this point, the equipment component should behave something like:
Before moving on to part 2, be sure to commit and push your work.
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:
The following sections will guide you through completing Part 2.
crew.component.ts and create the
crew.component.css and do the following:
(click)event to each
lielement that calls the
addCrewMemberfunction and passes the selected candidate as the argument.
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.
(mouseout)events to the
litags to determine if the mouse pointer is currently over a name in the Crew list.
*ngIfto display a photo of the astronaut below the crew list.
.photoproperty of the astronaut to the
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.
To boost your Angular skills, add one or more of the following features:
experimentscomponent with features similar to the
Complete code for this studio can be found in the
of the repository.