Angular Dependency Injection

We will be implementing DI in angular today.

user.service.ts

import { Injectable } from "@angular/core";

@Injectable({
    providedIn: 'root'
})
export class UserService {
    user: any;

    setUser(newUser: any) {
        this.user = newUser;
    }

    getUser(): any {
        return this.user;
    }
}

Take a look at @Injectable() decorator and providedIn: 'root'. This is a new way to inject depedency globally. Previously we used to inject the class we want to use into other classes into app.module.ts. But from angular 14, this feature came in. We do not need to add this class into app module provider. But if don’t want a class to be injectable globally, we don’t need providedIn: 'root'. We can add that class into the corresponding component provider.

di-playground.component.ts

export class DiPlaygroundComponent {
  userName!: string;
  
  constructor(private userService: UserService) {
  }

  signIn(): void {
    this.userService.setUser({
      name: 'Safayat Borhan'
    });
    
    this.userName = this.userService.getUser().name;
    console.log(this.userName);
  }
}

di-playground.component.html

<div>
    <p *ngIf="userName" class="welcome">Welcome:  {{ userName }}</p>
    <button (click)="signIn()" class="ui button">Sign In</button>
</div>

There is a way to inject a value as well. Example:

Into app.component.ts, we can add provider like this:

providers: [{ provide: "API_URL", useValue: "http://my.api.com/v1" }]

Now this is injectable to any component.

di-playground.component.ts

apiUrl!: string;
  
constructor(private userService: UserService, @Inject("API_URL") apiUrl: string) {
  this.apiUrl = apiUrl;
}