In this quick tutorial, we will learn best way to handle browser storage with Angular SSR Server-side applications may not have access to certain browser APIs and features. They are unable to utilize browser-specific global objects such as window, document, navigator, or location, and certain HTMLElement properties. Typically, code that…

In this guide, we will learn how to use SVG icons with mat-icon. We will look at all the methods provided by MatIconRegistry and how to practically use each. mat-icon makes it easier to use vector-based icons in your app. This directive supports both icon fonts and SVG icons, but…

In this quick tutorial, we will learn how to create a smaller variant of Angular Material Button. How to change size To make size changes work accurately, we need to handle the size of all inner components (like ripple, label, touch area, etc.) respectfully for a mat-button in our example. Angular Material library provides…

📢 It’s finally here! 🚀 A complete theming guide to Angular Material Components ✅ Typography, mixins, density, component’s themes, dark theme — covering everything What’s included? You will learn everything needed to incorporate and modify Angular Material Components theme, to be precise, below is what we will do: Start with setting up the project Create a custom theme Modify typography Create…

Need to toggle between dark and light theme in Angular Material? We have got your back… Read this article to know how! In one of our previous articles, we saw how to lazy load a dark theme. If you haven’t already, please check it first: Save some bytes when using multiple themes in angular material components Let’s say you have a theme file called dark.scss like below.shhdharmen.medium.com Now, to load the “dark-theme.css”…

Struggling with changing colors of angular material buttons? Not anymore! Read on… Let’s assume that you have added Angular Material in your project and selected a pre-built theme to use. We will create a custom-theme, which should get applied only when it’s inside .custom-theme class. @use "@angular/material" as mat; $custom-primary: mat.define-palette(mat.$pink-palette…

Let’s say you have a theme file called dark.scss like below. // src/styles/themes/dark.scss @use "sass:map"; @use "@angular/material" as mat; @use "../typography/config" as typography; @use "../components"; $my-app-dark-primary: mat.define-palette(mat.$blue-grey-palette); $my-app-dark-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400); $my-app-dark-warn: mat.define-palette(mat.$deep-orange-palette); $my-app-dark-theme: mat.define-dark-theme( ( color: ( primary: $my-app-dark-primary, accent: $my-app-dark-accent…

In this guide, we will learn that it is possible to create custom form field controls group that can be used inside <mat-form-field>. Introduction In one of my last tutorial, we learned how to create a completely reusable forms Angular. In this guide we’ll learn how to create a custom form…

An in-depth tutorial on creating nested and reusable forms & achieving complete reliability by using the composite ControlValueAccessor. — In this tutorial, you will learn how to create and use form-groups. And we will also learn how to achieve complete reliability by using the composite ControlValueAccessor. Introduction In web applications, we can have large forms, like account registration forms, profile creation forms, credit card forms, address forms, etc. These large…