How to extend external javascript library with angular 2?

Question

I've added moment into my project and I would like to know how can I change the behavior of moment.fn.toJSON globally.

Currently, I'm using the constructor to do so and it works. But I don't want to paste this code in all of my controllers.

So here is an extract :

import * as moment from 'moment';

constructor(fb: FormBuilder) {
    moment.fn.toJSON = function () { return this.format(); }
}

Does anyone has an idea ?

Answer 1

Just extend the class in the 3rd party library and add your custom methods as required.

For example:

//1) Extend the class:

 export class MyFormBuilder extends FormBuilder{

     public myCoolMethod(): string{
        return "Awesome stuff!"
     }
 }

//2) Import your class into the "application module" (for system-wide access)

import { MyFormBuilder }     from './Services/MyFormBuilder';
@NgModule({
    declarations: [AppComponent, AppHeader, AppFooter],
    imports:      [BrowserModule, ReactiveFormsModule],
    providers:    [MyFormBuilder],
    bootstrap:    [AppComponent],
})

`

//3) Import, inject and use your extended class and new methods in your code:

import { MyFormBuilder }     from './Services/MyFormBuilder';
export class AppComponent{
    constructor(private fb: MyFormBuilder){}
    pageTitle : string = this.fb.myCoolMethod();
}