Using Angular Library with InjectionToken to Inject Custom Services

Introduction: When building a reusable Angular library with components used across multiple projects, you may face a challenge when dealing with multi-language translations. In this tutorial, we'll walk you through how to configure components in an Angular library by injecting a translation service (using Dependency Injection) into the library. We'll create a custom button component as an example and provide translations for it.

Link to repository: github.com/Goldscirer/tutorial-lib

Step 1: Create the library

First, let's create a new library:

1ng new tutorial-workspace

Follow the prompts, selecting 'Yes' for Angular routing and choosing 'SCSS' for the stylesheet format.

Step 2: Create the component

Next, we'll create a module and a component for our custom button:

1ng generate module custom-button --project=tutorial-lib

Navigate to the library folder and create the component:

1cd /tutorial-workspace/projects/tutorial-lib/src/lib
2ng g c custom-button/custom-button --flat

Now, update the component's HTML with the button code:

1<button type="button">Send</button>

Add the following CSS to style the button:

1button {
2  background-color: #02784f !important;
3  border-radius: 5px;
4  font-size: 18px;
5  font-family: 'Source Sans Pro', sans-serif;
6  padding: 6px 18px;
7}

Update the library's API with the following exports:

1export * from './lib/custom-button/custom-button.component';
2export * from './lib/custom-button/custom-button.module';

Test the component by building the library and starting the test application:

1ng build
2npm start

Step 3: Inject translations using forRoot method

First, create an abstract class for the button configuration service:

Next, modify the custom-button.module.ts file. It should now look like this:

1export class CustomButtonModule {
2  static forRoot(
3    buttonConfiguration: InjectionToken<ButtonConfigurationService>
4  ): ModuleWithProviders<CustomButtonModule> {
5    return {
6      ngModule: CustomButtonModule,
7      providers: [
8        {
9          provide: ButtonConfigurationService,
10          useExisting: buttonConfiguration,
11        },
12      ],
13    };
14  }
15}

After adding these changes, rebuild the library.

Step 4: Implement the ButtonConfigurationService in the test application

Create a service implementing the ButtonConfigurationService in the test application:

1import { Injectable } from "@angular/core";
2import {
3  ButtonConfiguration,
4  ButtonConfigurationService
5} from "../../projects/tutorial-lib/src/lib/custom-button/button-configuration.service";
6
7@Injectable({
8  providedIn: 'root'
9})
10export class CustomButtonService implements ButtonConfigurationService {
11  getTranslations(): ButtonConfiguration {
12    return {
13      buttonName: 'Wyślij'
14    };
15  }
16}

Now, update the app.module.ts file with the following code:

1export const CUSTOM_BUTTON_CONFIG = new InjectionToken<CustomButtonService>('CustomButtonService')
2@NgModule({
3  declarations: [
4    AppComponent,
5  ],
6  imports: [
7    BrowserModule,
8    AppRoutingModule,
9    CustomButtonModule.forRoot(CUSTOM_BUTTON_CONFIG)
10  ],
11  providers: [
12    CustomButtonService,
13    {
14      provide: CUSTOM_BUTTON_CONFIG,
15      useExisting: CustomButtonService
16    }
17  ],
18  bootstrap: [AppComponent]
19})
20export class AppModule { }

Conclusion: In this tutorial, we've demonstrated how to configure components in an Angular library by injecting a translation service. We've created a custom button component and provided translations for it. This approach allows you to avoid duplicating code and provides a more efficient way to manage translations in your Angular projects.