Building TrackList component

The track list should be a listing of all the recorded tracks. Each row in the list should provide a single record button to re-record in addition to a name label for displaying the title provided by the user. It should also provide a switch to allow the user to solo just that particular track.

We can inject PlayerService and declare it public to allow us to bind directly to the service's tracks collection.

We can also mock out some of our bindings to get things rolling like the record action. For now, let's just allow a track to be passed in and let's print out an inspection of that track via LogService.

Let's start by creating app/modules/player/components/track-list/ track-list.component.ts (with a matching .html template):

// angular
import { Component, Input } from '@angular/core';

// app
import { ITrack } from '../../../core/models';
import { LogService } from '../../../core/services';
import { PlayerService } from '../../services/player.service';

@Component({
 moduleId: module.id,
 selector: 'track-list',
 templateUrl: 'track-list.component.html'
})
export class TrackListComponent {
 
 constructor(
   private logService: LogService,
   public playerService: PlayerService
 ) { }

 public record(track: ITrack) {
   this.logService.inspect(track);
 }
}

For the view template track-list.component.html, we are going to employ the powerful ListView component. This widget represents the native UITableView (https://developer.apple.com/reference/uikit/uitableview) on iOS and the native ListView (https://developer.android.com/guide/topics/ui/layout/listview.html) on Android, offering 60 fps virtual scrolling with reused rows. Its performance is unparalleled on mobile devices:

<ListView [items]="playerService.tracks">
  <ng-template let-track="item">
    <GridLayout rows="auto" columns="75,*,100">
      <Button text="Record" (tap)="record(track)" 
          row="0" col="0"></Button>
      <Label [text]="track.name" row="0" col="1"></Label>
      <Switch [checked]="track.solo" row="0" col="2">
      </Switch>
    </GridLayout>
  </ng-template>
</ListView>

There's a lot going on with this view template, so let's inspect it a bit.

Since we made playerService public upon injection into our Component's constructor, we can bind directly to its tracks via the ListView items' attribute using standard Angular binding syntax expressed as [items]. This will be the collection our list will iterate on.

The template node inside allows us to encapsulate how each row of our list will be laid out. It also allows us to declare a variable name (let-track) for use as our iterator reference. 

We start with a GridLayout, since each row will contain a Record button (to allow a track to be re-recorded), to which we will assign a width of 75. This button will be bound to the tap event, which will activate a recording session if the user is authenticated.

Then, we will have a Label to display a user-provided name for the track, which we will assign * to ensure it expands to fill the horizontal space in between our left-hand and right-hand columns. We use the text attribute to bind to track.name.

Lastly, we will use switch to allow the user to toggle soloing the track in the mix. This provides the checked attribute to allow us to bind our track.solo property to.