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:

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

Back to the exercises

New Requirements

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

    app.component.ts:

    15
    takeOffEnabled: boolean = true;
    
  1. Use *ngIf and takeOffEnabled to determine which movement buttons are disabled.

    app.component.html:

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

Back to the exercises