JavaScript is an essential component of modern web applications. The language is now used to build a wide range of systems, including web applications with sophisticated user interfaces (UI). As a result, we are seeing the emergence of new technologies and tools to address common issues and performance problems in such applications.
In particular, a new family of JavaScript frameworks based on the ModelViewController (MVC) architecture has emerged, like Angular, Backbone.js, and Ember.js. However, Angular is the most popular framework among developers.
This article discusses the inject feature in Angular 14, the latest version of Angular.
Angular, developed and maintained by Google, is used by a lot of well-known websites. Examples include http:// weather.com, http:// forbes.com, and http:// intel.com. That is why Angular is continuously being improved, and new releases and features have been released throughout the preceding decade.
Currently, Angular 14 is the latest release; it was launched on June 02, 2022. From typed forms and standalone components to new primitives in the Angular CDK (Component Dev Kit), many new features are introduced in Angular 14.
However, we will only be discussing the inject feature in Angular 14.
Inject() in Angular 14
As you might already know, in Angular 13 and its previous versions, we preferred to inject a dependency in the constructor of providers (components, pipes or services, etc.) instead of using inject(). The reason was that its features and uses were limited.
However, Angular 14 has made many changes and upgrades to inject(). Using the Angular inject() function, we can get a reference to a token from the injector that is active. This new feature, therefore, allows us to inject the providers without using the constructor class.
This opens up a whole set of new options and possibilities since it enables us to create reusable functions.
Here is a simple example of using the inject function:
import { Component, inject } from ‘@angular/core’;
import { HttpClient} from ‘@angular/common/http’;
function getHostUrl(hostUrl: string) {
return inject(HttpClient).get(hostUrl);
}
@Component({
…
standalone: true
})
export class foo(){
data = getHostUrl(‘url’);
}
Inject() parameters
The inject function includes a token that represents the dependency that should be injected and injection flags as parameters.
Injection Flags
Injection flags can either be InjectOptions or InjectFlags. Both have made injecting dependency in the constructor class easier. We can simply put injection flags true or false instead of using injection strategies like @Optional, @SkipSelf, etc.
For example, if we want the effect of injection strategy @Optional, we will now have to add the injection flag of optional: true, and that’s it!
When Can We Use Inject()
1. As you can see from the above example, using inject() instead of specifying dependency in the constructor using @Inject has more benefits. For instance, the code looks cleaner and more organized.
Other than that, if we use @Inject to inject some particular token, we have to explicitly describe the type of object or the class we will inject. Now, this usage may be error-prone if we make a logical error, like giving the wrong datatype for that object. Typescript won’t be able to detect the error and allow it. On the other hand, inject() can infer the type from the injection token.
2. Using a traditional procedure makes inheritance somewhat challenging as it requires you to make a lot of changes in every derived class if there is a change in the base class.
However, inject() simplifies inheritance in Angular and eradicates this problem. We can see that using the example in mobile apps.
As you can see from the above example, we only have to change the base class, and there is no need to adjust the derived classes.
Where Can We Use Inject()
Angular documentation says:
In practice, the inject() calls are allowed in a constructor, a constructor parameter and a field initializer.
The inject function just works inside the injection context. We can call it when the instance is being created. We are not allowed to use it inside lifecycle hooks or some other methods.
Or, as you can see in the example below from the Angular documentation, we can use it in providers, too. Still, we cannot use the inject() function in lifecycle hooks like ngOnInit() or other classes.
Conclusion
Inject function in angular has made injecting dependency a lot easier. Not only that, but it is also a cleaner approach as it avoids a lot of parameters in the constructor. However, it is still a new approach and will probably be upgraded in the next release.
You can surely use it in your new projects, but we advise you to use it only when necessary. If you want any further assistance regarding Angular 14 or its functions, contact us at [email protected].