Angular CLI - Custom Date validator

Angular supports of custom validators. Here i have created custom validator to validate date for template drive forms.

Directive: date-validator.directive.ts

import { AbstractControl, ValidatorFn, FormControl } from '@angular/forms';

import * as moment from 'moment';

import { NG_VALIDATORS, Validator } from '@angular/forms';

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

// validation function

function validateDateFactory(): ValidatorFn {

  return (c: AbstractControl) => {

    let isValid = moment(c.value, 'M/D/YYYY', true).isValid();

    if (isValid) {

      return null;

    } else {

      return {

        validDate: {

          valid: false

        }

      };

    }

  }

}

@Directive({

  selector: '[validDate][ngModel]',

  providers: [

    { provide: NG_VALIDATORS, useExisting: ValidDateValidator, multi: true }

  ]

})

export class ValidDateValidator implements Validator {

  validator: ValidatorFn;

  constructor() {

    this.validator = validateDateFactory();

  }

  validate(c: FormControl) {

    return this.validator(c);

  }

}

Html:

<input type="text" [(ngModel)]="someDateModal" validDate />

Angular CLI - How to cache Http Service calls simply using rxjs

To cache simply in Angular 7 CLI, here used rxjs on HttpClient.

To cache entire country list, we can use as follows,

import { map, catchError, shareReplay } from 'rxjs/operators';

import { throwError, Observable } from 'rxjs';

…

private countryCache$ = Observable<any>;

  getCountryList() {

    if (!this.countryCache$) {

      this.countryCache$ =

        this.http.get('/api/country/getCountryList')

          .pipe(

            map(response => {

              return response;

            }),

            catchError((error, caught) => {

              return throwError(error);

            }),

            shareReplay(1)

          );

    }

    return this.countryCache$;

  }

To cache object by it's parameter we can use as follows,in this example cached country information by it's name.

private countryInfoCache$ = new Map<string, Observable<any>>();

getCountryInfo(countryName: string) {

    if (!this.countryInfoCache$.get(countryName)) {

      let countryInfoCacheResult =

        this.http.get('/api/country/getCountryInfoByName',

          { 'countryName': countryName })

          .pipe(

            map(response => {

              return response;

            }),

            catchError((error, caught) => {

              return throwError(error);

            }),

            shareReplay(1)

          );

      this.countryInfoCache$.set(countryName, countryInfoCacheResult);

    }

    return this.countryInfoCache$.get(countryName);

  }

Angular CLI - How to use async and await

In Angular Cli, we can use async and await to perform service calls to wait for the promise. Usually we do call first service and then in subscribe method we do perform other logics. But now we can use toPromise method with asyn/await to perform the same as below,

Existing approach:

saveMethod(){

this.someService.getFirstResult().subscribe((data) ={

//second service depend on first service data

this.someService.getSecondResult(data.id).subscribe((data2) => {

        //Do perform your business logics here..

});

});

}

Aysnc/Await approach:

async saveMethod(){

let data = await this.someService.getFirstResult().toPromise();

//second service depend on first service data

let data2 = await this.someService.getSecondResult(data.id).toPromise();

//Do perform your business logics here..

}

Angular CLI - Handle Error Globally

To handle error globally in Angular 7 Cli, follow below steps

Ref: https://angular.io/api/core/ErrorHandler

Steps:

- Create ErrorHanlder file as below

import { Injectable, ErrorHandler } from '@angular/core';

@Injectable()

export class GlobalErrorHandler implements ErrorHandler {

  constructor(private ngZone: NgZone) {

  }

  handleError(error) {

    this.ngZone.run(() => {

//use ngZone to attach context to Angular's zone

//custom logic to do anything, for ex: toastService can be injected and shown here

    });

    //log as error to console

    console.error(error);

  }

}

-  Inject GlobalErrorHandler into app.module.ts providers as below

import { NgModule, ErrorHandler } from '@angular/core';

import { GlobalErrorHandler } from './core/config/error.handler';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

  ],

  providers: [

    …,

    { provide: ErrorHandler, useClass: GlobalErrorHandler },

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

-  Now throw error from anywhere, it will be catched in GlobalErrorHanlder

import { catchError, map } from 'rxjs/operators';

import { Observable, of, throwError } from 'rxjs';

….

getUser(): Observable<User> {

      return this.http.get(this.getUserUrl      )

        .pipe(

        map(response => { return <User>response; }),

        catchError((error, caught) => {

          //handled error globally

          return throwError(error);

        }));

    }