Angular 14 inject

We can use the inject()
method in components, directives, and pipes thanks to the latest news Angular 14 features. It offers up an entirely new realm of possibilities. We can develop reusable functions that takes advantages of the Angular's dependency injection system.
Read more about the Angular 14 inject feature.
Angular' inject function
Using Angular's inject()
function, we can get a reference to a token from the injector that is active. However, only services and factory providers might be called in.
Angular 14 inject capabilities
Angular 14 allows us to call the inject function from inside components, directives, and pipes. This opens the door to an entirely new set of options and possibilities. Using Angular's dependency injection, we can create functions that can be reused.
The inject()
function in Angular 14 will radically change how we utilize services. We could do a lot of different things with it.
Here's an example of how we can transform HttpClient.get
into a method that may be used anywhere. A constructor is no longer required for a simple get request:
import { inject } from '@angular/core';
import { HttpClient } from '@angular/http/client';
function getUrl(url: string) {
return inject(HttpClient).get(url);
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
styleUrls: ['./app.component.scss']
})
export class AppComponent{
data$ = getUrl('<url>');
}
- Author: Ahmed Bouchefra Follow @ahmedbouchefra
-
Date:
✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also
✋ Want to master Angular 14? Read our angular tutorial and join our
#DailyAngularChallenge
where we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.
✋ Make sure to join our Angular 14 Dev Community 👈 to discuss anything related to Angular development.
Related posts
Angular 14 route title and custom strategy Angular 14 inject example: reactive decorator Angular 14 inject How to enable CORS in Angular 14 Angular v14 tutorial Add Tailwind CSS to Angular 14 apps Import standalone components in Angular 14 Generate standalone components in Angular 14 Add Bootstrap to Angular 14 example Upgrade to Angular 14 Angular 14 standalone component Angular CLI 14 Install Angular CLI 14 Render HTML with Angular and innerHtmlHands-on Angular eBook
Subscribe to our Angular newsletter and get our hands-on Angular book for free!
