An Angular app is nothing but a hierarchy of components, similar to a tree structure. As of now, 7 Minute Workout has two components, the root component, AppComponent, and its child, WorkoutRunnerComponent, in line with the HTML component layout, which now looks as follows:

<abe-root>
    ...
    <abe-workout-runner>...</abe-workout-runner>
</abe-root>

Run the app and do a view source to verify this hierarchy. As we all more components to implement new features in the application this component tree grows and branches out.

We are going to add two subcomponents to WorkoutRunnerComponent, one each to support the exercise description and exercise videos. While we could have added some HTML directly to the WorkoutRunnerComponent view, what we are hoping here is to learn a bit more about cross-component communication. Let's start with adding the description panel on the left and understand how a component can accept inputs.

ng generate component exercise-description -is

import { Component, OnInit, Input } from '@angular/core';
...
export class ExerciseDescriptionComponent { 
  @Input() description: string; 
  @Input() steps: string; 
} 

<div class="card-body">
    <div class="card-text">{{description}}</div>
</div> 
...  
<div class="card-text">
{{steps}}
</div> 

<div class="row">
    <div id="description-panel" class="col-sm-3">
        <abe-exercise-description 
            [description]="currentExercise.exercise.description"
            [steps]="currentExercise.exercise.procedure"></abe-exercise-description>
   </div>
   <div id="exercise-pane" class="col-sm-6">  
   ... 

ng generate component video-player -is

export class VideoPlayerComponent implements OnInit, OnChanges { 
  private youtubeUrlPrefix = '//www.youtube.com/embed/'; 
 
  @Input() videos: Array<string>; 
  safeVideoUrls: Array<SafeResourceUrl>; 
 
  constructor(private sanitizer: DomSanitizationService) { } 
 
  ngOnChanges() { 
    this.safeVideoUrls = this.videos ? 
        this.videos 
            .map(v => this.sanitizer.bypassSecurityTrustResourceUrl(this.youtubeUrlPrefix + v)) 
    : this.videos; 
  } 
} 

<div *ngFor="let video of safeVideoUrls"> 
   <iframe width="198" height="132" [src]="video" frameborder="0" allowfullscreen></iframe> 
</div> 

<div id="video-panel" class="col-sm-3">
    <abe-video-player [videos]="currentExercise.exercise.videos"></abe-video-player>
</div> 

<div *ngFor="let video of safeVideoUrls"> 
   <iframe width="198" height="132" [src]="video" frameborder="0" allowfullscreen></iframe> 
</div>

<div *ngFor="let video of videos; let i=index"> 
     <div>This is video - {{i}}</div> 
</div> 

<div *ngFor="let video of videos; let i=index; let f=first"> 
     <div [class.special]="f">This is video - {{i}}</div> 
</div> 

<user-profile *ngFor="let userDetail of users" [user]= "userDetail"></user-profile>

<div *ngFor="let video of safeVideoUrls"> 
   <iframe width="198" height="132" [src]="video" frameborder="0" allowfullscreen></iframe> 
</div>

<ng-template ngFor let-video [ngForOf]="safeVideoUrls">  
    <div>
        <iframe width="198" height="132"  [src]="video" ...></iframe>  
    </div> 
</ng-template>  

trackByUserId(index: number, hero: User) { return user.id; } 

<div *ngFor="let user of users; trackBy: trackByUserId">{{user.name}}</div> 

<div *ngFor="let video of videos"> 
    <iframe width="198" height="132"  
        [src]="'//www.youtube.com/embed/' + video"  frameborder="0" allowfullscreen></iframe> 
</div>

this.htmlContent = '<span>HTML content.</span>'    // Component

<div [innerHTML]="htmlContent"> <!-- View -->

this.videos.map(v => this.sanitizer.bypassSecurityTrustResourceUrl(this.youtubeUrlPrefix + v)) 

One of the sore points in the current app is the formatting of the exercise steps. It's a bit difficult to read these steps.

The steps should either have a line break (<br>) or be formatted as an HTML list for easy readability. This seems to be a straightforward task, and we can just go ahead and change the data that is bound to the step interpolation, or write a pipe that can add some HTML formatting using the line delimiting convention (.). For a quick verification, let's update the first exercise steps in workout-runner.component.ts by adding a break (<br>) after each line:

