Skip to main content


Showing posts from October, 2021

Angular - How to create custom form controls

Greetings! If you are working in an Angular project, you surely have created many UI components. We can easily use @Input, @Output to communicate data between parent to child and child to parent. However, we are unable to bind those values directly to angular forms. But, do we realy need to do it that way? Yes! we need, utilizing the form modules is more powerful way to get user input. Then, can't we use our 'normal' components to do the job? No! we can't. I was ashamed to know that I didn't know the existence of the ControlValueAccessor but better late than never ;) Complete code  custom-form-control What is ControlValueAccessor? When you are working with forms in Angular, whether it is template driven or reactive form, NgModel, formControl, formControlName, Angular creates FormControl to track the value, validations etc. Then Angular should have a way to communicate data between actual html element and the FormControl. Angular is smarter enough not to create one t

Case Study - How to handle concurrent reservation

Greetings! There are multiple domains with reservation build into it, however the problem they face is same. How do you handle when concurrent users try to reserve the same resource? We can see this situation in systems like; Doctor appointment Airline ticketing Movie ticketing Hotel booking Train ticket many more... Depending on how you define the business this again has two paths. Reserve the same resource - exact time slot for a doctor appointment. Reserve with count - 10 patients for a doctor for given timeslot with an appointment number. Let's understand the problem again You are going to watch the latest hit movie. While you are on your way, someone faster than you passed you. Then both of you joined the queue. Unfortunately for you, the person before you got the last available ticket hence you missed the chance to watch the movie at that time. Now imagine there is a fraud happen. Somehow, someone has the same ticket as you have. Sure

Case Study - URL Shortener

Greetings! There are URL shortning services like , for the obvious reason. Shorten the URL to save space! Be it a twitter message, an email, your resume, it is a handy way to give your valuable URL to others. Let's study the underline techniques together. It looks really simple piece of software at first glance, and it is. The real implementation doesn't look that scary. However, overall architecture give us a whole set of ideas. Related articles What does it do? Any URL shortner will have 2 main features. Give a short URL for any given URL. Redirect to the original URL when we enter the shorten URL in a browser. Just 2 features and what is there to talk? That is the interesting part of this. It touches wide range of architecture decisions when we really implement. I personaly haven't experience

Angular NgRx: A Simple Effect

Greetings! In this fourth installment of our simple NgRx example series we are going to have a look at effects. Yet again, our example will be very simple. This is the complete example What we need Store with initial state Create action to add, remove http status codes Create reducers act upon actions Create selector to read from store Create an effect to store http status url Register the reducer Register the effect Generate the Project ng new ngrx-hello-effects --routing=false --style=css cd ngrx-hello-effects/ ng add @ngrx/store@latest ng add @ngrx/effects@latest ng serve Create the Store At this point i'll asume that you have atleast little idea about the action, reducer and selectors. Hence i'll just add the code. One change i'm doing here to previous examples is I have created separate files. ngrx-hello-effects/src/app/store/app.state.ts export interface HttpCodeState

Angular NgRx: A Simple Selector

Greetings! In this third installment of our simple NgRx series we are going to have a look at selectors. As this is again confusing at first, let's use our simple message string to learn this. For the simplicity, i'm not using any actions in this example. Comple code can is here What we need Store initial value Create reducer to get initial value Register the reducer Create selector(s) Read, change values from the component Generate the Project ng new ngrx-hello-selector --routing=false --style=css cd ngrx-hello-selector/ ng add @ngrx/store@latest ng serve Register the Reducer As in our first article, we will just store a string value in our store. Then register the reducer to read it. If you haven't read it, here is the code. ngrx-hello-selector/src/app/app.reducer.ts const initialState = 'Whatever you are, be a good one.'; const _messageReducer = createReducer( ini

Angular NgRx: A Simple Action

Greetings! This is our second article on our simple NgRx series. As we saw how to read stored value from the Store, let's see how we can change the value using Actions in this article. Yet again, this will be another simple working example. Full working example "Red Light, Green Light" ;) What we need Store initial value Define actions to change it Create reducers to react on the action changes Register the reducer Read, change values Generate the Project ng new ngrx-hello-action --routing=false --style=css cd ngrx-hello-action/ ng add @ngrx/store@latest ng serve As this is to demonstrate, we will add Store realted code in a single file. Initial Value In this example, we will store color value and change it. export const initialState: string = 'red'; Create Action Let us create our red and green actions. export const red = createAction('[Color] Red'); export

Angular NgRx: The Most Simplest Store

Greetings! When learning Angular, one of the difficulties we face (including myself) is understanding NgRx. In theory, it is so simple. However, difficulty is in implementation. I don't want to add lengthy explanations (documentation has better explanation anyway) but want to add simplest working examples incrementatly so that anyone in any level can understand. As usual, here is the code Let's create the most simplest store then :). A simple value stored in the store!!! What we need Store with initial value A reducer A component to read the value Yes, no action, no effects as this example is so simple. Generate the Project ng new ngrx-hello-store --routing=false --style=css cd ngrx-hello-store/ ng add @ngrx/store@latest ng serve Initiate the Reducer We will store a simple message in our store. ngrx-hello-store/src/app/hello.reducer.ts import { Action, createReducer } from '@