Showing posts with label Angular 7. Show all posts
Showing posts with label Angular 7. Show all posts

Friday, April 24, 2020

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 />

Monday, August 19, 2019

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);

  }

Wednesday, August 7, 2019

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..
}


Monday, July 29, 2019

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);
        }));

    }