How to create nested menus from dynamic data — The Angular Material Menu is a floating panel containing a list of options. In this tutorial, we will learn how we can create nested menus from dynamic data. We will first learn the basics of Angular Material Menu and how to render a nested menu with a static HTML template. …

When we use ngDoCheck to detect changes, we need to make sure that our implementation is extremely lightweight and fast, so that it doesn't affect the user experience. In this tutorial, we will learn how to efficiently track and process those changes using KeyValueDiffer. ngDoCheck life-cycle hook The official definition of this life-cycle…

How to manage object in FormControl and handle conversion for input — Generally we use FormControl with either string or boolean types and hence it manages only simple values. But what if we want to manage just more than primitive data types? We can do that, let's see how. For example, in this tutorial we will learn how to get country-code and…

In this tutorial, we will explore all the ways to read HTML attribute values passed in the component or directive. Reading HTML Attributes Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want. — MDN Docs …

Let’s learn how we can load stylesheets only when needed without making them part of the application bundle. We will try to understand this by taking the example of multiple themes support. Multiple Theme Files Let’s assume that apart from the main styles.css file, you have 2 theme files present: src/styles/themes/theme-light.css src/styles/themes/theme-dark.css Next…

JSDoc is the standard for commenting in JavaScript code. Let’s learn how we can utilize the same so that it works great in VSCode’s IntelliSense. Types in JavaScript JavaScript is a loosely typed and dynamic language. Variables in JavaScript are not directly associated with any particular value type, and any variable can be…

In this article, we will understand why reduced motion support is needed. We will also understand the media query and its various usages. And at last, we will see how to disable animations in Angular. If you’re simply interested in the main code, head over to Disable Animations. There we’re…

A schematic is a code generator, which follows a set of instructions and transforms your project by adding or modifying the code. The schematic collection can be a powerful tool for creating, modifying, and maintaining any angular project. You might use schematics, for example, to generate commonly-used UI patterns or…