Sunday, August 13, 2017

Two-thirds of the way through a series of online trainings on Angular 4, I offer more stolen notes.

  1. {{ whatever | uppercase }} and {{ whatever | date }} are both examples of built-in pipes.
  2. {{ whatever | date:'fullDate' | uppercase }} shows off both a shortcut for the date pipe (you may hand in a specific format too) and also chaining pipes.
  3. Go to https://angular.io/api and search for "Pipe" to get a list of the built-in pipes.
  4. let x = whatever.substr(0, 13); is a trick for capturing a substring.
  5. *ngFor="let foo of foos | disturb" is of course an example of using a pipe against an array. Such a pipe will take in an array, mess with it, and then hand out an array.
  6. Setting pure to false in our disturb pipe like so:
    @Pipe({
       name: 'disturb',
       pure: false
    })

    ...will allow for the pipe to recalculate the array everytime the array is updated which comes with a performance hit. This is not the default behavior.
  7. Guess what is at: https://firebase.google.com ??? That's correct. Firebase is there. Walk through a little wizard to set up a project and then afterwards at Database > Rules set read and write to true and publish. At Database > Data you will see the URL for your project. Hit it with data.json appended to the end after the last slash (appName.json for the Firebase application name in lieu of data) when doing a GET in the Angular 4 stuff.
  8. .map(
       (stuff: Response) => {
          const midstreamStuff = response.json();
          for (const midstreamDatum of midstreamStuff) {
             midstreamDatum.numericThing = midstreamDatum.numericThing + 13;
          }
          return midstreamStuff;
       }
    );
    is an example of transforming a collection with .map
  9. When asynchronously handling an Observable in a failure scenario...
    .catch(
       (failure: Response) => {
          return Observable.throw(failure);
       }
    );

    ...this might be chained to the end of a .map. Another shape this might take is:
    .catch(
       (failure: Response) => {
          return Observable.throw('Yikes guys!');
       }
    );

No comments:

Post a Comment