Image for post
Image for post
Image by Paweł Englender from Pixabay

There are Routines in our lives which become simply tortures for us. There are tons of them in my life. For example I hate to pack my sport suite when I go to the gym, and unpack it again, when I come at home. Definitely this task is just emptiness in time and space for me. Probably the reason is the human nature itsel. We are annoyed doing things which are pointless for us and think that somehow It can be avoided.

The same story goes for resource cleaning in any type of application. Almost all Modern programming languages already…


Image for post
Image for post
Photo by Joanjo Pavon on Unsplash

Iterating over an array and printing/rendering its values, are as old as programming itself. Even our young selves, when we knew too little about HTML or javascript, we used “console.log” inside our “for loop” over and over. It is almost unimaginable to have a serious application without rendering some array content.

Said that It is a must to have feature for every web framework available in the world. All the web frameworks (Angular, React, Vue) they all implement it.

Angular has the ngFor directive, for that. …


Image for post
Image for post

Authorization is a must thing to do in web applications nowadays. It’s like a morning coffee, you need to drink it to be capable of doing important tasks throughout a day.

There are lots of different use cases and scenarios when it comes to the Authorization, but in my frontend career I’ve seen mostly these two patterns

  • a user can navigate somewhere depending on authorization e.g “User profile page”
  • a user can see some elements depending on authorization e.g “Pay button”, “Sign out”…

In Angular, the first problem is already solved using Route Guards. But in the second one, there…


Image for post
Image for post
Photo by Joshua Hoehne on Unsplash

It’s fair to say, that Angular Routing is quite a complex topic. It has tons of configurations and sometimes it’s better to try something and see how it works in a browser than crumble inside the documentation.

But the most annoying part of this module is the caching technique for routing components. There are lots of cases when you want to cache some components upon the route change and reuse it later after the same navigation. In contrast, There are also lots of cases when you want to renew a component every time the route changes. The only documentation I…


Image for post
Image for post
Photo by Fredy Jacob on Unsplash

One of the most important features in Typescript is static typing. You don’t need to remember all the class, method, and variable names, in order to use them. Just start typing and thanks to incredible Typescript and IDE Editors suggestions will pop-up, that fit your needs.

Because of Angular uses Typescript internally, we get the same benefits. But there are some annoying exceptions, where there is no static typing at all. The worst exception for me is Data Property inside Route Object.

Whenever we need to add some unique property to the route object, we need to pass it by…


Image for post
Image for post

A Tab component is an essential part of every web application. Even said so, there are too few open-sourced libraries, that provide it.

Angular Material provides a really flexible and powerful Tab component, but it shifts with a material theme, extra dependencies, and material guidelines.

Creating a Tab component is like a parabola curve. At first, it looks complex, after creating some basic functionalities, it looks much simpler, but after trying to add dynamic functionality, it becomes a complex one again.

But as a whole, it is possible to create a fully dynamic and flexible tab component without much effort.


Image for post
Image for post

Handling Errors is essential when building robust and bug-free web applications. A development team must trace all the Errors, that happened in the production or development phase. In order to do so, an application must have some logging functionality, like sending errors to API.

mostly logging is done manually. we wrap our functionality into the try-catch block or some asynchronous error callback, catch the exception and send it to the server.

Maybe this solution works, It is truly a waste of time, and also there is a high risk, that someone will forget to trace an error.

In this article…


Image for post
Image for post
Photo by Ravi Roshan on Unsplash

Whenever we use a custom async validator, mostly we want to send an HTTP request to a server, and validate the input based on a response. if we navigate to the Angular Documentation, there is no information about how to inject a service into the async validator.

One possible way to inject something inside our validator function is to wrap this function with a creator function and pass parameters by ourselves.

So if I have the following validator:

I could wrap it with a creator function and pass parameters from it:

Then I could use it, somewhere in…


Image for post
Image for post
Image by Momentmal from Pixabay

Using Angular in JQuery is not the best practice but if you want to, or have to, I’ll show how to do it in a few simple steps

Installation

First, install the JQuery library.

npm install jquery --save

We need to install JQuery definition file also, to get IntelliSense support

npm install @types/jquery --save-dev

Import into Application

As we know JQuery is one big javascript object. We cannot import it, like we commonly do inside Angular applications, for example like this:

import { Input} from "@angular/core"

Because of that, firstly, we have to load JQuery inside Angular application. Open angular.json …


Image for post
Image for post
Photo by Joao Branco on Unsplash

Effects are used for side effects in NGRX. They listen for Actions, transform this action into the side effect like network request, web-socket request, Browser API events, etc. and may or may not dispatch new Action from that.

An Effect class is a singleton by default, despite it is created in the Root or Feature level. It never gets destroyed, so all the Action listeners it contains will listen to Store Actions forever. There are scenarios when we want to unsubscribe all the Listeners from the Actions and after a period of time subscribe to them again.

Real-World Scenario

Let’s imagine we…

Luka Onikadze

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store