Angular is a modern-day framework used for web development. Even though there are many front-end frameworks out there, angular remains popular among developers as it provides most of the features out of the box, unlike other frameworks which makes development more efficient and maintenance less tiresome. In this article, we will discuss some lesser-known built-in directives that are provided by angular itself to solve specific problems. Before moving on to that, let’s try to understand what are angular directives and its use.
What are Directives in Angular?
Directives are classes that are used to modify the behavior of the DOM. If we create a class with @directive, it will be treated as a directive.
There are mainly 3 types of directives. They are
1. Component directives
This is one of the directives, which is most commonly used. It is used along with a template. When it comes to angular applications, components are the basic building blocks.
2. Attributes directives
These directives are mainly used to interact with the DOM to change the behavior or appearance of elements, components, etc.
Eg: ngClass, ngStyle
3. Structural directives
These types of directives are mainly used to change the layout of the DOM by adding or removing elements.
Eg: NgIf, NgFor, etc
Now, let’s get familiar with some lesser-known directives provided by Angular to solve some specific problems.
NgPlural and NgPluralCase
Pluralization in our application can be challenging at times. Most of the time, we must find another way to handle pluralization. In the English language, adding an ‘s’ to the word may make it plural but there are exceptions like foot, tooth, etc. Also, if we consider other languages like Arabic, it becomes more complicated. These directives, NgPlural and NgPlural specifically solve this issue. NgPlural will add or remove subtrees of the DOM.
Let’s try to understand the working of this directive with an example.
We can use this directive by importing it from the common module.
Consider we have an e-commerce application with an add-to-cart feature. Based on the number of items added to the cart, we need to show different messages for that.
- If there are no items added to the card, the message must be something like this, ‘There is no item on the cart’.
- If there are 2 items, the message must be ‘There is an item on the card’.
- If there are more than 2 items on the cart, then the message must be ‘There are few items on the cart’.
These kinds of scenarios can be easily handled using NgPlural and NgPluralCase. Consider the below code snippet which implements the above using these directives.
<div [ngPlural]=“value”>
<ng-template ngPluralCase=“=0”>There is no item on the cart</ng-template>
<ng-template ngPluralCase=“=1”>There is 1 item on the cart</ng-template>
<ng-template ngPluralCase=“other”>There are few items on the cart</ng-template>
</div>
Like the above example, we can bind the number of items added to the cart to the ngPlural directive. Moreover, using NgPluralCase, we can handle different cases of pluralization. NgPluralCase accepts input as a number with the expression = or > or <.
Additionally, make sure that we provide a case with a value as ‘other’ otherwise it may throw an error if the value does not satisfy any of the cases.
NgOptimizedImage
This directive is used for improving the loading performance by strictly enforcing some best practices. This is imported from angular/common and is also available as a stand-alone directive.
Now, let’s go through the different properties of this directive.
<img height=“32” width=“142” loading=“eager” alt=“menu”ngSrc=“https://d3qrpzkmh566778.cloudfront.net/common/new-logo.svg”>
The code shows the basic implementation of the NgOptimized directive.
- @Input() ngSrc:string
Using the property, we can pass the file name of the image and the image name will be processed and the final URL will be applied as the src property of the image.
a. @Input() width:number | undefined
Using the property, we can set the width of the image.
b. @Input() height:number | undefined
Using the property, we can set the height of the image.
c. @Input() loading?: ‘lazy’ | ‘eager’ | ‘auto’
Using this property, we can set the desired loading behavior of the image. If we set the loading as ‘eager’ or ‘auto’, these images will be treated as non-priority. For priority images, we should not change the value of loading.
d. @Input() priority: boolean
This property is used for setting the fetch priority of an image.
These are some of the main properties of the NgOptimized image directives. If you want to know more about this, please visit here.
Additional things provided by this directive are
- It generates an appropriate asset URL if we provide an imageLoader function if we have a hosting location.
- Width and height are required.
- It warns us if we use incorrect width and height. Along with this, it provides us with a warning about whether this image will be distorted or not.
Things to note while using NgOptimized image:
- It is only above angular 14.2 and above
- This is a standalone directive now. We can use it to import into our module or component directly.
- For migration, import this directive and replace the ‘src’ of the image tags with ‘ngSrc’.
Conclusion
In this article, we discussed three directives NgPlural, NgPluralCase, and NgOptmized images, and their use cases. I hope it will be useful to you and it is always better to use solutions like this rather than reinventing the wheel unless there is a definite need for that.
