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

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

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

// blogger.component.ts
...
  template: `
      <h1>Posts by: {{ blogger }}</h1>
      <div>
          <posts [data]="posts"></posts>
      </div>
  `
...

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

/**
* @function forkJoin multiple requests with ngrx selects
* we can't use forkJoin for ngrx selects because this method requires the Observables being 'complete'
* in case of ngrx store, all of their observables are usually based on a BehaviorSubject, and will never complete
* the only way we can do is using like this: forkJoin(user$.take(1), customCarList$.take(1)
*/
const result$ = forkJoin([
  this.store.select(selectOne).pipe(take(1)),
  this.store.select(selectTwo).pipe(take(1)),
  this.store.select(selectThree).pipe(take(1))

hollygood

Use 'unsubscribe':

export class ExampleComponent implements OnInit, OnDestroy {
  exampleSubOne: Subscription;
  exampleSubTwo: Subscription;

  constructor(private exampleService: ExampleService) {}

  ngOnInit() {

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

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.