Tech Seeker

In this article, we are going to understand the usage of Bootstrap(V5) Modal in Angular(V13) applications. Create An Angular Application: Let's create an angular application to accomplish our demo. Command To Install Angular CLI: npm install -g @angular/cli Command To Create Angular App: ng new your_app_name Install And Configure Boostrap(V5) Install the Bootstrap NPM package. npm install bootstrap Now 'angular.json' file configure boostrap 'CSS', 'JS' references. Bootstrap Modal Usage: Let's implement a small sample to understand the usage of Bootstrap Modal. src/app.component.ts: import { Component, OnInit } from '@angular/core'; import { AppService } from './app.service'; declare var window: any; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { formModal: any; constructor() {}

In Par-1 we had implemented a basic angular authentication using the HTTP only cookie. Now we are going to enhance some features like 'Authentication Guard', 'HTTP Interceptor To  Refresh The JWT Token Inside The HTTP Only Cookie', 'User Logout'. Angular Route Guard For Authentication: Problem 1:- After successful authentication, we reload our angular application, or the user closes the browser and then opens again, we can see our user information will be lost. Problem 2:- Currently with our sample application, we can access any page means, if the user is not logged in also can access the 'dashboard' page, similarly if the user logged in can also access the login form page. Solution:- Implementing Angular  Route Guard for authentication. In 'AuthService' let's add logic to load the authenticated user information either from the 'AuthService.userProfile' variable or from the browser local storage. Because if the application is rel

In this article, we are going to implement a sample angular application authentication using HTTP only cookie that contains a JWT token. HTTP Only JWT Cookie: In a SPA(Single Page Application) Authentication JWT token either can be stored in browser 'LocalStorage' or in 'Cookie'. Storing JWT token inside of the cookie then the cookie should be HTTP Only. The HTTP-Only cookie nature is that it will be only accessible by the server application. Client apps like javascript-based apps can't access the HTTP-Only cookie. So if we use authentication with HTTP only JWT cookie then we no need to implement custom logic like adding authorization header or storing token data, etc at our client application. Because once the user authenticated cookie will be automatically sent to the server by the browser on every API call. Authentication API: To implement JWT cookie authentication we need to set up an API. For that, I had created a mock authentication API(Using the NestJS Se

Unsubscribe An Observable: In Angular applications, it's always recommended to unsubscribe the observables to gain benefits like: Avoids Memory Leaks Aborting HTTP requests to avoid unwanted calls. So in this demo, we will understand the case studies to unsubscribe an observable. Memory Leaks: Now let's implement observables code with memory leaks. So first let's create a service like 'test.service.ts' inside of initialize the 'BehaviourSubject' as below. services/test.service.ts: import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root', }) export class TestService { randNumberSub: BehaviorSubject<number> = new BehaviorSubject<number>( Math.random() ); } (Line: 8-10) Initialized 'BehaviorSubject' of type 'number'. Now let's create components like 'sample1.component.ts' and 'sample2.component.ts' these will c

In this article, we are going to implement an Angular application state management using @ngrx/data. @ngrx/data: In a general angular application using NgRx Store, Effects, and Entity libraries made us to write a huge number of actions, reducers, effects, selectors, HTTP API calls per entity model. It leads to a lot of repetitive code to create, maintain and test. Using NgRx Data we can reduce our code to very little despite having a large number of entity models in our application. The NgRx Data is an abstraction over the Store, Effects, and Entity that radically reduces the amount of code we have to write. By gaining the abstraction benefit, we are going to lose our direct interaction with NgRx libraries. Ngrx Store Flow: Using Ngrx we never contact the store directly, every store operation is carried out by the NgRx store implicitly. Our main point of contact is EntityCollectionService. Using EntityCollectionService for each entity can invoke API calls with default method like '