Blog posts with tag material
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.
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!
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 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.
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+.
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.
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!