Discover high-quality Angular code & resources to level up your development skills. Visit my store!

Blog posts with category Angular Material

Cover Image for Transform Your Angular Material Buttons with Custom Colors, Sizes, and Professional Styling

Transform Your Angular Material Buttons with Custom Colors, Sizes, and Professional Styling

2025-06-26
4 min read

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.

Cover Image for YouTube Style Collapsible Sidebar with Angular Material

YouTube Style Collapsible Sidebar with Angular Material

2024-04-18
7 min read

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.

Cover Image for Create Multi Select List with Angular CDK Selection Model

Create Multi Select List with Angular CDK Selection Model

2021-11-10
6 min read

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.

Cover Image for Angular Material Dark Mode in 3 steps

Angular Material Dark Mode in 3 steps

2021-08-01
6 min read

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.

Cover Image for How to lazy load Angular Material Dialogs

How to lazy load Angular Material Dialogs

2021-07-30
7 min read

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+.

Cover Image for Create Reusable Confirmation Dialogs with Angular Material

Create Reusable Confirmation Dialogs with Angular Material

2021-07-05
7 min read

In this post, I'll show you how to create reusable confirmation dialogs, using Angular services and the Material Dialog component.

Cover Image for Create a multi select chips component with Angular Material

Create a multi select chips component with Angular Material

2020-12-30
11 min read

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.

Back to the blog