`Assume an erect position, with feet together and arms at your side. <br> 
 Slightly bend your knees, and propel yourself a few inches into the air. <br> 
 While in air, bring your legs out to the side about shoulder width or slightly wider. <br> 
 ... 

As the workout restarts, look at the first exercise steps. The output does not match our expectations, as shown here:

The break tags were literally rendered in the browser. Angular did not render the interpolation as HTML; instead, it escaped the HTML characters, and we know why, security!

How to fix it? Easy! Replace the interpolation with the property binding to bind step data to the element's innerHTML property (in exercise-description.html), and you are done!

<div class="card-text" [innerHTML]="steps"> 

Refresh the workout page to confirm.

Time for another enhancement! It's time to learn about Angular pipes.

It will be nice if we can tell the user the time left to complete the workout and not just the duration of the exercise in progress. We can add a countdown timer somewhere in the exercise pane to show the overall time remaining.

The approach that we are going to take here is to define a component property called workoutTimeRemaining. This property will be initialized with the total time at the start of the workout and will reduce with every passing second until it reaches zero. Since workoutTimeRemaining is a numeric value, but we want to display a timer in the hh:mm:ss format, we need to make a conversion between the seconds data and the time format. Angular pipes are a great option for implementing such a feature.

The primary aim of a pipe is to format the data displayed in the view. Pipes allow us to package this content transformation logic (formatting) as a reusable element. The framework itself comes with multiple predefined pipes, such as date, currency, lowercase, uppercase, slice, and others.

This is how we use a pipe with a view:

{{expression | pipeName:inputParam1}} 

An expression is followed by the pipe symbol (|), which is followed by the pipe name and then an optional parameter (inputParam1) separated by a colon (:). If the pipe takes multiple inputs, they can be placed one after another separated by a colon, such as the inbuilt slice pipe, which can slice an array or string:

{{fullName | slice:0:20}} //renders first 20 characters  

The parameter passed to the pipe can be a constant or a component property, which implies we can use template expressions with pipe parameter. See the following example:

{{fullName | slice:0:truncateAt}} //renders based on value truncateAt 

Here are some examples of the use of the date pipe, as described in the Angular date documentation. Assume that dateObj is initialized to June 15, 2015 21:43:11 and locale is en-US:

{{ dateObj | date }}               // output is 'Jun 15, 2015        ' 
{{ dateObj | date:'medium' }}      // output is 'Jun 15, 2015, 9:43:11 PM' 
{{ dateObj | date:'shortTime' }}   // output is '9:43 PM            ' 
{{ dateObj | date:'mmss' }}        // output is '43:11'     

Some of the most commonly used pipes are the following:

    {{14.22|currency:"USD" }} <!-Renders USD 14.22 --> 
    {{14.22|currency:"USD":'symbol'}}  <!-Renders $14.22 -->

We are not going to cover the preceding pipes in detail. From a development perspective, as long as we know what pipes are there and what they are useful for, we can always refer to the platform documentation for exact usage instructions.

{{fullName | slice:0:20 | uppercase}} 

SecondsToTimePipe, as the name suggests, should convert a numeric value into the hh:mm:ss format.

Create a folder shared in the workout-runner folder and from the shared folder invoke this CLI command to generate the pipe boilerplate:

ng generate pipe seconds-to-time

Copy the following transform function implementation into seconds-to-time.pipe.ts(the definition can also be downloaded from the Git branch checkpoint.2.4 on the GitHub site at http://bit.ly/nng6be-2-4-seconds-to-time-pipe-ts):

export class SecondsToTimePipe implements PipeTransform { 
  transform(value: number): any { 
    if (!isNaN(value)) { 
      const hours = Math.floor(value / 3600);
      const minutes = Math.floor((value - (hours * 3600)) / 60);
      const seconds = value - (hours * 3600) - (minutes * 60);

      return ('0' + hours).substr(-2) + ':'
        + ('0' + minutes).substr(-2) + ':'
        + ('0' + seconds).substr(-2);
    } 
    return; 
  } 
} 

In an Angular pipe, the implementation logic goes into the transform function. Defined as part of the PipeTransform interface, the preceding transform function transforms the input seconds value into an hh:mm:ss string. The first parameter to the transform function is the pipe input. The subsequent parameters, if provided, are the arguments to the pipe, passed using a colon separator (pipe:argument1:arugment2..) from the view.

For SecondsToTimePipe, while Angular CLI generates a boilerplate argument (args?:any), we do not make use of any pipe argument as the implementation does not require it.

The pipe implementation is quite straightforward, as we convert seconds into hours, minutes, and seconds. Then, we concatenate the result into a string value and return the value. The addition of 0 on the left for each of the hours, minutes, and seconds variables is done to format the value with a leading 0 in case the calculated value for hours, minutes, or seconds is less than 10.

The pipe that we just created is just a standard TypeScript class. It's the Pipe decorator (@Pipe) that instructs Angular to treat this class as a pipe:

@Pipe({ 
  name: 'secondsToTime' 
}) 

The pipe definition is complete, but to use the pipe in WorkoutRunnerComponent the pipe has to be declared on WorkoutRunnerModule. Angular CLI has already done this for us as part of the boilerplate generation (see the declaration section in workout-runner.module.ts).

Now we just need to add the pipe in the view. Update workout-runner.component.html by adding the highlighted fragment:

<div class="exercise-pane" class="col-sm-6"> 
    <h4 class="text-center">Workout Remaining - {{workoutTimeRemaining | secondsToTime}}</h4>
    <h1 class="text-center">{{currentExercise.exercise.title}}</h1> 

Surprisingly, the implementation is still not complete! There is one more step left. We have a pipe definition, and we have referenced it in the view, but workoutTimeRemaining needs to update with each passing second for SecondsToTimePipe to be effective.

We have already initialized WorkoutRunnerComponent's workoutTimeRemaining property in the start function with the total workout time:

start() { 
    this.workoutTimeRemaining = this.workoutPlan.totalWorkoutDuration(); 
    ... 
} 

Now the question is: how to update the workoutTimeRemaining variable with each passing second? Remember that we already have a setInterval set up that updates exerciseRunningDuration. While we can write another setInterval implementation for workoutTimeRemaining, it will be better if a single setInterval setup can take care of both the requirements.

Add a function called startExerciseTimeTracking to WorkoutRunnerComponent; it looks as follows:

startExerciseTimeTracking() {
    this.exerciseTrackingInterval = window.setInterval(() => {
      if (this.exerciseRunningDuration >= this.currentExercise.duration) {
        clearInterval(this.exerciseTrackingInterval);
        const next: ExercisePlan = this.getNextExercise();
        if (next) {
          if (next !== this.restExercise) {
            this.currentExerciseIndex++;
          }
          this.startExercise(next);
        }
        else {
          console.log('Workout complete!');
        }
        return;
      }
      ++this.exerciseRunningDuration;
      --this.workoutTimeRemaining;
    }, 1000);
  }  

As you can see, the primary purpose of the function is to track the exercise progress and flip the exercise once it is complete. However, it also tracks workoutTimeRemaining (it decrements this counter). The first if condition setup just makes sure that we clear the timer once all the exercises are done. The inner if conditions are used to keep currentExerciseIndex in sync with the running exercise.

This function uses a numeric instance variable called exerciseTrackingInterval. Add it to the class declaration section. We are going to use this variable later to implement an exercise pausing behavior.

Remove the complete setInterval setup from startExercise and replace it with a call to this.startExerciseTimeTracking();. We are all set to test our implementation. If required, refresh the browser and verify the implementation:

The next section is about another inbuilt Angular directive, ngIf, and another small enhancement.

It will be nice for the user to be told what the next exercise is during the short rest period between exercises. This will help them prepare for the next exercise. So let's add it.

To implement this feature, we can simply output the title of the next exercise from the workoutPlan.exercises array. We show the title next to the Time Remaining countdown section.

Change the workout div (class="exercise-pane") to include the highlighted content, and remove existing Time Remainingh1:

<div class="exercise-pane"> 
<!-- Exiting html --> 
   <div class="progress time-progress"> 
       <!-- Exiting html --> 
   </div> 
<div class="row">
      <h4 class="col-sm-6 text-left">Time Remaining:
        <strong>{{currentExercise.duration-exerciseRunningDuration}}</strong>
      </h4>
      <h4 class="col-sm-6 text-right" *ngIf="currentExercise.exercise.name=='rest'">Next up:
        <strong>{{workoutPlan.exercises[currentExerciseIndex + 1].exercise.title}}</strong>
      </h4>
    </div>
</div> 

We wrap the existing Time Remaining h1 and add another h3 tag to show the next exercise inside a new div with some style updates. Also, there is a new directive, ngIf, in the second h3. The * prefix implies that it belongs to the same set of directives that ngFor belongs: structural directives. Let's talk a bit about ngIf.

The ngIf directive is used to add or remove a specific section of the DOM based on whether the expression provided to it returns true or false. The DOM element is added when the expression evaluates to true and is destroyed otherwise. Isolate the ngIf declaration from the preceding view:

ngIf="currentExercise.details.name=='rest'" 

The directive expression checks whether we are currently in the rest phase and accordingly shows or hides the linked h3.

Also in the same h3, we have an interpolation that shows the name of the exercise from the workoutPlan.exercises array.

A word of caution here: ngIf adds and destroys the DOM element, and hence it is not similar to the visibility constructs that we employed to show and hide elements. While the end result of style, display:none is the same as that of ngIf, the mechanism is entirely different:

<div [style.display]="isAdmin" ? 'block' : 'none'">Welcome Admin</div> 

Versus this line:

<div *ngIf="isAdmin" ? 'block' : 'none'">Welcome Admin</div> 

With ngIf, whenever the expression changes from false to true, a complete re-initialization of the content occurs. Recursively, new elements/components are created and data binding is set up, starting from the parent down to the children. The reverse happens when the expression changes from true to false: all of this is destroyed. Therefore, using ngIf can sometimes become an expensive operation if it wraps a large chunk of content and the expression attached to it changes very often. But otherwise, wrapping a view in ngIf is more performant than using CSS/style-based show or hide, as neither the DOM is created nor the data binding expressions are set up when the ngIf expression evaluates to false.

New version of Angular support branching constructs too. This allows us to implement the if then else flow in the view HTML. The following sample has been lifted directly from the platform documentation of ngIf:

<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>

The else binding points to a ng-template with template variable #elseBlock.

There is another directive that belongs in this league: ngSwitch. When defined on the parent HTML, it can swap the child HTML elements based on the ngSwitch expression. Consider this example:

<div id="parent" [ngSwitch] ="userType"> 
<div *ngSwitchCase="'admin'">I am the Admin!</div> 
<div *ngSwitchCase="'powerUser'">I am the Power User!</div> 
<div *ngSwitchDefault>I am a normal user!</div> 
</div> 

We bind the userType expression to ngSwitch. Based on the value of userType (admin, powerUser, or any other userType), one of the inner div elements will be rendered. The ngSwitchDefault directive is a wildcard match/fallback match, and it gets rendered when userType is neither admin nor powerUser.

If you have not realized it yet, note that there are three directives working together here to achieve switch-case-like behavior:

Coming back to our next exercise implementation, we are ready to verify the implementation, start the app, and wait for the rest period. There should be a mention of the next exercise during the rest phase, as shown here:

The app is shaping up well. If you have used the app and done some physical workouts along with it, you will be missing the exercise pause functionality badly. The workout just does not stop until it reaches the end. We need to fix this behavior.

To pause an exercise, we need to stop the timer. We also need to add a button somewhere in the view that allows us to pause and resume the workout. We plan to do this by drawing a button overlay over the exercise area in the center of the page. When clicked on, it will toggle the exercise state between paused and running. We will also add keyboard support to pause and resume the workout using the key binding p or P. Let's update the component.

Update the WorkoutRunnerComponent class, add these three functions, and add a declaration for the workoutPaused variable:

workoutPaused: boolean; 
...
pause() { 
    clearInterval(this.exerciseTrackingInterval); 
    this.workoutPaused = true; 
} 
 
resume() { 
    this.startExerciseTimeTracking(); 
    this.workoutPaused = false; 
} 
 
pauseResumeToggle() { 
    if (this.workoutPaused) { this.resume();    } 
    else {      this.pause();    } 
} 

The implementation for pausing is simple. The first thing we do is cancel the existing setInterval setup by calling clearInterval(this.exerciseTrackingInterval);. While resuming, we again call startExerciseTimeTracking, which again starts tracking the time from where we left off.

Now we just need to invoke the pauseResumeToggle function for the view. Add the following content to workout-runner.html:

<div id="exercise-pane" class="col-sm-6"> 
    <div id="pause-overlay" (click)="pauseResumeToggle()"><span class="pause absolute-center" 
            [ngClass]="{'ion-md-pause' : !workoutPaused, 'ion-md-play' : workoutPaused}">
        </span>
</div> 
    <div class="row workout-content"> 

The click event handler on the div toggles the workout running state, and the ngClass directive is used to toggle the class between ion-md-pause and ion-md-play- standard Angular stuff. What is missing now is the ability to pause and resume on a P key press.

One approach could be to apply a keyup event handler on the div:

 <div id="pause-overlay" (keyup)= "onKeyPressed($event)"> 

But there are some shortcomings to this approach:

There is a better way to implement this; attach the event handler to the global window event keyup. This is how the event binding should be applied on the div:

<div id="pause-overlay" (window:keyup)= "onKeyPressed($event)">

Make note of the special window: prefix before the keyup event. We can use this syntax to attach events to any global object, such as the document. A handy and very powerful feature of Angular binding infrastructure! The onKeyPressed event handler needs to be added to WorkoutRunnerComponent. Add this function to the class:

onKeyPressed(event: KeyboardEvent) {
    if (event.which === 80 || event.which === 112) {
      this.pauseResumeToggle();
    }
  }

The $event object is the standard DOM event object that Angular makes available for manipulation. Since this is a keyboard event, the specialized class is KeyboardEvent. The which property is matched to ASCII values of p or P. Refresh the page and you should see the play/pause icon when your mouse hovers over the exercise image, as follows:

While we are on the topic of event binding, it would be a good opportunity to explore Angular's event binding infrastructure

Angular event binding allows a component to communicate with its parent through events.

If we look back at the app implementation, what we have encountered thus far are the property/attribute bindings. Such bindings allow a component/element to take inputs from the outside world. The data flows into the component.

Event bindings are the reverse of property bindings. They allow a component/element to inform the outside world about any state change.

As we saw in the pause/resume implementation, event binding employs round brackets (()) to specify the target event:

<div id="pause-overlay" (click)="pauseResumeToggle()"> 

This attaches a click event handler to the div that invokes the expression pauseResumeToggle() when the div is clicked.

Angular supports all types of events. Events related to keyboard inputs, mouse movements, button clicks, and touches. The framework even allows us to define our own event for the components we create, such as:

<workout-runner (paused)= "stopAudio()"></workout-runner> 

It is expected that events have side effects; in other words, an event handler may change the state of the component, which in turn may trigger a chain reaction in which multiple components react to the state change and change their own state. This is unlike a property binding expression, which should be side-effect-free. Even in our implementation, clicking on the div element toggles the exercise run state.

<div id="parent " (click)="doWork($event)"> Try 
  <div id="child ">me!</div> 
</div> 

<div id="parent" (click)="doWork($event) || true"> 

Two-way binding helps us keep the model and view in sync. Changes to the model update the view and changes to the view update the model. The obvious area where two-way binding is applicable is form input. Let's look at a simple example:

<input [(ngModel)]="workout.name"> 

The ngModel directive here sets a two-way binding between the input's value property and the workout.name property on the underlying component. Anything that the user enters in the preceding  input is synced with workout.name, and any changes to workout.name are reflected back on the preceding input.

Interestingly, we can achieve the same result without using the ngModel directive too, by combining both property and event binding syntax. Consider the next example; it works in the same way as input before:

<input [value]="workout.name"  
    (input)="workout.name=$event.target.value" > 

There is a property binding set up on the value property and an event binding set up on the input event that make the bidirectional sync work.

We will get into more details on two-way binding in Chapter 2, Personal Trainer, where we build our own custom workouts.

We have created a diagram that summarizes the data flow patterns for all the bindings that we have discussed thus far. Here is a handy diagram to help you memorize each of the binding constructs and how data flows:

We now have a fully functional 7 Minute Workout, with some bells and whistles too, and hopefully you had fun creating the app. It's time to conclude the chapter and summarize the lessons.