CODEWITHSUNDEEP
javascriptangulartypescriptinheritance
Danel Ceresa
Danel Ceresa

Reputation: 340

Override child ngOnInit method

I want to add code to child's ngOnInit method from a parent class. Can I somehow do something similar to this?

export class Child extends Parent {
   constructor(){
      super(this.ngOnInit);
   }
   ngOnInit(){
      console.log('Child onInit');
   }
}

And Parent:

export class Parent {
   constructor(childOnInitMethod: any){}
   ngOnInit(){
      console.log('Parent added code to child onInit');
      this.childOnInitMethod.apply(this, arguments)
   }
}

The problem is that on the child constructor I do not have "this" available.

UPDATE: Find here the current code

For now, this is what I've done. Child class extends parent's ngOnInit and ngOnDestroy. What I want to achieve is to avoid calling parent "super.subscribeEvents();" like this:

ngOnInit() {
   window.onresize = () => console.log('resizing');
   super.subscribeEvents();
}

What I want to do is to add code to the Child's ngOnInit from Parent. These are the classes:

export class DatatablePage extends EventSubscriber {
   @Output() onLoadRow: EventEmitter<any> = new EventEmitter();
   public gridApi: GridApi;
   constructor(
    events: Events
   ) {
    super(events, [
        { eventName: 'datatable:updateList', callbackFunction: () => this.onLoadRow.emit() },
        { eventName: 'datatable:resizeTable', callbackFunction: () => this.gridApi.sizeColumnsToFit() }
    ])
   }

   ngOnInit() {
       window.onresize = () => console.log('resizing');
       super.subscribeEvents();
   }
}

And Parent:

export class EventSubscriber {


constructor(
    private events: Events,
    public eventSubscriptions: EventObject[]
) {
}

ngOnInit() {
    this.subscribeEvents();
}

ngOnDestroy() {
    this.unsubscribeEvents();
}

subscribeEvents() {
    this.eventSubscriptions.forEach((eventSubscription: EventObject) => {
        this.events.subscribe((eventSubscription.eventName), eventSubscription.callbackFunction)
    });
}

unsubscribeEvents() {
    this.eventSubscriptions.forEach((eventSubscription: EventObject) => {
        this.events.unsubscribe((eventSubscription.eventName), eventSubscription.callbackFunction)
    });
}
}

Upvotes: 3

Views: 8718

Answers (2)

Punith Mithra
Punith Mithra

Reputation: 628

the below solution should work.

class Parent {
   constructor(){}
   ngOnInit(){
      console.log('Parent added code to child onInit');
      this.ngOnInit()
   }
}

class Child extends Parent {
    ngOnInit() {
      console.log('Child onInit');
    }
    invokeSuperOnInit() { 
        super.ngOnInit();
    }
}

const a = new Child();
a.invokeSuperOnInit();

Execution:

  1. Created object of Child Class and assigned to a.

  2. calling invokeSuperOnInit Method on the object a.

  3. ngOnInit of the Parent is invoked.

  4. In the parent NgOninit We are calling ngOnInit of the Child. The Child ngOnInit is invoked because "this" will always stay same through out the hierarchy.

Upvotes: 1

Tommy
Tommy

Reputation: 2453

In order to call methods on your child you need to add it in your parent's .component in the following way:

@ViewChild(Child) child: Child;

After your parent and child are instantiated you can use this.child.anyFunction();

An alternative is to use @Input for your child like:

@Input() test: number;

The parent's view should look like this:

<child [test]="example"></child>

While you define the variable in your component:

example: number;

ngOnInit() {
    this.example = 1;
}

Have also a look on ngOnChanges.

Upvotes: 0

Related Questions