How Inherit from a baseComponent Angular2?

Question

I am building a angular project. I want to create a BaseComponent with common functionality. For example: I have a TeacherIndexComponent:

@Component({
  selector: 'app-teacher-index',
  templateUrl: './teacher-index.component.html'
})
export class TeacherIndexComponent implements OnInit {
  public teachers : Profesor[];

  constructor(private _otherService: OtherService
              private _teacherService: TeacherService,
              private _messageService : MessageService) {

   }

  ngOnInit() {
   this._otherService.doSomething();

    this._teacherService.getTeachers()
                .subscribe(teacherData => this.teachers= teacherData,
                           error => this._messageService.showErrorMessage(error));

  }

In every components I have to inject OtherService. I want to create a BaseComponent. In this component should inject OtherService and in its ngOnInit() call to this._otherService.doSomething(); This baseComponent has not a template (html) only functions, I need to use its events functions (ngOnInit, ngOnDestroy). All component extends to BaseComponent:

export class TeacherIndexComponent extends BaseComponent implements OnInit {

and BaseComponent implement OnInit too:

export class BaseABMComponent implements OnInit {

  constructor(private _otherService: OtherService) { 
  }

  ngOnInit() {
       this._otherService.doSomething();
  }

This is similar to BaseController, Is possible build it in Angular ? Or I should repeat code in every component ?

Thanks very much!

be4code · Answer 1 · 2017-08-21T19:18:41.223

1

If you inherit BaseComponent with implementing own OnInit in order to call BaseComponent.ngOnInit you need to call super.ngOnInit() inside currently implemented ngOnInit method (in your case TeacherIndexComponent.ngOnInit)

edited Aug 21 '17 at 19:18

answered Aug 21 '17 at 19:08

be4code

688
4
15

Ok, so using BaseComponent isn't transparent. Every component must call super.ngOnInit() in your ngOnInit() :/ – Franco Morales Aug 21 '17 at 23:09
It is not a Angular's feature. That is how inheritance works in (probably) all languages (not frameworks). – be4code Aug 22 '17 at 05:13

How Inherit from a baseComponent Angular2?

1 Answers1