Angular Days

Shufflizer has been updated. There are no new features.

This version of Shufflizer was created with Angular 6. Some obsolete sections of code have been removed. All layouts have been changed from old style html tables to Angular flex-layout (previously it was a mish-mash of these two approaches).

Known issue

Playlist selection does not work on Safari/iPad when the user has enough playlists that the dropdown picklist needs to scroll. This seems to me to be an Angular Material bug. I am considering a more luxury playlist selection interface, and am motivated to make it a priority since it would address this known issue.

One thing that was bugging me in my flex-layout performance solution was how I defined the global constants for my three layouts PHONE, TABLET, and HD. As always with constants, I’m just trying to make the code clearer to the reader. There is nothing more to this than PHONE is 1, TABLET is 2, and HD is 3.

We are not able to use the const declaration inside of class definitions.

const sizeNum = {PHONE:1,TABLET:2,HD:3}

Attempting this results in:

 error TS1248: A class member cannot have the 'const' keyword.

We could define the constants outside of the class by putting the line of code just above the class, but this isn’t good encapsulation, and code fragments in the html template cannot see the constants. With the constants defined outside of the class, something like this is impossible:

<div *ngIf="activeSize()>sizeNum.PHONE">

Because of these issues, I resorted to a plain old hardcoded object, defined as usual inside of the class:

sizeNum: Object = {PHONE:1,TABLET:2,HD:3}

This doesn’t set up true constants. It is possible to programmatically change the sizeNum object later (eg. sizeNum[‘PHONE’]=5). Also, they are not global, and so I wound up having to pass the sizeNum object as a parameter to other components. Awkward.

There is a better way.

Angular dependancy injection

I am accustomed to using dependancy injection for full fledged classes, but it also can inject simpler objects. This works nicely for global constants. Set them up in app.module.ts:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { PlaylstService } from './playlst.service';
...
const sizeNum = {PHONE:1,TABLET:2,HD:3}
@NgModule({
  declarations: [
    AppComponent
    ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
...
    ],
  providers: [
    PlaylstService,
    { provide:'SizeConstants',useValue:sizeNum }
    ],
  bootstrap: [AppComponent]
  })
export class AppModule { }

Put them into the constructor in desired components:

import { Component,
         Inject } from '@angular/core';
import { HttpClient,
         HttpHeaders } from '@angular/common/http';
...
import { PlaylstService } from './playlst.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  })

export class AppComponent {

