Tech Seeker

In this article, we will implement authentication routing guards and also implement interceptors to invoke the refresh token API. Click here for part-1 angular jwt token authentication & refresh token . Route Guards: In our current sample, we have an issue with the navigation that is like after login user can access the login page which is not correct, and without login can access the 'fav-movies' page. So we can correct this issue by integrating the routing guards. Let's create a routing guard service like 'AuthGuard'. ng generate class shared/auth/auth-guard --skip-tests src/app/shared/auth/auth-guard.ts: import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree, } from '@angular/router'; import { Observable } from 'rxjs'; import { AuthService } from './auth.service'; @Injectable() export class AuthGuard implements CanActivate { constructor(priv

In this article, we are going to implement JWT(JSON Web Token) authentication in the Angular(v14) application. We also understand how to use the Refresh Token when the JWT Access Token expires. JSON Web Token(JWT): JSON Web Token is a digitally signed and secured token for user validation. The JWT is constructed with 3 informative parts: Header Payload Signature Create An Angular(v14) Application: Let's create an Angular(v14) application to accomplish our demo. Command To Create Angular App ng new name_of_your_project Let's install the bootstrap package npm install bootstrap@5.2.0 Configure the bootstrap CSS and JS file reference in 'angular.json'. Now let's add the bootstrap menu in 'app.component.html'. src/app/app.component.html: <nav class="navbar navbar-dark bg-primary"> <div class="container-fluid"> <a class="navbar-brand" routerLink="/">Jwt Auth Demo</a> </div> </nav

In this article, we will explore the Angular(14) reactive forms with an example. Reactive Forms: Angular reactive forms support model-driven techniques to handle the form's input values. The reactive forms state is immutable, any form filed change creates a new state for the form. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously. Some key notations that involve in reactive forms are like: FormControl - each input element in the form is 'FormControl'. The 'FormControl' tracks the value and validation status of form fields. FormGroup - Track the value and validate the state of the group of 'FormControl'. FormBuilder - Angular service which can be used to create the 'FormGroup' or FormControl instance quickly. Form Array - That can hold infinite form control, this helps to create dynamic forms. Create An Angular(14) Application: Let'

In this article, we will implement a small angular application about item sorting using the angular material drag&drop. Key Notes About Angular Material Drag&Drop: Let's know about a few key things on angular material drag&drop like: DragDropModule load from the library '@angular/cdk/drag-drop' The 'cdkDrag' attribute makes an element draggable. The 'cdkDropList' attribute on an element that surrounds a set of 'cdkDrag' elements groups the draggable into a reorderable collection. So it creates a boundary of the region for dragging. The 'cdkDropListDropped' is an event fired after dipping the item. Create An Angular Application: To accomplish our demo let's create a sample angular application. Command To Install Angular CLI: npm install -g @angular/cli Command To Create Angular App: ng new your_app_name Now let's install angular material into our application. Command To Install Angular Material: ng add @angular/mate