angular2 help

angular.md

UX tools, colors

• UI: https://blog.prototypr.io/common-ux-mistakes-made-by-business-developers-e837d0b31379
• Color: https://coolors.co/ad343e-214e5a-f5ee9e-f49e4c-ab3428

i18n

Get Child element on component binding

• The QueryList is initialized only before the ngAfterContentInit lifecycle hook, therefore, is available only from this point.
• ViewChildren don’t include elements that exist within the ng-content tag.
• ContentChildren includes only elements that exists within the ng-content tag.
• more here

@ContentChild(KngViewTest) viewTest: KngViewTest;
@ContentChildren(KngViewTest, { descendants: true }) actions: QueryList<KngViewTest>;

Run change detection explicitly after the change:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdRef:ChangeDetectorRef) {}
ngAfterViewChecked()
{
  console.log( "! changement de la date du composant !" );
  this.dateNow = new Date();
  this.cdRef.detectChanges();
}

Route resolver

export const appRoutes: Routes = [{
    path:'store',
    component:KngWelcomeComponent,
    resolve:{ loader:LoaderResolve }
...}];   

//
// activate route only when loader is ready!
@Injectable()
export class LoaderResolve implements Resolve<any> {
  constructor(private $loader: LoaderService) {}
  resolve(route: ActivatedRouteSnapshot) {
    return this.$loader.ready();
  }
}

Audit perf & PWA

• https://medium.com/@nsmirnova/creating-pwa-with-angular-5-part-2-progressifying-the-application-449e3a706129

async & rxjs

• pipe data stream to template

@Component({
  template: `<p>{{data$ | async}}</p>`
})
export class SomeComponent {
  data$ = this.dataService.getData().pipe(catchError(() => ''));
  constructor(protected dataService: DataService) {}
}

• unsubscribe multiple stream

export class MyComponent{
    private ngUnsubscribe: Subject = new Subject();
    constructor(
        private service$: MyService,
    ) { }
    ngOnInit() {
        this.service$.get()
            .takeUntil(this.ngUnsubscribe)
            .subscribe(things => console.log(things));

        this.service$.other()
            .takeUntil(this.ngUnsubscribe)
            .subscribe(things => console.log(things));
    }
    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }

@ngx-pwa/offline

If there is no Internet connection or the server is unavailable, it will redirect the user to an offline page

• https://medium.com/@cyrilletuzi/angular-async-pipe-everywhere-with-ngx-pwa-offline-d8de68845c81

import { catchOffline } from '@ngx-pwa/offline';
@Component({
  template: `<p>{{data$ | async}}</p>`
})
export class SomeComponent {
  data$ = this.dataService.getData().pipe(catchOffline());
  constructor(protected dataService: DataService) {}
}

Example with JSONP Call (A2)

import { Injectable } from '@angular/core';
import { URLSearchParams, Jsonp } from '@angular/http';

@Injectable()
export class WikipediaService {
  constructor(private jsonp: Jsonp) {}

  search (term: string) {
    var search = new URLSearchParams()
    search.set('action', 'opensearch');
    search.set('search', term);
    search.set('format', 'json');
    return this.jsonp
                .get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search })
                .toPromise()
                .then((response) => response.json()[1]);
  }
}