  accessToken: string;      // access token for the session.  we grep this outta the url
...
  constructor (
    private http: HttpClient,
    private plistSvc: PlaylstService,
    @Inject('SizeConstants') public szNum: any
    ) {
    // initializations
    try {this.accessToken=window.location.hash.match(/^#access_token=([^&]+)/)[1];}
    catch (ERR) {this.accessToken='BAD';}
...

Make use of them, no problem even in html code fragments:

<div *ngIf="activeSize()>szNum.PHONE">

In web app development, animation is automation of the position and display characteristics of DOM elements.  Angular provides its own programming interface for animations, insulating the developer from browser compatibility concerns.  The developer defines styles for different states a DOM element can take on, and defines transitions for how to change from one state to another.  Let’s first look at a non-animated example, and then animate it.

Hard cut

Say we have component with a variable named mood.  Sometimes it holds the value “friendly” and sometimes it holds the value “mad.”  In the component’s html template we display the value, but additionally we want a red background if mad.  So far none of this requires Angular animation.  We can use stock Angular to set the background color based on the mood value.

<p [style.background-color]=”mood==’mad’?’red’:’green'”>{{mood}}</p>

mad

This creates what Rachel Nabors calls a hard cut.  This term comes from video/film editing and means there is no transition from one scene to the next.  The first scene ends and the next scene appears abruptly.  In our case, the moment the value for mood changes, the background color instantly changes.  The text does too, but for simplicity let’s just focus our work on the background color.

Crossfade

We can introduce Angular animation to create a transition instead of a hard cut.  Say we want the colors to slowly transition for three seconds when the mood changes state, a rudimentary animation known in video/film editing as a crossfade.

Instead of directly setting the style for mad, we define an animation trigger.  In the trigger we define the style for mad (red) and the style for friendly (green), and how to animate the transition (take a leisurely 3 seconds to change color instead of doing it instantly).  I have named the animation trigger moodAni.

<p [@moodAni]=’mood’>{{mood}}</p>

mad

In Angular Typescript, in addition to the usual @Component selector and template, we define animations.  The <=> means do the transition when going either way, from mad to friendly or from friendly to mad:

@Component({
  selector: 'app-root',
  template: '<p [@moodAni]="mood">{{mood}}</p>',
  animations: [ trigger('moodAni',
    [ state('mad',style({backgroundColor:'red'})),
      state('friendly',style({backgroundColor:'green'})),
      transition('friendly <=> mad',animate('3s')) ]
    ) ]
  })

Crossfade?

The term “crossfade” isn’t in the code.  Any transition for an element that isn’t changing size or position is a crossfade.  More generally, what the Angular animation module does is known as tweening.  We define states or keyframes and then specify how long to take between each.  This is quite a bit like CSS transitions.  Indeed, you might be wondering how I managed to get Angular examples working directly inside this blog.  I didn’t.  They are pure CSS equivalents.

Nice corral you got there, Angular

If you haven’t made the plunge yet into Angular animations, you might be wondering if you’d be better off sticking with CSS transitions.  It is possible.  It’s what I was doing before I discovered Angular animations.  I like the Angular way better.  I don’t have to worry about browser differences, and the coding for animation is corralled into the component’s animations specification.

But some horses can get through that fence

Notice in the crossfade example above that if you click the button a second time quickly, the new animation immediately takes over.  In Shufflizer I have a case where this isn’t desirable — the download progress spinner.  For small playlists sometimes it would not fade smoothly in and out.  When the download was done before the fade-in was done, the progress spinner would cut over to the fade-out animation.  Nothing was technically wrong, but it was strange and unpolished.  Here is how I solved it.

Angular provides an event that fires at the beginning and the end of an animation.  I use this event to prevent shutting the progress spinner while the fade-in animation is still running.

<div class="dimmed"
  style="text-align:center;padding-top:100px;padding-left:20%;padding-right:20%" 
  *ngIf="dimSet()" 
  [@dimAnim] 
  (@dimAnim.start)="setAnim($event)" 
  (@dimAnim.done)="setAnim($event)">
  <mat-card class="webLandscape">
    <mat-card-content>
      <h2 class="example-h2">{{plLoadingDirection()}}loading...   {{progressPcnt()}}%</h2>
      <mat-progress-spinner mode="determinate" [value]="progressPcnt()" style="margin-left:auto;margin-right:auto">
      </mat-progress-spinner>
    </mat-card-content>
  </mat-card>
</div>

The progress spinner renders when dimSet() is true.  setAnim simply stashes the event object into a variable so dimSet can use it.

It all comes down to the last line in dimSet.  Return true if a playlist is loading or if the fade-in animation is still running.

setAnim(ev): void {
  this.anim=ev;
  }

dimSet(): boolean {
  let animStillRunning=this.anim 
    && this.anim.triggerName == 'dimAnim' 
    && this.anim.totalTime > 1 
    && this.anim.phaseName == 'start' 
    && this.anim.fromState == 'void' ;
  return this.playlistService.plIsLoading 
    || animStillRunning;
  }

I found the names of the event attributes on the AnimationEvent documentation page.

So I like the animations “corral” but when we need to know the status of an animation, it’s not an animation we can just set into motion and forget about, then special coding for animations comes back into our TypeScript code.

For more information about Angular animation, see the Angular animations page. It’s where I learned most of what I know about Angular animations.