Nikša Fantela

Feb 26
Typescript const assertions in practice
With Typescript 3.4 we got const assertions. Armed with this knowledge we can take a look at the following demo: Fixating type with const assertion First we declare our type : Genres that will be used to make a stronger type than string e.g. 'comedy' | 'horror'. In the demo above we can see that when we create an object (without declaring its type) firstBook, Typescript will infer genre to string since no other information is provided.
Jan 25
Typescript Template Literal Types
By using great new Typescript 4.1 feature Template Literal Types we can do some type sorcery :). Before we start make sure you are familiar with Typescript Conditional Types. Most common and useful example is extracting route params so let us give it a go:
Oct 27
Recursion in Angular components
On occassion we will need to use recursion to display some data (e.g. nested array structures). Luckily Angular components can be called from their own template. Let us try it out: Simple recursion component This is basic recursion at work - we call component in its own template until we reach 0. More complex example - nested arrays The most practical example is nested array structures that should be presented in Tree like structure.
Oct 14
Custom RXJS Operator : delayFirstEmmisionBy
I ran accross an use case when first emmision needed to be delayed by X seconds and therefore had to resort to making my own custom operator. Take first emmision and then resubscribe
Sep 3
Javascript Currying and Pipes
If you have ventured in RxJS the concept of .pipe() is very fammiliar. Here we will recreate simmilar functionality Creating our two main functions Curry Simple enough, we take in Function as argument and return a function. If the arguments length is greater than passed Fn arguments length we immediately call it. If not we return a new bound function. Pipe We take in array of functions and in our case return a function taking in 1 argument.
Aug 17
Observable based preloading service
Recently I came across on interesting Angular talk concerning preloading of modules in Angular on demand. By combining the power of RxJs and Observable based services here is a solution that pre-loads modules from anywhere in Angular app using user events etc. NetworkAwarePreloadOnDemand service Here we extend basic class implementing Angular s PreloadingStrategy interface with Observable. The observable connects subscriber of this class to inner private Subject. The subject is exposed as observable in our main method preload().
Jul 23
Local storage as Observable Service
A quick and simple example of creating a stream for your entire local storage. We will use an Observable based service. Our service holds _entireStorage$:BehaviorSubject<Map<string, string>> subject that we will subscribe all users of this service to in constructor. This will handle multicasting. Other than that we have 3 very simple methods - adding and removing of items from local storage (these are public and can be used in components / directives using this service) and _allStorage that basicaly gathers entire storage into a map.
Jul 16
Power of Css selectors in Angular directives
I was recently suprised on how cool you can actualy make your directive selectors in Angular by adhering to css selector rules. In this short example we will showcase the use of :not(). Below is a simple example of two different directives using basicaly same selector. Now we know we can attach multiple directives to same DOM node however in this case only second directive would be rendered.
Jun 23
RxJS Observables Workout
Using RxJS can make new devs and sometimes us experienced ones do “mind melt”. The concepts seem so simple yet when put to action much confusion arises. Needles to say I now love RxJs and creating new stream manipulations for my Angular Observables lead to greater satisfaction while coding. To this end I have prepared some practice in different ways of creating Observables. Simple Observable In the gist above we create a new observable and provide subscriber function.
Jun 15
Bypassing ExpressionChangedAfterItHasBeenChecked Error in Angular
ExpressionChangedAfterItHasBeenCheckedError is one of those things that if you are working with angular…You know. Most often the correct way is to change ngAfterViewInit to ngOnInit lifecycle hook since ngAfterViewInit is run AFTER Angular has modified the DOM. The most preffered way is to redesign your APP but if you have no choice a simple hack is the following. Making it Asynchronous Since this Angular check is run in dev mode and synchronously we will be using microtask queue which is processed after all synchronous tasks.

By using great new Typescript 4.1 feature Template Literal Types we can do some type sorcery :). Before we start make sure you are familiar with Typescript Conditional Types. Most common and useful example is extracting route params so let us give it a go:

I ran accross an use case when first emmision needed to be delayed by X seconds and therefore had to resort to making my own custom operator. Take first emmision and then resubscribe