I've been blogging on and off for the past few years, especially on developing web apps with Angular. Sometimes, I also write about CSS or other web development areas. Use the search below to find any of my articles.
Interested in maximizing your Angular app's efficiency by learning how to lazy load components using the new Defer block in Angular v17? In this post, I'll walk you through the details of building a lazy-loaded video component and explore the various options available to trigger lazy loading.
Hey folks! In a recent post about Angular signals and forms, I mentioned some potential issues when using Angular signals with the Reactive Forms API. Today, let's take a deep dive to fully understand this gray area and find some good solutions.
In this tutorial we'll be exploring how to build a robust Image Control Component in Angular that enables users to crop their photos to preferred dimensions right before they get uploaded to the server. If you've ever wondered how to do this, you're about to find out!
Welcome everyone! Today, we're going to delve into how to use signals with your Angular forms and identify the best strategy to implement them.
Refactoring Angular Code: From Observables to Promises
In this blog post, we'll take a look at an Angular application I developed that uses Firebase for user authentication with RxJS Observables. We'll refactor the application as we convert from Observables to the Signals API in Angular version 16. Let's dive in!
As developers, we strive to make user experience as great as possible. Dark mode has become an essential modern web app feature that enhances user convenience, especially for those who prefer a softer light on their screens during low light conditions.
Don’t you just love a good card grid? Well, I know I do. Card grids light up the web! They allow us to present our information in a user friendly way - using images and graphics as we please.
I built a simple contacts app recently with Angular signals and firebase and discovered that I didn’t actually need to use RxJS at all. The app does everything that a typical CRUD app should do - so this got me thinking - with signals do we even need RxJS anymore?
Let's continue with our Angular Signals introduction by building a simple contacts app.
The Angular team has introduced a set of new reactive primitives in v16 called Signals. In this article, I'm going to introduce you to the concept of Angular Signals and we're going to build up a simple contacts app using signals and material components!
Angular 14 was an exciting release because it finally brought out Typed Forms. But how do we go about using them? In this article, I’ll show you exactly how to do it along with some tips and tricks to make your form code better.
Sidebar navigation menus are the most common layout pattern used by web apps nowadays. But most of the components that we have are not really responsive. In this article I'm going to walk you through creating a truly responsive sidebar navigation menu in Angular using the Angular Material library.
In this article, we'll learn how to add a simple loading spinner in Angular using RxJS and then use an HttpInterceptor to automatically show a loader on all network calls in our Angular app.
In a previous post, we created an Angular material list with infinite scroll. In this post, we're going to convert that into a Multi Select List with the Angular CDK Selection Model.
If you've ever had to deal with large lists in your web app, you're probably familiar with infinite scroll. Infinite scroll is a common UI/UX solution to the problem of presenting a large list to your users as when they need it. In this article, we're going to add an infinite scroll in Angular using the Angular CDK library.
In this tutorial, we'll learn how to create dynamic form controls in Angular using Angular FormArray API.
In this article, we'll learn how to add async validation to your Angular reactive forms.
In this article, I'm going to show you a simple way to introduce state management into your Angular apps with the NGRX Component Store package.
A dark mode is a must-have little feature for your Angular web application. It is easier on the eyes and less draining for your smartphone battery.
In an earlier post, I showed you how to create reusable confirmation dialogs with angular material components. In this video, we'll cover how to lazy load your material dialogs using an advanced way with Angular v9+.
In this post, I'll show you how to create reusable confirmation dialogs, using Angular services and the Material Dialog component.
Recently, I resolved long standing issues on my wordpress blog related to the Cumulative Layout Shift (or CLS) metric in Core Web Vitals. Since it took me a while to fix it, I want to share what I did in the hope that it helps someone else!
In a previous article, I introduced you to the concept of Content Projection in Angular and how it can be used to design flexible components. In this article, I'll continue with that and show you how to add multi-slot content projection in Angular.
In this short article, I'll introduce you to the concept of content projection in Angular and how we can use it to create reusable but more flexible components in our apps.
In a previous article, we built up a nice card view layout with TailwindCSS and Angular. In this article, we'll continue with that and convert it into a responsive card grid with TailwindCSS - without writing a single line of CSS!
In this article, we'll create a blog post card layout using Angular and TailwindCSS and it's utility first pattern.
In this article, I'll quickly show you how to add TailwindCSS to your Angular 11.2 app so you can get building your layouts with it.
You might have heard of spring animations recently with popular libraries such as react-spring and Framer Motion in the React world. I was on a hunt recently for a similar package in Angular, but found it missing. Angular's own animation API is quite powerful, but it relies on CSS based animations which are difficult to map to spring based animations.
If you're developing a web app in the year 2023, then it is expected that you'll be handling the layout for different screen sizes. Most of your users will probably be on their mobile devices! Angular Flex Layout is a great tool in your hands - to make sure your layouts work well on all devices.
Being an Angular developer, I've always been curious about the React ecosystem and how to code in React. Recently, I dived into learning more about React and as a result coded up a simple app in both Angular and React to study the differences. I'm now able to do an Angular and React code comparison!
I get asked about a freelancing career a lot. In fact, almost all the time nowadays when I tell people what I do for a living.
Cards an essential UI element nowadays for almost any web application. Here is how to create a simple Angular Material card which shows the weather for today.
2020 has been a tumultuous year for most people. And this is surprisingly been the same across the world since the Covid pandemic hit.
I was going through the material design spec document the other day and came across the ever so versatile material chips. They're versatile in the sense that you can use them as action buttons, filter buttons or selection buttons depending on your use case. For instance, I wanted to use them as multi select chips.
Tabs are a great UI pattern to divide up complex content of your web app into easily digestible pieces. You can use a few tabs or several tabs, each catering to a different section in your app.
Animations add a nice touch to any application, if they're used in suitable places and not overdone. But when you're developing games, they are an absolute must!
Angular is usually associated with creating great enterprise level applications. However, that is not all the framework can do! In this article, I'm going to explain how I came up with a card memory game in Angular from scratch. It is inspired from a real card game we used to play when we were kids to test our memory.
A few months ago I wrote about how to set up a responsive card grid using the Angular Flex Layout library. It proved quite useful to a lot of people, with more than 6000 views till now!
As web apps grow in their capabilities, we also see an increase in their bundle sizes. At one hand we need to ship more code for cool new features. On the other hand, we also need third party libraries and their code for everything to work.
Recently I worked on a feature for a client that involved generating a PDF document from his Angular web application. After some research we decided to use PDFMake for this purpose.
CSS is often seen as a bane by many web developers. It is not like your typical programming language and can be a bit hard to understand. However, you can learn a few common CSS layout techniques to make it all easier!
Truncation is a common problem when developing user interfaces with varying lengths of text. While truncating a single line of text is easy through good old CSS, how to truncate multiple line text can be a challenge!
RxJS in Angular can seem a bit difficult at first. But once you learn to leverage its power, it makes your code cleaner and more readable!
Designing a navbar (or a toolbar) is easy for one screen size, but to make a truly responsive navbar, Flex Layout provides us with some neat tricks we can use!
Angular 9 is here in all it's glory and you want to try it out as soon as you want. However, there is just this problem of your existing app and its complexity that makes you want to really think before taking the jump. Well, here is a small guide to help you through the process.