Override FrontEnd methods

If you want to change the way a method works you can just use the same name as the parent, in case it is from inheritance.

Example:

FormComponent.ts

@Component({
  template: ''
})
export class FormComponent extends ControlComponent {
    myMethod(): string {
        return "FormComponent";
    }
}

MyComponent.ts

@Component({
   selector : "hello-world",
   styleUrls : ["./component.css"],
   templateUrl : "./component.html",
})
export class MyComponent extends FormComponent {
   myMethod(): string {
        return "MyComponent";
    }
}

In this case the myMethod() call will return "MyComponent".

We can also override components' native methods from our component, just access the component using the ViewChild approach and update the method you want.

@ViewChild("button1")
button1: ButtonComponent;

ngAfterViewInit(): void {
  this.overrideButtonClick();
}

overrideButtonClick(): void {
  this.button1.click = (event: any) => {
    // new click logic
  }
}

Some of the native methods make calls to the server, if you override them you will probably lose that functionality and other original behaviors, make sure to do it if strictly necessary and make sure to be adding the correct logic.

Last updated