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:
Related posts
How to send authorization header in Angular 14 Angular 14 Tutorial By Example: REST API & HttpClient GET 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 Render HTML with Angular and innerHtmlHands-on Angular eBook
Subscribe to our Angular newsletter and get our hands-on Angular book for free!
