Implementing a generic Angular Material Snackbar service

When developing web applications, it is common to display feedback messages to users. Snackbar is a popular component in Angular Material that can be used to display such messages. A snackbar is a dismissible message that appears temporarily at a fixed position on the screen. In this blog, we will discuss how to create a …

Running Storybook 6.5 Interaction Tests in a CI Pipeline

Storybook Interaction tests are useful for performing automated testing against your components. Today we will be running interaction tests for an Angular application inside of a Gitlab CI Pipeline. Pipeline Overview Running Storybook Interaction tests requires the following processes: We will be doing this in two jobs: build-storybook-job and run-interaction-tests. Our pipeline is triggered when …

Understanding Zone.js in Angular

Zone.js in Angular Zone.js plays a pivotal role in Angular’s change detection mechanism by helping signal Angular when to perform a change detection cycle. When asynchronous operations are initiated within Angular’s context, Zone.js ensures Angular is aware of these operations’ start and completion, allowing Angular to decide when to check for changes. Disclaimer: Angular has …

Image by rawpixel.com on Freepik

Angular: Understanding change detection

Understanding change detection The secret sauce to Angular’s reactivity and performance is in its change detection strategies and the creative application of those strategies. Change detection is an important mechanism for ensuring the application view stays in sync with the underlying data models, and can respond appropriately when there are changes to these data models. …

Downloading Objects as JSON files in Angular

In our Angular applications , we often create rich data objects that give us insight into how our application is behaving. Whether we’re creating complex state management objects , error logs or diagnostics ,what if you wanted to export this data for further analysis or for users to download? In this blog post, we’ll explore …

Getting started with source map explorer in Angular

What are Source Maps? Source maps are a crucial tool for modern web development, especially in projects that involve complex frameworks like Angular. At their core, source maps are files that map the generated, minified, or transpiled code back to its original source code. They contain information about the relationship between your source code and …

Angular HTTP Interceptors: creating a custom http diagnostics report

What is an Angular Interceptor? Angular interceptors are a powerful mechanism that allows you to intercept HTTP requests and responses. They are a part of Angular’s HTTP client module and can be used to perform various tasks, such as adding headers to requests, handling errors, or, in our case, logging network calls. Creating the HTTP …

Creating a generic session storage implementation in Angular

Creating a generic session storage mechanism in Angular Managing data between page reloads and user interactions is a common challenge. One powerful solution to this problem is the use of browser storage mechanisms like session storage. However, working with session storage can be a complex task, especially when it involves handling different types of data. …