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
2
3
4
5
6
    <div class="candidates col-3">
   <h2>Candidates</h2>
   <ol>
      <li *ngFor="let candidate of candidates" (click)="selected = candidate">{{candidate.name}}</li>
   </ol>
</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
2
3
4
5
6
7
8
9
    <div class="data col-3">
   <h2>Candidate Data</h2>
   <p>
      Name: <br>
      Age: <br>
      Mass: <br>
      Sidekick:
   </p>
</div>

    Back to the exercises

  1. 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
2
3
4
5
6
7
8
9
    <div class="data col-3">
   <h2>Candidate Data</h2>
   <p *ngIf="selected">
      Name: {{selected.name}} <br>
      Age: {{selected.data.age}} <br>
      Mass: {{selected.data.mass}} <br>
      Sidekick: {{selected.data.sidekick}}
   </p>
</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
2
3
4
5
6
    <div class="centered col-3">
   <h2>Sidekick</h2>
   <div *ngIf = "selected">
      <img src="{{placeholder}}" alt="Oops! Missing photo!"/>
   </div>
</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:

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

    Back to the exercises

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

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

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

    Back to the exercises

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

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

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

    Back to the exercises

  1. 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