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:

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

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

   app.component.html:

   <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:

   <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:

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

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

   app.component.ts:

   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:

   takeOffEnabled: boolean = true;
   

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

   app.component.html:

   <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