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

For example:

type, and colspan are some examples of HTML attributes.

In some cases, you need to handle the behaviour of a component or directive based on a value set for the HTML attribute.

For example, there is a component called smart-input. You want to render different layouts for…


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:

  1. src/styles/themes/theme-light.css
  2. src/styles/themes/theme-dark.css

Next, you would have them in angular.json 's styles option:

And lastly, you would handle the loading of a particular theme based on the users’ choice or their preferences.

Everything works great, but both of your theme files are part of your application bundle all the time.

Exclude Theme Files

Let’s make a…


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 assigned (and re-assigned) values of all types:

Intellisense in VSCode

Visual Studio Code’s IntelliSense will only work if it understands the type of your code.

In the above example, after you write the first line, let foo = 42; it will show you the methods of a number:


A small post to show how wave animation can take your emoji to next level!

We all use wave 👋 emoji a lot in web apps!

Next time when you use it, try to add a simple wave animation to it…

@keyframes wave-animation {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(14deg);
}
20% {
transform: rotate(-8deg);
}
30% {
transform: rotate(14deg);
}
40% {
transform: rotate(-4deg);
}
50% {
transform: rotate(10deg);
}
60% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
.wave {
animation-duration: 2.5s;
animation-iteration-count: infinite;
animation-name: wave-animation;
display: inline-block;
transform-origin: 70% 70%;
}

I have also created a codepen for it:


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 going to create a service, which will help us identify user’s preferences for reduced motion. Or take a look at the code directly.

Animation

Animations can be used in all kinds of web pages. Oftentimes they’re used to provide feedback to the user to indicate that an action is received and…


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 specific components, using predefined templates or layouts. You can use schematics to enforce architectural rules and conventions, making your projects consistent and inter-operative.

Sometimes we need to run other existing schematics from the same or external collection. Let’s see when you might need this.

Use Cases

Following are some of use cases…


Overall idea behind this article to explain and demonstrate the usage of ControlValueAccessor and interfaces. The former is used to bind together a FormControl from Forms package and native DOM elements. The latter is used to implement validation logic. They can exist independently of each other, but in this article we'll implement both using a single directive. Our directive will add the following functionality to the application:

  1. Conversion between input value and control value
  2. Validation for invalid date

If you’re using ControlValueAccessor for the first time, I would recommend going through this article first: Never again be confused when implementing…


Changing the UI of pseudo-elements through JavaScript can become difficult sometimes. Let’s see how we can make it easy with help from CSS Custom Properties.

How to Change Look & Feel of Pseudo Elements using JavaScript and CSS Custom Properties

The Problem

In general, if we want to change anything in pseudo-elements through JavaScript, we do it in the following way:

  1. Create CSS classes on an element, which will change pseudo elements’ UI
  2. Get the element using querySelector
  3. Modify the classes using classList

The above approach works fine. But, if we need more customizations in pseudo-elements, we will end-up creating many classes to handle all scenarios.

CSS Custom Properties to the rescue

Custom properties (sometimes referred to as CSS variables or cascading variables)…


A few weeks ago Netanel Basal came up with an idea to create react-hot-toast like library for Angular community.

And I am really glad that we ended up creating the best Angular toast in town, announcing…

🎉 Angular Hot Toast — The Best Angular Toast in Town

Dharmen Shah

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store