
This article explains one of the possible ways to build different types of HttpClients for different feature modules (including non-lazy loaded) and associate a set of interceptors with each HttpClient type to ensure more reliable architecture.
This article explains one of the possible ways to build different types of HttpClients for different feature modules (including non-lazy loaded) and associate a set of interceptors with each HttpClient type to ensure more reliable architecture.
This article explains one of the possible ways to build different types of HttpClients for different feature modules (including non-lazy loaded) and associate a set of interceptors with each HttpClient type to ensure more reliable architecture.
Read moreThis article explains one of the possible ways to build different types of HttpClients for different feature modules (including non-lazy loaded) and associate a set of interceptors with each HttpClient type to ensure more reliable architecture.
In JavaScript we often use entities, such as window or navigator. Some of these objects have been there forever. But you might have seen DOCUMENT token used in Angular. Let's discuss why it exists and what we can learn from it to make our apps cleaner and more flexible.
In JavaScript we often use entities, such as window or navigator. Some of these objects have been there forever. But you might have seen DOCUMENT token used in Angular. Let's discuss why it exists and what we can learn from it to make our apps cleaner and more flexible.
Read moreIn JavaScript we often use entities, such as window or navigator. Some of these objects have been there forever. But you might have seen DOCUMENT token used in Angular. Let's discuss why it exists and what we can learn from it to make our apps cleaner and more flexible.
Read moreI want to show how we organized the system of settings for all textfields in Taiga UI with this concept and the power of Dependency Injection in Angular.
I want to show how we organized the system of settings for all textfields in Taiga UI with this concept and the power of Dependency Injection in Angular.
Read moreI want to show how we organized the system of settings for all textfields in Taiga UI with this concept and the power of Dependency Injection in Angular.
Read moreLearn about ng-content, ng-template, ContentChild and structural directives to build Angular material "mat-tree". These are badly documented but powerful and advanced concepts available in Angular.
Learn about ng-content, ng-template, ContentChild and structural directives to build Angular material "mat-tree". These are badly documented but powerful and advanced concepts available in Angular.
Read moreLearn about ng-content, ng-template, ContentChild and structural directives to build Angular material "mat-tree". These are badly documented but powerful and advanced concepts available in Angular.
Read moreIt is time to explore some practices and patterns the community has recognized as harmful or complicated. So let's start with a list of what not to do in NGRX
It is time to explore some practices and patterns the community has recognized as harmful or complicated. So let's start with a list of what not to do in NGRX
Read moreIt is time to explore some practices and patterns the community has recognized as harmful or complicated. So let's start with a list of what not to do in NGRX
Read moreWe are migrating a traditional server-side website to angular step by step. I want to share some experiences of what we have tried in this article.
We are migrating a traditional server-side website to angular step by step. I want to share some experiences of what we have tried in this article.
Read moreWe are migrating a traditional server-side website to angular step by step. I want to share some experiences of what we have tried in this article.
Read moreAnimations are good, but it can be overwhelming sometimes. As developers, we need to allow users to take control of animations. In this article we will learn how we can utilize reduced motion media query to disable angular animations.
Animations are good, but it can be overwhelming sometimes. As developers, we need to allow users to take control of animations. In this article we will learn how we can utilize reduced motion media query to disable angular animations.
Read moreAnimations are good, but it can be overwhelming sometimes. As developers, we need to allow users to take control of animations. In this article we will learn how we can utilize reduced motion media query to disable angular animations.
Read moreNgZone notifies Angular when to perform the change detection process (e.g. a DOM event with bound listener is one of the triggerers). However, if in response to an event you directly manipulate the DOM or simply perform an action which does not require bindings update, the process is redundant.
NgZone notifies Angular when to perform the change detection process (e.g. a DOM event with bound listener is one of the triggerers). However, if in response to an event you directly manipulate the DOM or simply perform an action which does not require bindings update, the process is redundant.
Read moreNgZone notifies Angular when to perform the change detection process (e.g. a DOM event with bound listener is one of the triggerers). However, if in response to an event you directly manipulate the DOM or simply perform an action which does not require bindings update, the process is redundant.
Read moreI keep telling people that Angular is way more powerful than what youtube teaches. Learning design patterns will help to create powerful components. Let's learn to create an Angular component, iterate over it to make it reusable, scalable, and powerful.
I keep telling people that Angular is way more powerful than what youtube teaches. Learning design patterns will help to create powerful components. Let's learn to create an Angular component, iterate over it to make it reusable, scalable, and powerful.
Read moreI keep telling people that Angular is way more powerful than what youtube teaches. Learning design patterns will help to create powerful components. Let's learn to create an Angular component, iterate over it to make it reusable, scalable, and powerful.
Read moreThis article will give you a step by step walkthrough on implementing a realtime database in your Angular Apps using Firebase Cloud Firestore.
This article will give you a step by step walkthrough on implementing a realtime database in your Angular Apps using Firebase Cloud Firestore.
Read moreThis article will give you a step by step walkthrough on implementing a realtime database in your Angular Apps using Firebase Cloud Firestore.
Read moreHave you ever realized that you often repeat the same patterns across multiple files? Creating schematics that override well-known Angular schematics, designing them based on project needs will enhance your development and reduce time spent on generating files.
Have you ever realized that you often repeat the same patterns across multiple files? Creating schematics that override well-known Angular schematics, designing them based on project needs will enhance your development and reduce time spent on generating files.
Read moreHave you ever realized that you often repeat the same patterns across multiple files? Creating schematics that override well-known Angular schematics, designing them based on project needs will enhance your development and reduce time spent on generating files.
Read moreAngular Universal is an open-source project that extends the functionality of @angular/platform-server. The project makes server-side rendering possible in Angular. This article will discuss the issues and possible solutions we encountered while developing a real application with Angular Universal.
Angular Universal is an open-source project that extends the functionality of @angular/platform-server. The project makes server-side rendering possible in Angular. This article will discuss the issues and possible solutions we encountered while developing a real application with Angular Universal.
Read moreAngular Universal is an open-source project that extends the functionality of @angular/platform-server. The project makes server-side rendering possible in Angular. This article will discuss the issues and possible solutions we encountered while developing a real application with Angular Universal.
Read moreAs a web developer you may have noticed a repetitive boiler plate code of displaying a loader while an asynchronous request is being processed, then switching to the main view or displaying an error. Personally, I noticed these repetitions both in my code and other developers I work with. And even worse than the repetitive code is the fact that there are no indications for missing state views (such as unhandled errors or a missing loader). <div *ngIf="data$ | async as data"> <ng-container *ng
As a web developer you may have noticed a repetitive boiler plate code of displaying a loader while an asynchronous request is being processed, then switching to the main view or displaying an error. Personally, I noticed these repetitions both in my code and other developers I work with. And even worse than the repetitive code is the fact that there are no indications for missing state views (such as unhandled errors or a missing loader). <div *ngIf="data$ | async as data"> <ng-container *ng
Read moreAs a web developer you may have noticed a repetitive boiler plate code of displaying a loader while an asynchronous request is being processed, then switching to the main view or displaying an error. Personally, I noticed these repetitions both in my code and other developers I work with. And even worse than the repetitive code is the fact that there are no indications for missing state views (such as unhandled errors or a missing loader). <div *ngIf="data$ | async as data"> <ng-container *ng
Read moreIt's not uncommon to see the words 'unsubscribe', 'memory leaks', 'subject' in the same phrase when reading upon RxJS-related materials. In this article, we're going to tackle this fact and by the end of it you should gain a better insight as to why memory leaks occur.
It's not uncommon to see the words 'unsubscribe', 'memory leaks', 'subject' in the same phrase when reading upon RxJS-related materials. In this article, we're going to tackle this fact and by the end of it you should gain a better insight as to why memory leaks occur.
Read moreIt's not uncommon to see the words 'unsubscribe', 'memory leaks', 'subject' in the same phrase when reading upon RxJS-related materials. In this article, we're going to tackle this fact and by the end of it you should gain a better insight as to why memory leaks occur.
Read moreWhen building a client application, some requests to the server are identical regardless of the specific view the user is in. A cache eliminates redundant HTTP calls and may also help reduce the number of potential future HTTP calls if it implements some additional logic.
When building a client application, some requests to the server are identical regardless of the specific view the user is in. A cache eliminates redundant HTTP calls and may also help reduce the number of potential future HTTP calls if it implements some additional logic.
Read moreWhen building a client application, some requests to the server are identical regardless of the specific view the user is in. A cache eliminates redundant HTTP calls and may also help reduce the number of potential future HTTP calls if it implements some additional logic.
Read moreWe cannot use HostBinding with Observable data — it requires a plain value. This is a pretty sought-after feature. Let’s see how we can implement it while we wait for official support.
We cannot use HostBinding with Observable data — it requires a plain value. This is a pretty sought-after feature. Let’s see how we can implement it while we wait for official support.
Read moreWe cannot use HostBinding with Observable data — it requires a plain value. This is a pretty sought-after feature. Let’s see how we can implement it while we wait for official support.
Read moreIn this article we will learn about two ways to implement reactive and reusable forms that have the capability to be used as sub-forms and also be used as standalone forms.
In this article we will learn about two ways to implement reactive and reusable forms that have the capability to be used as sub-forms and also be used as standalone forms.
Read moreIn this article we will learn about two ways to implement reactive and reusable forms that have the capability to be used as sub-forms and also be used as standalone forms.
Read moreIf you see a project ridden with problems and bad practices, it might be tempting to start refactoring right away. But it is important to clear up several issues before getting to work.
If you see a project ridden with problems and bad practices, it might be tempting to start refactoring right away. But it is important to clear up several issues before getting to work.
Read moreIf you see a project ridden with problems and bad practices, it might be tempting to start refactoring right away. But it is important to clear up several issues before getting to work.
Read moreUndoubtedly, it’s a wide array of operators that makes the RxJS library extremely powerful utility in a developer’s tool belt. In this blog post, I will introduce you to the concept of custom RxJS operators and present exemplary implementations.
Undoubtedly, it’s a wide array of operators that makes the RxJS library extremely powerful utility in a developer’s tool belt. In this blog post, I will introduce you to the concept of custom RxJS operators and present exemplary implementations.
Read moreUndoubtedly, it’s a wide array of operators that makes the RxJS library extremely powerful utility in a developer’s tool belt. In this blog post, I will introduce you to the concept of custom RxJS operators and present exemplary implementations.
Read moreA headless component is one that provides behavior to its children, and allows the children to decide the actual UI to render while incorporating the behavior provided by the parent. In this article, we explore an example of a headless component, and the problems they help us solve.
A headless component is one that provides behavior to its children, and allows the children to decide the actual UI to render while incorporating the behavior provided by the parent. In this article, we explore an example of a headless component, and the problems they help us solve.
Read moreA headless component is one that provides behavior to its children, and allows the children to decide the actual UI to render while incorporating the behavior provided by the parent. In this article, we explore an example of a headless component, and the problems they help us solve.
Read moreLearn how to build extensible applications with Angular and reuse your code and abilities to build apps for any deployment target - web, mobile web, iOS, Android, macOS, Windows and Linux.
Learn how to build extensible applications with Angular and reuse your code and abilities to build apps for any deployment target - web, mobile web, iOS, Android, macOS, Windows and Linux.
Read moreLearn how to build extensible applications with Angular and reuse your code and abilities to build apps for any deployment target - web, mobile web, iOS, Android, macOS, Windows and Linux.
Read moreExplanation in detail about how map and pluck work, and then figuring out main difference between two operators
Explanation in detail about how map and pluck work, and then figuring out main difference between two operators
Read moreExplanation in detail about how map and pluck work, and then figuring out main difference between two operators
Read moreIn my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.
In my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.
Read moreIn my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.
Read moreIn software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.
In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.
Read moreIn software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.
Read moreJust before new year we announced our new Angular UI kit library Taiga UI. If you go through Getting started steps, you will see that you need to wrap your app with the tui-root component. Let's see what it does and explore what portals are and how and why we use them.
Just before new year we announced our new Angular UI kit library Taiga UI. If you go through Getting started steps, you will see that you need to wrap your app with the tui-root component. Let's see what it does and explore what portals are and how and why we use them.
Read moreJust before new year we announced our new Angular UI kit library Taiga UI. If you go through Getting started steps, you will see that you need to wrap your app with the tui-root component. Let's see what it does and explore what portals are and how and why we use them.
Read moreWe are happy to announce that we published our big Angular component library into open source! In this article I want to write about concepts and practices that we build our library with
We are happy to announce that we published our big Angular component library into open source! In this article I want to write about concepts and practices that we build our library with
Read moreWe are happy to announce that we published our big Angular component library into open source! In this article I want to write about concepts and practices that we build our library with
Read moreThe American poet Edward Estlin Cummings was famous for his eccentric use of spacing and capitalization, to the point that his name is usually styled as e e cummings. I wonder what he would think of an RxJS question that a friend asked me: “Is returning throwError the same as writing ‘throw error’?”
The American poet Edward Estlin Cummings was famous for his eccentric use of spacing and capitalization, to the point that his name is usually styled as e e cummings. I wonder what he would think of an RxJS question that a friend asked me: “Is returning throwError the same as writing ‘throw error’?”
Read moreThe American poet Edward Estlin Cummings was famous for his eccentric use of spacing and capitalization, to the point that his name is usually styled as e e cummings. I wonder what he would think of an RxJS question that a friend asked me: “Is returning throwError the same as writing ‘throw error’?”
Read moreImagine we need to create reusable context help component that can be easily added as an attribute to any DOM element.
Imagine we need to create reusable context help component that can be easily added as an attribute to any DOM element.
Read moreImagine we need to create reusable context help component that can be easily added as an attribute to any DOM element.
Read moreIn this tutorial, I will explain how to manage your component’s state with @ngrx/component-store. You will do it in a more organised way and minimise bugs and UI inconsistencies.
In this tutorial, I will explain how to manage your component’s state with @ngrx/component-store. You will do it in a more organised way and minimise bugs and UI inconsistencies.
Read moreIn this tutorial, I will explain how to manage your component’s state with @ngrx/component-store. You will do it in a more organised way and minimise bugs and UI inconsistencies.
Read moreAngular uses TypeScript because TypeScript provides us with the tooling to create more robust applications. I'm talking about tools for type safety. But tons of developers aren't using the provided tools. They just create applications as they did 10 years ago using JavaScript.
Angular uses TypeScript because TypeScript provides us with the tooling to create more robust applications. I'm talking about tools for type safety. But tons of developers aren't using the provided tools. They just create applications as they did 10 years ago using JavaScript.
Read moreAngular uses TypeScript because TypeScript provides us with the tooling to create more robust applications. I'm talking about tools for type safety. But tons of developers aren't using the provided tools. They just create applications as they did 10 years ago using JavaScript.
Read moreExploring partial hydration by building static site generator with React
Exploring partial hydration by building static site generator with React
Read moreExploring partial hydration by building static site generator with React
Read moreMost static site generators are complete overkill for simple blogs. This article explores how you can build your own generator using htm library in just 20 lines of code.
Most static site generators are complete overkill for simple blogs. This article explores how you can build your own generator using htm library in just 20 lines of code.
Read moreMost static site generators are complete overkill for simple blogs. This article explores how you can build your own generator using htm library in just 20 lines of code.
Read moreWe explore how a small adjustment can guarantee Good Action Hygiene, lead to extensible reducers and lower the high code-cost of NgRx.
We explore how a small adjustment can guarantee Good Action Hygiene, lead to extensible reducers and lower the high code-cost of NgRx.
Read moreWe explore how a small adjustment can guarantee Good Action Hygiene, lead to extensible reducers and lower the high code-cost of NgRx.
Read moreFollow me in this play-by-play guide and let's integrate Jest within your Angular project!
Follow me in this play-by-play guide and let's integrate Jest within your Angular project!
Read moreFollow me in this play-by-play guide and let's integrate Jest within your Angular project!
Read moreIn this article we demonstrate how to use ngTemplateOutlet, along with ngTemplateOutletContext, to make a component completely customisable.
In this article we demonstrate how to use ngTemplateOutlet, along with ngTemplateOutletContext, to make a component completely customisable.
Read moreIn this article we demonstrate how to use ngTemplateOutlet, along with ngTemplateOutletContext, to make a component completely customisable.
Read moreWe can use action and data streams declaratively to react to user actions. Leveraging the power of RxJs operators we can transform our data and allow our template to subscribe to the Observable using the Async pipe.
We can use action and data streams declaratively to react to user actions. Leveraging the power of RxJs operators we can transform our data and allow our template to subscribe to the Observable using the Async pipe.
Read moreWe can use action and data streams declaratively to react to user actions. Leveraging the power of RxJs operators we can transform our data and allow our template to subscribe to the Observable using the Async pipe.
Read moreIn this article, we will learn how to create a directive in Angular that will allow us to freely drag any element, without using any 3rd party libraries.
In this article, we will learn how to create a directive in Angular that will allow us to freely drag any element, without using any 3rd party libraries.
Read moreIn this article, we will learn how to create a directive in Angular that will allow us to freely drag any element, without using any 3rd party libraries.
Read moreRendering Components with component selector name along with lazy module loading. The approach that works with Angular Ivy & AOT compilation.
Rendering Components with component selector name along with lazy module loading. The approach that works with Angular Ivy & AOT compilation.
Read moreRendering Components with component selector name along with lazy module loading. The approach that works with Angular Ivy & AOT compilation.
Read moreLearn Gitlab to build a CI/CD pipeline for Angular apps and libraries. This first article introduces Gitlab pipelines. At the end, you'll get a pipeline fetching project dependencies and running build and tests. It comes with many optimizations and reports integration in merge requests.
Learn Gitlab to build a CI/CD pipeline for Angular apps and libraries. This first article introduces Gitlab pipelines. At the end, you'll get a pipeline fetching project dependencies and running build and tests. It comes with many optimizations and reports integration in merge requests.
Read moreLearn Gitlab to build a CI/CD pipeline for Angular apps and libraries. This first article introduces Gitlab pipelines. At the end, you'll get a pipeline fetching project dependencies and running build and tests. It comes with many optimizations and reports integration in merge requests.
Read moreAt inDepth we strongly believe that writing technical articles is one of the most effective ways to learn a topic at a deeper level. Investing your time and effort into acquiring valuable knowledge and sharing it with peers is the most rewarding path to professional growth.
At inDepth we strongly believe that writing technical articles is one of the most effective ways to learn a topic at a deeper level. Investing your time and effort into acquiring valuable knowledge and sharing it with peers is the most rewarding path to professional growth.
Read moreAt inDepth we strongly believe that writing technical articles is one of the most effective ways to learn a topic at a deeper level. Investing your time and effort into acquiring valuable knowledge and sharing it with peers is the most rewarding path to professional growth.
Read moreAngular 11 is released, and it was focused on improving the type safety of APIs and fixing the issues. Let's go through the changes introduced in this version.
Angular 11 is released, and it was focused on improving the type safety of APIs and fixing the issues. Let's go through the changes introduced in this version.
Read moreAngular 11 is released, and it was focused on improving the type safety of APIs and fixing the issues. Let's go through the changes introduced in this version.
Read moreThe journey from SASS based theming to CSS3 variables for Angular app and its libraries.
The journey from SASS based theming to CSS3 variables for Angular app and its libraries.
Read moreThe journey from SASS based theming to CSS3 variables for Angular app and its libraries.
Read moreVisual regression testing is a robust technic that improves our suite of tests, by literarily taking a screenshot of an element, component, or page in a determined state and then use it to compare the latest state of that element.
Visual regression testing is a robust technic that improves our suite of tests, by literarily taking a screenshot of an element, component, or page in a determined state and then use it to compare the latest state of that element.
Read moreVisual regression testing is a robust technic that improves our suite of tests, by literarily taking a screenshot of an element, component, or page in a determined state and then use it to compare the latest state of that element.
Read moreIntroduced in 2015 with ECMAScript6, template literals let us dynamically construct strings of text and embedded expressions, even multi-line strings of text, in a more elegant way than concatenation.
Introduced in 2015 with ECMAScript6, template literals let us dynamically construct strings of text and embedded expressions, even multi-line strings of text, in a more elegant way than concatenation.
Read moreIntroduced in 2015 with ECMAScript6, template literals let us dynamically construct strings of text and embedded expressions, even multi-line strings of text, in a more elegant way than concatenation.
Read moreHere I will walk you through a step-by-step guide on how to lazy load the common styles specific to a feature module.
Here I will walk you through a step-by-step guide on how to lazy load the common styles specific to a feature module.
Read moreHere I will walk you through a step-by-step guide on how to lazy load the common styles specific to a feature module.
Read moreEver since mobile devices became capable of accessing the web, it became obvious that not all web pages are usable on a small screen. Today most websites implement responsive design, but often at a cost of extra DOM. This post will show you how to solve that last step in Angular.
Ever since mobile devices became capable of accessing the web, it became obvious that not all web pages are usable on a small screen. Today most websites implement responsive design, but often at a cost of extra DOM. This post will show you how to solve that last step in Angular.
Read moreEver since mobile devices became capable of accessing the web, it became obvious that not all web pages are usable on a small screen. Today most websites implement responsive design, but often at a cost of extra DOM. This post will show you how to solve that last step in Angular.
Read more