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 fo…
Angular Signals
View All
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 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!
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?
Angular Material
View All
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.
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.
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.
Angular Forms
View All
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 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 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.
Performance
View All
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.
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.
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.
Responsive Design
View All
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.
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.
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!
Rxjs
View All
I refactored my Angular and Firebase Sign up App from RxJS to Promises!
Refactoring Angular Code: From Observables to Promises
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.
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!
Animation
View All
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.
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.
State Management
View All
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.
Component Design
View All
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!
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.
Tailwindcss
View All
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 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.
Css
View All
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.
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!
Upgrade
View All
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.
Random
View All
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.
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!
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!