1. Contents
  2. Exercise Solutions
  3. Exercise Solutions: Angular, Lesson 3

Exercise Solutions: Angular, Lesson 3

Add Attribute Directives and Template Variables

Update the HTML

  1. Pass in the message variable to the app html:

    app.component.html:

    5<p>{{message}}</p>

  1. Use the height property to determine the displayed height:

    app.component.html:

    31<p>{{height}} km</p>

Back to the exercises

Add Events to Modify Directives

Control Buttons

  1. Add an event listener to the Take Off button.

    app.component.html:

    38<button (click) = "handleTakeOff()">Take Off</button>

Back to the exercises

Movement Buttons

  1. Label the img element so we can reference it:

    app.component.html:

    20<img #rocketImage src="assets/images/LaunchCode_rocketline_white.png" height = "75" width = "75" [style.left]="0" [style.bottom]="0"/>

  1. Complete the moveRocket() method in the app's component class to handle rocket movement to the right:

    app.component.ts:

    25moveRocket(rocketImage, direction) {
26   if (direction === 'right') {
27      let movement = parseInt(rocketImage.style.left) + 10 + 'px';
28      rocketImage.style.left = movement;
29      this.width = this.width + 10000;
30   }
31}

Back to the exercises

New Requirements

  1. Add a check for the take off status of the shuttle:

    app.component.ts:

    15takeOffEnabled: boolean = true;

  1. Use *ngIf and takeOffEnabled to determine which movement buttons are disabled.

    app.component.html:

    26<div *ngIf="!takeOffEnabled">
27   <button (click)="moveRocket(rocketImage, 'up')">Up</button>
28   <button (click)="moveRocket(rocketImage, 'down')">Down</button>
29   <button (click)="moveRocket(rocketImage, 'right')">Right</button>
30   <button (click)="moveRocket(rocketImage, 'left')">Left</button>
31</div>

Back to the exercises