This article is written assuming you have a fair understanding of how an Angular Interceptor works and what they do. Caching an Http request for GET calls is highly important as it will avoid making an API service calls unnecessarily. An Interceptor can be used to delegate caching without disturbing your existing Http calls....
Angular Typeahead using switchMap – a use case
There are plenty of options available in Angular world to implement TypeAhead feature for your project, such as; Angular Material Autocomplete (https://material.angular.io/components/autocomplete/examples) NG Bootstrap Typeahead (https://ng-bootstrap.github.io/#/components/typeahead/examples) Prime-Ng (https://www.primefaces.org/primeng/#/autocomplete) Although, there is no need to reinvent the wheel here, still a simple analysis on how a type ahead works in the above libraries will help...
Make sequence of HTTP / API request using mergeMap and forkJoin
Otherwise known as chaining multiple Observables / API. In the real world scenario, we always face a situation where an id of a data depends on previously emitted value. To be precise, let’s assume we need to fetch userId using only by username and sequentially fetch all his/her articles or posts using the userId....
forkJoin vs combineLatest
Learning RxJS is quite challenging and it is undoubtedly the great tool for front-end developers. We cannot grasp entire RxJS operators in one go, but we may encounter some operators for our use cases. One such operators are forkJoin and combineLatest. forkJoin is a special operator from RxJx that let’s you combine / accept...
Minify / Uglify / remove comments your final Angular build
Removing unwanted code and minifying your application is a crucial step before pushing to production. To fix this, just open up angular.json config file in your editor and navigate to “Projects” > “Name Of Your Angular App” > “architect” > “configurations” > “production” By setting the “optimization” to true, “vendorChunk” to true and “aot”...
Angular 8 / 9 – Change Detection Strategy – OnPush, Default – Use Case Scenario
In this subject we will look at how the Angular Change Detection system works. First of all, an Angular application is a tree of components, starting from App Component and the list of child components that you build all the way down. If you look visually, your application will appear as a tree of...
Adding bootstrap 4 to an ionic 4 project
What ever the framework may be, it is often handy to have bootstrap in your favorite application. With it’s plethora of styling definitions, bootstrap indeed is favorite for all web developers, let’s get started. Firstly, install bootstrap in your project by following command. npm install bootstrap Open angular.json that is in your root...
Check if an array contains duplicate values, without using arrays
Do you want to write a javascript or typescript function which checks if an array contains duplicate values or not? And without using any array iterations in your function? There is an easy solution for that and that is Set. The Set allows you to store unique values of any type, it could be...
Angular Material Getting Started
In this tutorial we gonna look at; How to setup Angular Material, include a default theme and build a simple application with sidebar navigation. So basically build a toolbar, and few input elements like input text, checkbox’s, etc So, let’s get started. So first thing first, check if you got angular CLI installed in your PC....
Angular 6 – Routing and Navigation (with Child Routes & Route Auth Guards)
Learn to code routing and navigation in angular 6, which covers pretty much everything about routes, child routes and route auth guard. Source Code: https://github.com/codewithsrini/Angular-6-Routing-and-Navigation-with-Real-World-Sample Time Stamp: 1:26 – Importing Router Modules (for Routing and Navigation) 2:02 – RouterModule.forRoot() 2:54 – Creating a Project Management Application 3:28 – Creating Components and Modules 4:44 –...