Posts

Showing posts from June, 2021

How to restrict your logged In page in angular (authentication guard)

 You can set authentication guard to restrict users which are not loggedin. 1) Service of auth guard    import { Injectable } from '@angular/core' ; import { Router , CanActivate , ActivatedRouteSnapshot , RouterStateSnapshot , UrlTree } from '@angular/router' ; import { CookieService } from 'ngx-cookie-service' ; @ Injectable ({ providedIn: 'root' }) export class AuthGuardService implements CanActivate { constructor ( private _router : Router , private _cookieService : CookieService ) { } userid = "" ; canActivate ( route : ActivatedRouteSnapshot , state : RouterStateSnapshot ): boolean | UrlTree { this . userid = this . _cookieService . get ( 'userid' ) if ( this . userid == "" ) { alert ( 'You are not allowed to view this page. You are redirected to login Page' ); this . _router . navigate ([ "login" ],{ queryParams: { retUrl: route . url } }); return false ; /

How to notify about data update to other component.

   we can update about data changes to any component using bellow simple method 1) Service to publish and receive data import {Injectable} from '@angular/core'; import {Subject} from 'rxjs'; @Injectable({ providedIn: 'root' }) export class GlobalFooService { private fooSubject = new Subject<any>(); publishSomeData(data: any) { this.fooSubject.next(data); } getObservable(): Subject<any> { return this.fooSubject; } } 2) Data sending component @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'] }) export class HomePage { constructor(private globalFooService: GlobalFooService) { } onSomeButtonClick() { this.globalFooService.publishSomeData({ foo: 'bar' }); } } 3) Data receiving component @Component({ selector: 'app-root', templateUrl: 'app.component.htm