.ToDo

BrowserClient:
    https://github.com/mpgp/BrowserClient/projects/1

    In Progress:

        @critical @feature 
        ☐ feat(core): install mobx @created(18-06-13 22:02:44)
        mobxAngularDebug
        `@Observer / *mobxAutorun`
        https://github.com/mobxjs/mobx-angular

        @critical @today 
        ☐ perf: ngFor  + trackBy @created(18-06-13 21:57:46)

        @critical @feature
        ☐ feat(core): notifications - display notification error, when api doesn't available @created(18-06-13 21:27:50)

        @critical @feature
        ☐ feat(core): implement websocket client @created(18-06-13 21:44:54)
        via  ws.addEventListener('message', fn);
        and ws.removeEventListener('message', fn); 

        @high @feature 
        ☐ feat(core): notifications - display connection status on notifications while setup ws connection @created(18-06-13 21:46:45)

        @high @feature 
        ☐ feat(core): notifications - when we loss WS connection, then display message by NotificationService and autoreconnect @created(18-06-13 21:25:48)

    To Do:

        @low @feature
        ☐ feat: buttons for clear history of messages/notifictations/etc @created(18-06-13 21:53:30)
        
        @low @feature
        ☐ feat(core): notifications - add settings on profile do display notifications @created(18-06-13 21:49:53)
        add option to enable/disable notification sound
        add option to enable/disable notification message
        add option to enable/disable notification position
        think about where we should store the settings (client or server or both?)

        @low
        ☐ find out https://github.com/brillout/awesome-angular-components @created(18-06-13 21:41:24)

        @low
        ☐ find out https://github.com/typestack/class-validator @created(18-06-13 21:41:25)

        @low
        ☐ find out https://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/ @created(18-06-13 22:01:02)

        @low
        ☐ think about ngrx/store instead of mobx @created(18-06-13 22:01:48)
        `with store<appstate>`
        `with store<featurestate>`
        https://offering.solutions/blog/articles/2018/02/10/separating-state-into-angular-modules-with-ngrx/

Archive:
    ✔ feat(core): catch errors/pass headers via interceptor @created(18-06-13 21:55:41) @done(18-06-30 12:23:37) @project(BrowserClient.In Progress)
    custom errorhandler (0rl1on)
    https://angular.io/api/common/http/HttpInterceptor
    https://www.youtube.com/watch?v=z9U_xYSsVRw

    ✔ create page submodules with lazyloading   for feature modules if need

Info:
material icons - https://material.io/tools/icons/?icon=public&style=baseline
components library - https://github.com/brillout/awesome-angular-components

flex-layout - https://github.com/angular/flex-layout
reusable components - https://habr.com/post/320414/

https://conventionalcommits.org
https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines

component/directive decorator proerty: *exportAs*
to access another component public members
from template/tscode

param types:.
    query params(/api?a=1)
    matrix params(/api;a=1)
    outlet params(/api(a:1))

busy loader:.
    ```HTML
    <ng-template [ngIf]="busy$ | async">
        Loading...
    </ng-template>
    <ng-container *ngIf="counter$ | async as counter">
        <p>{{counter}}</p><br />
        <p>{{counter}}</p><br />
        <p>{{counter}}</p><br />
    </ng-container>
    ```
    ```TypeScript
    this.counter$ = interval(5000).pipe(
        map(_ => Math.random() * 10),
        tap(_ => this.busy$.next(true)),
        tap(_ => console.warn('send new req')),
        switchMap(x => timer(2000).pipe(map(_ => x))),
        tap(_ => console.warn('data received')),
        tap(_ => this.busy$.next(false)),
    );
    ```

something:.
    ```JavaScript
    this.form.valueChanges
        .filter(_ => this.from.valid)
        .throttle(500)
        .subscribe(action);
    autocompleter
        .filter(validation)
        .debounc(500)
        .switchMap(getData)
        .subscribe(action);
    ```
perf:.
    ```JavaScript
    class MyApplicationRef extends ApplicationRef {
        tick() {}
    }
```
    `{provide: applicationref, useClass: MyApplicationRef}`