Posts

Showing posts with the label Angular

Count Down pipe in angular 2+

Image
import  {  Pipe ,  PipeTransform  }  from   '@angular/core' ; @ Pipe ({    name:   'countdown' }) export   class   CountdownPipe   implements   PipeTransform  {    transform ( value :  any ,  dd :  number ,  hh :  number ,  mm :  number ):  any  {      setInterval (() => {        return   this . counterOwn ( value ,  dd ,  hh ,  mm );     }, 1000 )   }    counterOwn ( value :  any ,  dd :  number ,  hh :  number ,  mm :  number ){      var   timeCountDown :  any ;      var   d  =  new   Date ( value );      var   v  =  new   Date ( value );      var ...

Auth Service in Angular 2+

Image
import  {  Injectable  }  from   '@angular/core' ; import  {  Router  }  from   '@angular/router' ; import  {  AllServiceService  }  from   "./all-services/all-service.service" ; import  {  CryptoService  }  from   "./all-services/crypto.service" ; import  {  Observable ,  of   as   observableOf  }  from   'rxjs' ; import  {  HttpClient ,  HttpHeaders ,  HttpClientModule  }  from   "@angular/common/http" ; @ Injectable ({    providedIn:   'root' }) export   class   AuthServicesService  {    isloggedInUser : boolean  =  false ;    constructor ( private   myRoute :  Router ,  private   manage : AllServiceService , private   crypt : CryptoService , private   http :  HttpClient ) { } ...

Auth Guard in Angular 2+

Image
import  {  Injectable  }  from   '@angular/core' ; import  {  CanActivate ,  ActivatedRouteSnapshot ,  RouterStateSnapshot  }  from   '@angular/router' ; import  {  Observable ,  of   as   observableOf  }  from   'rxjs' ; import  {  AuthServicesService  }  from   './auth-services.service' ; import  { Router }  from   '@angular/router' ; import  {  HttpClient ,  HttpHeaders  }  from   "@angular/common/http" ; import  { map }  from   'rxjs/operators' ; import  {  AllServiceService  }  from   "./all-services/all-service.service" ; @ Injectable ({    providedIn:   'root' }) export   class   AuthGuard   implements   CanActivate  {       constructor (      private   r...

Matching password validation in angular 5+

Image
Create new directive: import { Validators, NG_VALIDATORS, AbstractControl, ValidationErrors, ValidatorFn} from "@angular/forms"; import { Directive, Input } from "@angular/core"; import { Subscription } from "rxjs"; export function compareValidator(controlNameToCompare:string): ValidatorFn{ return (c:AbstractControl):ValidationErrors | null => { if(c.value === null || c.value.length === 0){ return null; } const controlToCompare = c.root.get(controlNameToCompare); if(controlToCompare){ const Subscription:Subscription = controlToCompare.valueChanges.subscribe(()=>{ c.updateValueAndValidity(); Subscription.unsubscribe(); }) } return controlToCompare && controlToCompare.value !== c.value ? {'compare': true}:null; }; } @Directive({ selector: "[compare]", providers: [{ provid...