Exercise Solutions: Angular, Lesson 2¶

Candidates Column¶

1. Use *ngFor in the <li> tag to loop over the candidates array and display each name in an ordered list.

   src/app/candidates/candidates.component.html:

   1<div class="candidates col-3">
   2   <h2>Candidates</h2>
   3   <ol>
   4      <li *ngFor="let candidate of candidates" (click)="selected = candidate">{{candidate.name}}</li>
   5   </ol>
   6</div>
   

Back to the exercises

Candidate Data Column¶

1. Add labels in the html for a candidate's name, age, mass, and sidekick data.

   src/app/candidates/candidates.component.html:

   1<div class="data col-3">
   2   <h2>Candidate Data</h2>
   3   <p>
   4      Name: <br>
   5      Age: <br>
   6      Mass: <br>
   7      Sidekick:
   8   </p>
   9</div>
   

   Back to the exercises

3. Use *ngIf to check if a candidate has been selected. If so, display the labels and the data.

   src/app/candidates/candidates.component.html:

   1<div class="data col-3">
   2   <h2>Candidate Data</h2>
   3   <p *ngIf="selected">
   4      Name: {{selected.name}} <br>
   5      Age: {{selected.data.age}} <br>
   6      Mass: {{selected.data.mass}} <br>
   7      Sidekick: {{selected.data.sidekick}}
   8   </p>
   9</div>
   

   Back to the exercises

Sidekick Image Column¶

1. In the <img> tag, use *ngIf to check if a candidate has been selected.

   src/app/candidates/candidates.component.html:

   1<div class="centered col-3">
   2   <h2>Sidekick</h2>
   3   <div *ngIf = "selected">
   4      <img src="{{placeholder}}" alt="Oops! Missing photo!"/>
   5   </div>
   6</div>
   

Back to the exercises

Selected Crew Column¶

1. Start an addToCrew function that takes an object as a parameter.

   src/app/candidates/candidates.component.ts:

   1addToCrew(person: object) {
   2   //TODO: complete the function!
   3}
   

   Back to the exercises

3. Add a "Send on Mission" button next to the "Clear Data & Image" button.

   src/app/candidates/candidates.component.html:

   1<div class="centered">
   2   <button> Clear Data and Image </button>
   3   <button> Send on Mission </button>
   4</div>
   

   Back to the exercises

5. Under the "Selected Crew" section, use *ngFor to display each crew member's name.

   src/app/candidates/candidates.component.html:

   1<h2>Selected Crew</h2>
   2<ul>
   3   <li *ngFor = "let member of crew">{{member.name}}</li>
   4</ul>
   

   Back to the exercises

7. Use *ngIf to conditionally show the "Clear Crew List" button when the crew array contains data.

   src/app/candidates/candidates.component.html:

   <button *ngIf = "crew.length !== 0">Clear Crew List</button>
   

   Back to the exercises