Published in JavaScript in Plain English·6 days agoAngular: Reload/Refresh a Component or Entire Application & Reuse Logic Across Multiple ComponentsAn Angular tutorial on how to reload/refresh a single component or the entire application and reuse the logic across multiple components. — There is a lot of difference between reloading a single component and reloading the entire application. We shall see how both can be achieved. It's a very simple application. There are 3 components: AppComponent which hosts the TestComponent and the TestComponent hosts the ChildComponent.Navigate5 min read
Published in JavaScript in Plain English·Jul 12Angular, RXJS: 2 ways you could share the HTTP request execution when the request is executed inside a method callI have written about a similar concept on which multicast operators you can use to ensure that an HTTP request is executed just once and the response is shared between multiple observers irrespective of when they subscribe. Here the HTTP request is not executed inside a method. TypeScript, RXJS: Which Multicast Operator to Use for Sharing HTTP Request b/w Multiple Observers… RXJS offers a number of operators and which operator will serve your requirement definitely requires some research and…javascript.plainenglish.ioAngular4 min read
Published in Geek Culture·Jul 9Angular: This is how I understood how to use Mixins to reuse logic between componentsThe documentation on Mixins can be quite confusing and overwhelming in the beginning. In simple words, A mixin class is used to handle some behavior and other regular classes can easily access this behavior by just extending this mixin class. …Mixin8 min read
Published in JavaScript in Plain English·Jul 6TypeScript, RXJS: Which Multicast Operator to Use for Sharing HTTP Request b/w Multiple Observers Over Different Time PeriodsRXJS offers a number of operators and which operator will serve your requirement definitely requires some research and effort. — Sharing HTTP responses amongst multiple observers is very useful to avoid multiple API calls but RXJS offers a number of operators and which operator will serve your requirement definitely requires some research and effort. What I tried to do, is create an HTTP GET…Angular10 min read
Published in Geek Culture·Jun 28Angular:Keeping track of the loading spinner states for multiple HTTP Requests in multiple componentsAdding a loading spinner to an angular application is a topic I have implemented earlier considering just 1 component and 1 HTTP Request in the below story. Showing a simple spinner when loading components/server data in Angular A spinner/loader makes a user experience much more smoother because he is aware that the view is loading and there is…ramya-bala221190.medium.com The above story employs 1 subject in the service to keep track of a single request in 1 component. If there are multiple…Behaviorsubject4 min read
Published in JavaScript in Plain English·Jun 18Retrying HTTP Requests a Fixed Number of Times With a Delay in AngularA guide on retrying sequential or parallel HTTP requests a fixed number of times with a delay using RXJS, Angular. — Retrying an HTTP request with a delay or retrying an HTTP request a fixed number of times without any delay is quite simple and RXJS provides us the retryWhen, delay, and retry operators to do this. But what if we want a result that…Angular5 min read
Published in Geek Culture·Jun 15Angular:3 ways you can pass templates from parent to child components to promote reusabilityI have created a small example below to demonstrate the 3 ways I frequently use to pass templates from parent to child components. Its quite basic and an actual scenario in an application can be way more complex. The bootstrapped AppComponent hosts 3 child components: ChildAComponent,ChildBComponent,ChildCComponent Each component demonstrates 1…Contentchild4 min read
Published in Geek Culture·May 17Node:CRUD examples to demonstrate using a reusable helper function to execute promises in sequenceWhile working on a Node application, I came across multiple scenarios where tasks had to be executed in sequence. I would like to categorize them as follows: Task-1 and Task-2 execute in sequence with no dependency on each other with respect to data i.e …Reduce5 min read
Published in JavaScript in Plain English·May 15Access the Previous & Current URLs in the Parent, Child & Grandchild Components in AngularA comprehensive guide on how to access the previous and current URLs in the parent, child, and grandchild components in Angular. — Being able to access the previous URL of the application is very useful in this scenario. Imagine you are logged in to your Google account and working on some files in Google drive. You then realize that you require some information that is stored in the drive storage of another…Router5 min read
Published in Geek Culture·Apr 29Angular,Node:Using Resource Timing API to get API timing informationIn the course of coding for my work project, I came across this very interesting Resource Timing API exposed through the window.performance property. In the words of MDN Docs, The Resource Timing API provides a way to retrieve and analyze detailed network timing data regarding the loading of an application’s…Resourcetimingapi4 min read
