![](/.netlify/images?url=_astro%2Fthumbnail.xb9JcOrE.png)
![](/.netlify/images?url=_astro%2Fthumbnail.xb9JcOrE.png)
![](/.netlify/images?url=_astro%2Fangular-material.-RTdTgeB.png)
Sync material tabs with anchor/hash
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.
![](/.netlify/images?url=_astro%2Frxjs.vpVkDcI0.png)
Testing NgRx effects with promises – marbles alternative
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.
![](/.netlify/images?url=_astro%2Frxjs.vpVkDcI0.png)
Testing RxJS observables with Promise – the simplest way
When testing RxJS code, you typically want to verify that your
observables emit the expected values in response to certain actions or events.
See how you can cover those cases using async/await approach.
![](/.netlify/images?url=_astro%2Fthumbnail.4XxvIeJ6.png)
State management in front-end application
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.
![](/.netlify/images?url=_astro%2Ftypescript.nr0D8Vhg.png)
Initialize class property in a declaration, not in a constructor
There is no difference in JS when you split property into declaration
and initialization so you can choose the shortest
version: declare and initialize in the same line.
![](/.netlify/images?url=_astro%2Fangular._t96kuPJ.png)
How to display max length based on FormControl’s validator
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.
![](/.netlify/images?url=_astro%2Fangular._t96kuPJ.png)
How to get the max value from FormControl’s validator
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.
![](/.netlify/images?url=_astro%2Fwordpress.xazqemMy.png)
Add IDs to all headings on a page in WordPress
See how to set the ID attribute for a heading, based on the heading content.
![](/.netlify/images?url=_astro%2Fwordpress.xazqemMy.png)
Removing selected Gutenberg block from post content in WordPress
There are cases where you want to hide a Gutenberg block from readers.
To do it you should add new filter for the_content.
![](/.netlify/images?url=_astro%2Fsvelte.L12nXVb4.png)
How to create a tooltip in Svelte and @floating-ui
Tooltip is a message with information that appears
when you hold a cursor over a piece of text, a button, or an icon.
See how to create a tooltip using action in Svelte and @floating-ui for positioning.
![](/.netlify/images?url=_astro%2Fangular._t96kuPJ.png)
Functional router guards – the new way of creating guards in Angular
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.
![](/.netlify/images?url=_astro%2Fangular-cdk.QKVM489C.png)
Create a custom select component with typeahead built on @angular/cdk in Angular
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.
![](/.netlify/images?url=_astro%2Fhtml.Ip3IKKoZ.png)
Submit button outside a form
button is an element that can perform an action or trigger an event when clicked.
It can have one of three types: submit, reset, or button.
In this article, we will take a look at how to add submit button outside a form.
![](/.netlify/images?url=_astro%2Fangular._t96kuPJ.png)
Lazy loaded stepper base on a route in Angular
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.
![](/.netlify/images?url=_astro%2Fwordpress.xazqemMy.png)
Display an error message in the admin panel if a plugin is not activated in WordPress
As a WordPress theme developer, you may encounter situations
where a plugin is required to use a particular functionality on a theme.
In such cases, it's important to check if the required plugin is installed and activated.
If the plugin is not installed, it is nice to display an error message
to inform the user that the feature is not available and that the plugin needs to be installed.
![](/.netlify/images?url=_astro%2Fcypress.QDbHO4Jt.png)
Get multiple aliases at once without callbacks in Cypress
Aliases are a powerful feature in Cypress that allows you to
create references to elements on a web page and use them in subsequent commands.
However, it can be tedious to get multiple aliases one by one,
especially if you need to reference a large number of elements.
See how to write a command to get many aliases at once.
![](/.netlify/images?url=_astro%2Frxjs.vpVkDcI0.png)
How to create custom pipe operators in RxJS
RxJS is a popular library for reactive programming in JavaScript,
and creating custom pipe operators can help simplify complex data transformations.
In this article, we'll explore how to create a custom pipe operator in RxJS.
![](/.netlify/images?url=_astro%2Fangular._t96kuPJ.png)
How to check if a FormControl has a `min` validator
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.
![](/.netlify/images?url=_astro%2Frxjs.vpVkDcI0.png)
Subject vs BehaviorSubject vs ReplaySubject vs AsyncSubject – what and when
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.
![](/.netlify/images?url=_astro%2Ftypescript.nr0D8Vhg.png)
The argument of type <Interface> is not assignable to the parameter of type Record<string, string>
This error message indicates that you are trying to pass an argument of type Interface
to a function or method that expects a value of type Record<string, string>. See how to fix this.
![](/.netlify/images?url=_astro%2Fangular._t96kuPJ.png)
Interview question and answers for Regular Angular developer
See the list of interview questions and answers for a regular Angular developer position.
The questions cover a good understanding of the Angular framework
![](/.netlify/images?url=_astro%2Fangular._t96kuPJ.png)
Interview questions for Junior Angular developer
See the list of interview questions and answers for a junior
Angular developer position. The questions cover Angular basics topics.
![](/.netlify/images?url=_astro%2Fangular._t96kuPJ.png)
How to unsubscribe RxJs Observable in Angular
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.
![](/.netlify/images?url=_astro%2Fangular._t96kuPJ.png)
Runtime environment configuration for dev/test/prod without rebuilding Angular application
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.
![](/.netlify/images?url=_astro%2Fangular-forms.odye1l1G.png)
How to correctly disable submit button in reactive forms in Angular
In this article, you can learn why you should always disable buttons with !form.valid.
![](/.netlify/images?url=_astro%2Fangular._t96kuPJ.png)
How to observe @Input in Angular with RxJs
Angular does not provide something like AsyncInput,
but you can work around with ReplaySubject
![](/.netlify/images?url=_astro%2Fangular._t96kuPJ.png)
Lifecycle hooks as observable
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.
![](/.netlify/images?url=_astro%2Fangular._t96kuPJ.png)
Combine multiple *ngIf with an async pipe into one
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.
![](/.netlify/images?url=_astro%2Fangular-cdk.QKVM489C.png)
How to create a tooltip with @angular/cdk
See how to create a simple but powerful tooltip
directive using the `@angular/cdk` and `OverlayModule`.
![](/.netlify/images?url=_astro%2Fangular-forms.odye1l1G.png)
How to automatically add an asterisk (*) for required fields in the reactive form using Angular
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.