hbweb

Dear guys,

To become an expert in Angular, you should delve into these advanced topics:


* Angular Basics:
  Assume that you already know a bit about Angular / Angular CLI on how to setup a project with Angular from Terminal.
  A good place to start is reading Angular docs cover this topis. In this gist, we won't dive into this as it is out of scope.

hbweb

Setup Mac OS X

I've done the same process every couple years since 2013 (Mountain Lion, Mavericks, High Sierra, Catalina) and I updated the Gist each time I've done it.

I kinda regret for not using something like Boxen (or anything similar) to automate the process, but TBH I only actually needed to these steps once every couple years...

hbweb

/**
 * Jest Conversion script
 * This script isn't the cleanest, and uses two different methods for performing global replaces... but it gets the job done.
 * We switched from using the `replace` method to the `advancedReplace` about 70% of the way through, and couldn't go and retrofit
 * `advancedReplace` everywhere with 100% confidence. However, should you use this script as a base for your own migration,
 * I would definitely suggest using `advancedReplace`, which uses the node-replace library.
 */
import {sync as globSync} from 'glob'
import {execSync} from 'child_process'
import fs from 'fs'

hbweb

Comprehensive Introduction to @ngrx/store

By: @BTroncone

Also check out my lesson @ngrx/store in 10 minutes on egghead.io!

Update: Non-middleware examples have been updated to ngrx/store v2. More coming soon!

Table of Contents

hbweb

import { Directive } from '@angular/core';
import { AsyncValidatorFn, AsyncValidator, NG_ASYNC_VALIDATORS, AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map';
import { ProductService } from '../product-service';
import { map, tap } from 'rxjs/operators';

export function existingProductCodeValidator(productService: ProductService): AsyncValidatorFn {
  return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
    return productService.getProductByCode(control.value).pipe(

hbweb

import { MdPaginator, MdPaginatorIntl } from '@angular/material';

export class MyCustomPaginator extends MdPaginatorIntl{
  constructor(){
    super();
    this.nextPageLabel = ' My new label for next page';
    this.previousPageLabel = ' My new label for previous page';
    this.itemsPerPageLabel = 'Task per screen';
  }
}

hbweb

import { AbstractControl } from "@angular/forms";
import { Observable } from "rxjs/Observable";
import { Subject } from "rxjs/Subject";

export class QstAsyncValidatorWrapper {

  /*
   * Angular async validators are triggered on every key stroke.
   * This function debounces triggering an async validator.
   *

hbweb

# first:
lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom | while read f; do  sudo rm /usr/local/${f}; done
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*

# To recap, the best way (I've found) to completely uninstall node + npm is to do the following:

# go to /usr/local/lib and delete any node and node_modules
cd /usr/local/lib
sudo rm -rf node*

hbweb

Fixing npm On Mac OS X for Homebrew Users

Installing node through Homebrew can cause problems with npm for globally installed packages. To fix it quickly, use the solution below. An explanation is also included at the end of this document.

Solution

This solution fixes the error caused by trying to run npm update npm -g. Once you're finished, you also won't need to use sudo to install npm modules globally.

Before you start, make a note of any globally installed npm packages. These instructions will have you remove all of those packages. After you're finished you'll need to re-install them.