hollygood

• Go to Bitbucket and create a new repository (its better to have an empty repo)

git clone git@bitbucket.org:abc/myforkedrepo.git
cd myforkedrepo

• Now add Github repo as a new remote in Bitbucket called "sync"

git remote add sync git@github.com:def/originalrepo.git

hollygood

React Best Practices

Map Function for Dynamic Rendering of Arrays

render () {
  let cartoons = [ "Pika", "Squi", "Bulb", "Char" ];
  return (
  <ul>
    {cartoons.map(name => <li key={name}>{name}</li>)}
  </ul>
  );

hollygood

Some Common JS Tricks

Toggle Sorting function

// Normal way
if ( this.orderBy ) {
  results = this.order === 'asc' ? 
  results[0].sort( (a, b) => ( 
    a[ this.orderBy ] > b[ this.orderBy ] ) ? 1 : -1 ):
  results[0].sort( (a, b) => ( 

hollygood

1. Follow the instructions here: https://update.angular.io/
Select the current Angular version and expected verson to upgrade

2. Write Document
* Make suggestions from https://update.angular.io/ as a task list, mark complete when done

3. Dependencies Table 
Make a table for each dependency from package.json, which includes package name, npm script (npm i -D xxx),
version changes, code affected, package changelog link, and progress. eg.

hollygood

Define variable in root project and access it in subprojects by using extra

1) val foo: String by extra["hello"]
2) extra["foo"] = "hello"
3) 
buildScript {
  extra.apply {
    set("foo", "hello")
  }
}

hollygood

Example 1

// parent.component.ts
form: FormGroup;

ngOnInit() {
   this.form = new FormGroup({}); // create empty FormGroup in order to addControls in nested components
}

// parent.component.html

hollygood

Change Style from Angular Library

If we create a library for reusable components with Angular 6, and you'll find that it's not possible to update the styles from the library. One way to do that is put ':host ::ng-deep':

// from library
.example-class {
   font-weight: bold;
}

hollygood

mat-form-field causes Error: ExpressionChangedAfterItHasBeenCheckedError

link: angular/components#12714

I also got the same error by using mat-form-field in ng-bootstrap modal:

"ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-form-field-should-float: false'. Current value: 'mat-form-field-should-float: true'."

ChangeDetectionStrategy.OnPush doesn't work for me.

hollygood

// Logic order: New User -> (A, B, C) -> D
// Each logic is a single API call to backend
// A, B, C, D services are all depends on the creation of the New User
// A, B, C can be called in any orders, and they don't depends on each other
// After A, B, C all completes, emit D. D shouldn't be called if either A, B or C is not complete

@Effect()
addUser$: Observable<Action> = this.actions$.pipe(
  ofType<AddUserAction>(UsersActionType.ADD_USER),
  map((action: AddUserAction) => action.payload),

hollygood

// Higher order mapping: instead of mapping a plain value like 1 to another value like 10, 
// we are going to map a value into an Observable. It's just an Observable like any other,
// but its values are themselves Observables as well, that we can subscribe to separately

// Why Higher-Order Observables?
// Avoiding nested subscriptions

/**
* Observable Concatenation: implement sequential requests
* In order to ensure sequentiality, we need to concatenate the multiple httpPost$ Observables together