Latest on inDepthDev

Imagine we need to create reusable context help component that can be easily added as an attribute to any DOM element.

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.

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.

We explore how a small adjustment can guarantee Good Action Hygiene, lead to extensible reducers and lower the high code-cost of NgRx.

Follow me in this play-by-play guide and let's integrate Jest within your Angular project!

In this article we demonstrate how to use ngTemplateOutlet, along with ngTemplateOutletContext, to make a component completely customisable.

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.

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.

Rendering Components with component selector name along with lazy module loading. The approach that works with Angular Ivy & AOT compilation.

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.

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.

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.

The journey from SASS based theming to CSS3 variables for Angular app and its libraries.

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.

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.

Here I will walk you through a step-by-step guide on how to lazy load the common styles specific to a feature module.

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.

JWT Tokens are awesome but how do you store them securely in your front-end? We'll go over the pros and cons of localStorage and Cookies.

One of the most popular new features in ECMAScript 2015 is arrow functions. Is it because of the new cleaner syntax or the sharing of this with the parent scope? Maybe both. Let’s look into them in more detail.

In Angular apps, the immutability term is mostly mentioned when you deal with the OnPush change detection strategy. Mutable update patterns may not only prevent you from taking advantage of narrowing a components tree subjected to the change detection, but it also leads to hard to spot bugs/gotchas.

Exploring some handy features provided by Angular Router

Angular CLI v8.0.0 brought us a stable CLI Builders API, which allows you to customize, replace, or even create new CLI commands. Maybe make your own? Challenge Accepted!

The second (and final) part of the step-by-step tutorial on how to implement your own structural directive for binding an Observable to the Angular view.

In this article, we go through the syntax of destructuring both Object and Array and give examples of when you can use them.

@ngrx/component-store selectors have a debounce option that lets the state 'settle' before emitting. In this article we will demonstrate what this means in practice before walking through the code that makes this possible.

We already discussed Mutation observers and Intersection observers in the above article. Let’s continue with the next.

In this article, we will try to clear up the confusion and look into the two ways of using Javascript’s three dots.

Stryker 4.0 is out! This new version of the mutation testing framework for JavaScript and friends brings significant performance and usability improvements. Features include mutation switching, build command support, checker plugin support and better coverage analysis.

Part one of the step-by-step tutorial on how to implement your own structural directive for binding an Observable to the Angular view.

JavaScript proxies were introduced in 2015 with ECMAScript 6. They allow us to intercept and override operations such as object property lookup and assignment. A Proxy object wraps another object and acts as a middleman.

A quick guide to using SCSS in an Angular application that was scaffolded to use the default stylesheet format.

How SolidJS's unique take on SSR lead it to being the fastest JavaScript renderer in the browser and on the server.

The main idea behind the Angular push pipe is a new way of handling change detection locally instead of the global handling used in async pipe by Angular natively. It is implemented in a way we can get zone-less performance in zone-full applications.

In this article, I will explain my learning so far related to Chrome DevTools, which includes some really handy tips for easy debugging.

We often need to create many objects of the same kind, like users or cars. In object-oriented languages, a class is often used for this purpose.JavaScript, being a prototype-based language, has something called constructor functions.

Angular is declarative in nature. Learn how to make your code adhere to this approach by eliminating internal manually managed states & optimize performance

In this article, I am going to start with very basic Angular schematic implementation and slowly build the code for this complete angular-tailwindcss-schematics project. At each milestone, I will share the git commit link to check the code and files at that stage and also explaining the step.

The RouterScroller entity is a very interesting part of the Angular Router. In this post, we're going to have a look at how it works, what makes its features possible and how it can be configured, depending on the developer's needs.

React-Spring is a modern React library based on spring-physics which is highly flexible and it covers almost all of the UI animation needs. It inherits animated powerful interpolations and performance, as well as react-motion’s ease of use.

We are going to discuss the state of RxJS, because the next major version – RxJS 7 – is around the corner. We are going to take a closer look at new features, deprecations, and removals in both v7 and v7.1 and what to look forward to v8.

We will explore to use charts in angular with high level of customizations using ng2-charts.

Angular CLI schematics offer us a way to add, scaffold and update app-related files and modules. In this article I will guide you through some common but currently undocumented helper functions you can use to achieve your goal.

In this article, we introduce variables and scope in JavaScript.

Observer APIs are very useful to detect changes in the applications. The following are the different types of observer APIs in JavaScript. Each type observes different things.

Schematics are a great tool to standarize patterns, enforce best practices, and make sure repositories across large organizations, by automating certain implementations. We have extensively discussed this in previous posts, but now we will demonstrate this in practice.