Angular

See how to create a simple but powerful tooltip directive using the `@angular/cdk` and `OverlayModule`.

This article describes a method for automatically adding an asterisk (*) to required fields in a reactive form using Angular. It uses the built-in validators in Angular to determine if a field is required and then uses a component to add the asterisk to the label of the corresponding form field.

There are cases where checking the type of a variable in a template is necessary. The `@let` block from Angular 18 allows you to define a variable in a template and reuse it in many places. Thanks to that Type Narrowing finally works in Angular templates.

Native select element is used to create a drop-down list of options for users to choose from but does not support searching and typeahead. Because of that, there are situations where developers are forced to create their own select component. See how you can implement custom select with searching with typehead.

In this article, you can learn why you should always disable buttons with !form.valid.

Before Angular v15 we had to create guards as a class which was a big boilerplate even though we had simple logic. Additionally, passing parameters to guard via data was not strict, so we were able to have a typo and the compiler did not throw an error. Everything changed when Angular v15 comes and provides functional router guards.

Unfortunately `hasValidator` does not work well with validators created dynamically like `Validator.max` but there is a solution that allows getting information about max value anyway.

See the list of interview questions and answers for a junior Angular developer position. The questions cover Angular basics topics.

See the list of interview questions and answers for a regular Angular developer position. The questions cover a good understanding of the Angular framework

A stepper is a type of input control that allows the user to increment or decrement a numerical value using predefined steps. See how to create a stepper with lazy loaded steps in Angular.

One of trait of lifecycle in components and directives is that, you can not observe it. If you must do something within one of this lifecycle, you have to declare variable first and then assign value in hook. This can cause some problems, but there is a very simple solution. Check how you can omit this in a very easy way.

Unfortunately `hasValidator` does not work well with validators created dynamically like `Validator.maxLength` but there is a solution that allows getting information about maxLength value anyway.

Unfortunately `hasValidator` does not work well with validators created dynamically like `Validator.min` but there is a solution that allows getting information about min value anyway.

Try to avoid using many async pipes in a single *ngIf directive. Move logic to use RxJs operators instead. See examples of how to do it correctly.

Angular does not provide something like AsyncInput, but you can work around with ReplaySubject

One of the biggest disadvantages of using environment.env.ts is that you have to rebuild your application each time you want to change the configuration and build for each environment separately. But there is a better way where you can download the configuration file before the application runs, which means: one build - many configurations.

You can find plenty of examples showing how state management libraries work, few people focus on it why do we need state management and what problems does it cause (solve?). In this article I will walk you through, step by step, what common application state issues might look like applications and how to deal with them regardless of whether you use because it doesn't matter what you use, only for what purpose.

There are four main types of subjects: Subject, BehaviorSubject, ReplaySubject, and AsyncSubject. In this article, we will explore the differences between these four types and when to use each one.

By default `MatTabsGroup` opens the first available tab. We can change it via input, but a more elegant way is to create a logic to save the selected tab into a URL (thanks to the anchor) and allow users to send a URL with the already selected tab.

You can test effects using marbles but unfortunately, they are very complicated. Instead of marbles, you can test your effects using promises without any trade-offs.

Each time you call subscribe method on RxJs Observable, you should (most of the time) also call unsubscribe. See how you can do it in Angular components.