This article will describe a common scenario of using some libraries which don’t have Angular . As an example, I will use library which converts hash strings to the human-readable random words. If you are lazy to read an article, you can check for the code examples. integration HashWords Github repo Installing library by running: $ npm install --save hashwords Importing it to the . : angular-cli.json _“scripts”_: [“../node_modules/hashwords/dist/hashwords.min.js”] By the last action, we made it available on the object. window Now, we can register it in the property of the providers NgModule providers: [{ provide: 'Hashwords', useValue: window['hashwords']() }] Provide the application with the Value _window['hashwords']()_ for any injection called Hashwords ! Next action is to inject this newly created value to the constructor of the app.component.ts With the decorator we can manually Inject registered dependencies. When is not present, will use the type annotation of the parameter. That’s what actually happens in the application where we use . @Inject({ token: any }) @[Inject](https://angular.io/api/core/Inject)() [Injector](https://angular.io/api/core/Injector) constructor(apiService: ApiService) Improving example with the InjectionToken The previous example is totally workable. But we are missing the brilliant feature of Angular + applications — ! Of course, not every library you need has type definition out of the box. But with the mechanism, we can define some basic interface for our third-party library and provide our application with the knowledge of properties and methods which we are going to use. TypeScript type check InjectionToken #1 Creating new file which will have configurations for our third-party providers LOC 3–8: Describing interface for our library with methods and properties which we are going to use across application; LOC 10: Creating a custom with the generic type of interface which we created a second before; InjectionToken LOC 11: Creating a ValueProvider object, so we can register it in the NgModule #2 Registering newly created value provider #3 Injecting our dependency with the defined interface type in the component LOC 3: Import needed dependencies from ; libs.providers.ts LOC 12: Now we can Inject and define a type for hashwords variable, which is going to be interface — ; Hashword InjectionToken, IHashwords LOC 15,16: After that action we can use methods with the intellisense! hashwords Conclusion With the flexible mechanism of registering in Angular applications, we can easily wrap 3rd party libraries and use them across application exactly as if they where an providers Angular library. With the Injection Token mechanism, we can even and make our app aware of API of an imported library! define custom types If you want to get an info straight from the horse’s mouth follow me on Twitter and Medium account!

Twitter

Angular & React: Why you should learn both?

How to import data to Cloud Firestore?

Scale your technology with remote teams

Too Long; Didn't Read

Get Free Unlimited IP Geo Data With IPinfo Lite

Angular Providers: How to inject 3rd party library?

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Angular NgRx: Resolving Route Data

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

Angular NgRx: Resolving Route Data

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps