How To Write Angular 1.5 Components with injected services in TypeScript

service: SampleService.ts

class IntegrationsService {  static $inject = ['$q'];
constructor(protected $q: ng.IQService) {}
}angular.module('integrations').service('IntegrationsService', IntegrationsService);

Component: SampleComponent.ts

class FacebookIntegrationComponent implements ng.IComponentOptions {  public bindings: any;
public controller: any;
public template: string;
constructor() {
this.bindings = {
settings: '<',
};
this.controller = FacebookIntegrationController;
this.template = '<div>fb integration component {{$ctrl.settings.foo}}</div>';
}
}class FacebookIntegrationController {public settings: any;
static $inject = ['IntegrationsService'];
constructor(public integrationService: IntegrationsService) {}
}
angular.module('integrations')
.controller('FacebookIntegrationController', FacebookIntegrationController)
.component('facebookIntegration', new FacebookIntegrationComponent());

Usage: some-other-component.html

<div>
<facebook-integration settings="settingsObject"></facebook-integration>
</div>

Summary

--

--

--

Freelance Web Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aco Mitevski

Aco Mitevski

Freelance Web Developer

More from Medium

Microfrontend

SPAs: from Server to Client and back

Angular vs React.js in Enterprise Level Application

Micro-frontend implementation [part 3] — Angular contains React using Webpack 5 Module Federation