How to override component in Angularjs

Question

I want to override one of existing component in my custom module.

Here is the component -

import {SeComponent, TypedMap} from "smarteditcommons";
import {
GenericEditorField,
GenericEditorSanitizationService, IGenericEditor, SeRichTextFieldLocalizationService,
SeRichTextLoaderService
} from "smarteditcommons/components/genericEditor";
import "ckeditor";

@SeComponent({
templateUrl: 'seRichTextFieldComponentTemplate.html',
inputs: [
    'field:=',
    'qualifier:=',
    'model:=',
    'editor:=',
    'isDisabled'
]
})
export class SeRichTextFieldComponent {

public field: GenericEditorField;
public qualifier: string;
public model: TypedMap;
public editor: IGenericEditor;

private mode: string;
private editorInstance: CKEDITOR.editor;

constructor(
    private seRichTextLoaderService: SeRichTextLoaderService,
    private seRichTextConfiguration: any,
    private genericEditorSanitizationService: GenericEditorSanitizationService,
    private seRichTextFieldLocalizationService: SeRichTextFieldLocalizationService,
    private $scope: angular.IScope,
    private $element: angular.IAugmentedJQuery
) {
    this.seRichTextLoaderService.load().then(() => {
        const textAreaElement = this.$element.find('textarea')[0] as HTMLTextAreaElement;
        this.editorInstance = CKEDITOR.replace(textAreaElement, this.seRichTextConfiguration);

        this.seRichTextFieldLocalizationService.localizeCKEditor();

        this.$element.bind('$destroy', () => {
            if (this.editorInstance && CKEDITOR.instances[this.editorInstance.name]) {
                CKEDITOR.instances[this.editorInstance.name].destroy();
            }
        });

        this.editorInstance.on('change', this.onChange.bind(this));
        this.editorInstance.on('mode', this.onMode.bind(this));
        CKEDITOR.on('instanceReady', this.onInstanceReady.bind(this));
    });
}
}

I want to override its constructor with some custom logic in my module. So i created same component with different name say CustomRichTextFieldComponent.

@SeComponent({
templateUrl: 'seRichTextFieldComponentTemplate.html',
inputs: [
    'field:=',
    'qualifier:=',
    'model:=',
    'editor:=',
    'isDisabled'
]
})
export class CustomRichTextFieldComponent extends SeRichTextFieldComponent {

public field: GenericEditorField;
public qualifier: string;
public model: TypedMap;
public editor: IGenericEditor;

private mode: string;
private editorInstance: CKEDITOR.editor;

constructor(
    private seRichTextLoaderService: SeRichTextLoaderService,
    private seRichTextConfiguration: any,
    private genericEditorSanitizationService: GenericEditorSanitizationService,
    private seRichTextFieldLocalizationService: SeRichTextFieldLocalizationService,
    private $scope: angular.IScope,
    private $element: angular.IAugmentedJQuery
) {
     // custom changes
     super();
  }
}

To use this component in my module I am trying something like this ..

angular.module('customRichTextModule', []).component('seRichTextFieldComponent', {
controller: ['CustomRichTextFieldComponent']});

But its not working. What is the correct way to do ?

user_6355773 · Answer

If you want your Component two have a different behaviour in another Module, the right way is to inject a Service with a different value to that Module. Then read the value from component and decide what to do.

In your service:

@Injectable()
export class MyService {
 type;

 constructor(type){
  this.type = type;
 }
}

In your module (each module a differnt value in constructor):

  providers: [
    { provide: MyService , useValue: new MyService(1)},

And finaly in your component:

contructor(private service: MyService){
 if(service.type == 1){
  // do a different thing
 }
}

How to override component in Angularjs

1 Answers