Using the Inject Function in Angular 15
Tags: angular, javascript, frontend
Published: 2023-03-27 16:23:24

Since Angular 14/15, there has been an alternative way to inject dependencies in our Angular applications.

I will show two cases to use the inject function with Angular 14/15.

## Inject Dependencies in Functions
Now, using inject, we can create functions and inject dependencies without adding parameters in the function class.

Example: We create a function that needs the HttpClient to request data.

```typescript
import {lastValueFrom, map} from "rxjs";
import {inject} from "@angular/core";
import {HttpClient} from "@angular/common/http";

export function getPlayers(): Promise<unknown> {
  return lastValueFrom(inject(HttpClient).get('https://www.balldontlie.io/api/v1/players').pipe(
    map((response: any) => {
      return response.data;
    })
  ))
}
```
We can use the function in another class in the constructor lifecycle:

```bash
  constructor() {
    getPlayers().then(p => {
      this.players = p;
    })
  }
```
The `inject()` function must be called from an injection context such as a constructor, a factory function, or a field initializer.

## Simplify Inheritance Dependencies

Another way to simplify and clean up the constructor in our classes is when we use inheritance. For example, when a class works as a base or superclass for others, like `NbaService`, which needs `HttpClient` in the constructor.

```typescript
import {Injectable} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {map, Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class NbaService {

  constructor(private http: HttpClient) {

  }

  getPlayers(): Observable<any> {
    return this.http.get('https://www.balldontlie.io/api/v1/players').pipe(
      map((response: any) => {
        return response.data;
      })
    );
  }
}
```

When we create a new class like NcaaService and extend NbaService, we must provide the constructor dependencies.

```typescript
import {Injectable} from '@angular/core';
import {NbaService} from "./nba.service";
import {HttpClient} from "@angular/common/http";
import {filter} from 'rxjs';

@Injectable()
export class NcaaService extends NbaService {
  constructor(private httpClient: HttpClient) {
    super(httpClient);
  }

  getListPlayers() {
    return this.getPlayers().pipe(
      filter((p) => p.league === 'NCAA')
    )
  }
}
```

What happens if the NbaService constructor changes?
```typescript
export class NbaService {
  constructor(private http: HttpClient, private loader: LoaderService) {
  }
    ....
```
The NcaaService has to update the constructor and provide a dependency no related with him.

![error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfhvtpy1auyt6ufzrxh5.png)

The easy way to solve this is to switch our dependencies from constructor to inject function.

```typescript

export class NbaService {

  http = inject(HttpClient);
  loader = inject(LoaderService)

  showLoadingMessage() {
    this.loader.show();
  }
```

The extended classes don't have to provide dependencies anymore. This helps to simplify our code and solve a typical problem when we have to provide dependencies without needing to, only because our base code needs it.

```typescript
@Injectable()
export class NcaaService extends NbaService {
  constructor() {
    super();
  }
```
## Conclusion
Using the inject function in Angular applications can simplify the code and help to solve common problems related to dependency injection. With inject, we can create functions and inject dependencies without adding parameters in the function class, and we can simplify inheritance dependencies.