Angular2 notes

--------- npm update dependencies -------
npm i -g npm-check-updates
npm-check-updates -u
npm install

update angular-cli

Global package:
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest


Local project package:
rm -rf node_modules dist # use rmdir on Windows
rm -rf node_modules
npm install --save-dev @angular/cli@latest
npm install






To access element event, giving eletment a name in HTML file #name, in component, just call name.event() 

---------ng2 accept date formate: yyyy-mm-dd ---------------------

---------routerLink vs. router.navigat-----------------
router.navigat would reload Chrome when put navigate func inside a click event. working in IE10 and Edge, not others
set button type to button to solve
This is because of a missing type in the button class, if the button is inside a <form></form> 
Chrome will use 'submit' as it's default value. Causing a form submit when the button is clicked.

DO NOT use router link with in child router, will redirect to new page, use Router.navigateByUrl('/parent-level-route')

-------http, observable<type>, subscribe------------------
data from request after res.json() is a json object, and coming back to component asynchronously, which means that 
it is undefined before. this is when angular will throw an exception once do print out client/ client.name .
resolve by using {{client?.name}} which indicate that client may be undefined by using the ?.

------error: Cannot read property '0' of undefined -------------------------
this because of fetching records async and when Angular tries to resolve bindings the first time records is still null 
therefore records[0] fails.

use: safe-navigation (Elvis) operator: {{records?.someprop}}
use: {{records && records[0]}} for array, no safe-navigation (Elvis) operator for array (?[])
or use: <div *ngIf="records"></div> and then {{records[0].property}}

--------$ suffix (popularized by Cycle.js) is used to indicate that the variable is an Observable--------

--------Angular 2 Observable------------------------


-------angular2 animation on safari mobile---------
Angular animations are built on top of the standard Web Animations API and they run natively on browsers that support it.
The Web Animation API is not well supported right now. check: http://caniuse.com/#feat=web-animation
need web-animations-js as polyfill
 steps: 1. install web-animations-js from npm
        2. Add to polyfills.ts, import 'web-animations-js/web-animations.min';


--------Angular encapsulates CSS----------------------

the body element has a bult-in offset (through margin) that shows in almost all modern browsers.
the way Angular encapsulates CSS styles onto a component

1. None: Angular doesn’t do anything. No encapsulation and no Shadow DOM, this is just like adding styles regularly. 
   Adding a style will apply to the entire document.
2. Emulated: Angular emulates Shadow DOM behaviour. This is the default.
3. Native: Angular uses the browser’s native Shadow DOM completely.

to fix this: in accordingly component.ts, import ViewEncapsulation and add 
             encapsulation: ViewEncapsulation.None in @component{}
             
             
-------------nasted *ngfor---------------------
template:
<div *ngFor="let question of resources | groups">
  <h5>{{question.name}}</h5>
  <div class="row">
    <div class="col l6 m6 option-holder" *ngFor="let option of question.resources">
      <label>{{option.option}}</label>
    </div>
  </div>
</div>

ts:
this.resources = [
        { question: 'What\'s you type of banking?', option: 'Personal Banking'},
        { question: 'What\'s you type of banking?', option: 'Business Banking'},
        { question: 'What do you need help with?', option: 'Bank Accounts'},
        { question: 'What do you need help with?', option: 'Credit Cards'},
        { question: 'What do you need help with?', option: 'Borrowing'},
        { question: 'What do you need help with?', option: 'Investing'},
        { question: 'What do you need help with?', option: 'Advise'},
        { question: 'What would you like to do?', option: 'Advise'},

pipe:
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'groups'})
export class GroupsPipe implements PipeTransform {
  transform(value, args: string[]): any {
    let questions = {};
    value.forEach(function(o) {
      let question = o.question;
      questions[question] = questions[question] ? questions[question] : { name: question, resources: [] };
      questions[question].resources.push(o);
    });

    return Object.keys(questions).map(function (key) {return questions[key]; });
  }
}
--------------------------------------------
ActivatedRoute: is a service that allows to access information present in the route.
+params['page'] = + operator alone before a single element. This indicates a math operation and tries to convert 
                  the element to a number. If the conversion fails, it will evaluate to NaN. 
                  This is especially useful when one wants to convert a string to a number quickly, 
                  but can also be used on a select set of other types.


--------- ${} vs. {{}}----------
${someVar} is string interpolation from TS and is applied before the template is processed by angular.  
{{someVar}} is Angular template binding expression.
setting ${someVar} means that value will always remain the same,  
someVar will be read when Angular compiles the template and is static afterwards.