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. …

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…

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…

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…

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.

…

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…

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…

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 …