Blog
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.
All Posts
Transform Your Angular Material Buttons with Custom Colors, Sizes, and Professional Styling
Angular Material provides a solid foundation for building modern web applications, but if you've been working with it for a while, you've probably noticed that the default button options can feel somewhat limited. While the four standard button types—filled, elevated, outlined, and text—work well for basic use cases, they don't always provide the flexibility needed for more sophisticated user interfaces.
YouTube Style Collapsible Sidebar with Angular Material
In one of my recent projects, I stumbled upon the YouTube Studio sidebar and was captivated by its smooth animations and sleek design. Inspired, I set out to replicate this sidebar in an Angular application, utilizing Angular Material to achieve a similar look and feel. In this blog post, I'll walk you through how I accomplished the following, step-by-step.
2023 in review - what I gained and lost!
So here's a short recap of what I was upto this past year 2023. And I also give a tentative plan I have in mind for what to expect for my viewers and supporters in 2024.
Angular 17 Defer block: Create a Lazy-loaded Youtube Player for a blog!
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.
Don't use Signals with Angular Reactive Forms
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.
How to build an Image Cropper Control in Angular
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!
How to use Signals with Angular Forms
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.
I refactored my Angular and Firebase Sign up App from RxJS to Promises!
Refactoring Angular Code: From Observables to Promises
I refactored my Angular and Firebase Sign up App to Signals!
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!
How to create a Dark Mode with Angular and TailwindCSS
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.
Create a responsive card grid in Angular with CSS (2023 edition)
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.
Angular Signals + Firebase: Bye Bye RxJS?
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?
Create a Simple Contacts App with Angular Signals (2/2)
Let's continue with our Angular Signals introduction by building a simple contacts app.
Create a Simple Contacts App with Angular Signals (1/2)
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!
How to upgrade to the new Angular Typed Forms!
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.
Create a responsive sidebar menu with Angular Material
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.
How to add loading spinner in Angular with RxJS
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.
Create Multi Select List with Angular CDK Selection Model
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.
How to add infinite scroll to Angular material list
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.
Create Dynamic Form Controls in Angular with FormArray
In this tutorial, we'll learn how to create dynamic form controls in Angular using Angular FormArray API.
How to add Async Validation to Angular Reactive Forms
In this article, we'll learn how to add async validation to your Angular reactive forms.
Simple State Management in Angular with NGRX Component Store
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.
Angular Material Dark Mode in 3 steps
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.
How to lazy load Angular Material Dialogs
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+.
Create Reusable Confirmation Dialogs with Angular Material
In this post, I'll show you how to create reusable confirmation dialogs, using Angular services and the Material Dialog component.
How to fix Cumulative Layout Shift (CLS) issues on your Wordpress website
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!
Multi-Slot Content Projection in Angular
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.
Better Angular Components with Content Projection
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.
Create a responsive card grid with TailwindCSS and Angular
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!
Create a blog post card layout with Angular and TailwindCSS
In this article, we'll create a blog post card layout using Angular and TailwindCSS and it's utility first pattern.
How to add TailwindCSS in Angular 11.2
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.
Add spring animations to your angular app with popmotion
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.
Create a responsive card grid in Angular using Flex Layout
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.
Angular vs React: a code comparison for developers
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!
Is freelancing a viable career path for you?
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.
Design a Weather Card With Angular Material and CSS
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 in review: From developer to content creator
2020 has been a tumultuous year for most people. And this is surprisingly been the same across the world since the Covid pandemic hit.
Create a multi select chips component with Angular Material
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.
Angular material tabs with lazy loaded routes
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.
Angular Animations: Create a card flip animation
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!
How to create a card memory game in Angular
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.
Fastest way to make a responsive card grid with CSS
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!
How to add code splitting to your Angular app
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.
Generate PDF in Angular with PDFMake
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.
Top 5 must-know CSS layout techniques
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!
Truncate multiple line text in Angular like a pro
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: Creating a Weather App
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!
Create a responsive navbar in Angular using Flex Layout
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!
Upgrading your app to Angular 9: A short guide
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.