2 days ago

Angular DI system unfolded thoroughly in simple terms for practical use

How do we create an instance myInstance = {}; instanceOutOfClass = new MyClass(...dependencies); property = 5; member = 'value'; Instances could be simply created this way but to lazily create these instances (at the time of the request, the first time it’s requested through DI), also providing dependencies to those instances at runtime easily and to…

Angular

3 min read

Angular

3 min read

Jan 26

One liner state management ft. RxJs

Handling a use-case where we need to retrieve some data, store it and share it to multiple instances across the application — Create a data service export class DataService { fetchAssignedPatients = () => this.http.get(`assigned-patients-url`); assignedPatients$ = this.fetchAssignedPatients(); } Subscribe to the assignedPatients$ in your components and consume it wherever you need it. this.dataService.assignedPatients$.subscribe((patients) => consume(patients))

Rxjs

2 min read

Rxjs

2 min read

Jan 24

Handle repeated user clicks in your Angular application

Many times in our application frequent user clicks within fraction of seconds could cause our functionality to behave differently. For example: Showing up a modal on click (we don’t want to trigger opening multiple modals while we operate on blocking the view) Calling an API on click (we don’t want…

Angular

1 min read

Angular

1 min read

Published in Level Up Coding

·Dec 29, 2022

Reactive programming in RxJs ft. Angular

Your whole life was a lie — Throughout our careers most of us have been taught to write a set of instructions and get the job done. It was majorly focused on “HOW” instead of “WHAT” and that makes complete sense as well as it’s critical to learn how do you solve something and we can master…

Rxjs

3 min read

Rxjs

3 min read

Oct 4, 2022

We become what we practice

Practice could be literally anything. Not doing anything or sitting idle is also a practice. Thinking something is also a practice. Just doing something meaningless is also a practice. Getting trapped in some random thoughts is also a practice. Falling prey to even our slightest temptations is also a practice. …

Mindfulness

2 min read

Mindfulness

2 min read

Jun 12, 2022

Integrating analytics to your Angular application in an abstract(plug n play) fashion

Taking Countly as an example this time — Initialisation Factory function Plugging it in its own module Tracking declared and realtime events Tracking page view events injecting this Factory function For events(operations) which relies on some API response arrival For pushing error logs to Countly export class CountlyErrorHandler implements ErrorHandler { handleError(error: unknown) { Countly.q.push(['log_error', error]); console.error(error); } }

Analytics

1 min read

Analytics

1 min read

Integrating analytics to your Angular application in an abstract(plug n play) fashion

Taking Countly as an example this time

Initialisation Factory function

Plugging it in its own module

Tracking declared and realtime events

Tracking page view events injecting this Factory function

For events(operations) which relies on some API response arrival

For pushing error logs to Countly

export class CountlyErrorHandler implements ErrorHandler {
  handleError(error: unknown) {
    Countly.q.push(['log_error', error]);
    console.error(error);
  }
}

Final Countly Module

Jun 4, 2022

NGXS: @Snapshot on @Select

Reading your observable state slice in a declarative fashion and instantiating/updating your component property accordingly, so you don’t have to put multiple subscribe blocks in your init function(in case you don’t want to observe it in your template) — Disclaimer: It might not be a good idea to exhaust this approach in every scenario Recently, In an imperative programming I’d been seeing this redundant patterns in our application, wherein you want to subscribe to your store state observable or some publisher$ in your component class itself. Suppose there’s a state like:

Angular

2 min read

Angular

2 min read

Published in Level Up Coding

·May 29, 2022

TrackId: Infixing trackBy capabilities to *ngFor in a centralised way across your Angular application

Just a prerequisite for this post: TrackByFunction — Often times you might have realised to provide trackBy input to your ngForOf directive for performance optimisation but in the next moment you are too lazy to do it at several places at once and furthermore it feels too much of a overhead to keep doing this for the ongoing…

Angular

2 min read

Angular

2 min read

May 29, 2022

Integrating search within multi mat-select(Angular material)

Recently, I got a requirement where we have to provide search support within a multi-select dropdown. Since we were already using the mat-select component from Angular material for the dropdown or select UI in our application I headed towards searching for a solution from the Angular material but we got…

Angular Material

1 min read

Angular Material

1 min read

Jun 13, 2021

Restricting user input as per the regex

Often times we struck by a requirement wherein we need to restrict the user input inside of a textarea/input field/contentEditable HTML element. When receiving user input in the form of keystrokes we want to ensure that he should only be able to feed one of the following patterns and more: *…

Angular

2 min read