Angular Lifecycle Interface OnChanges should be implemented for method ngOnChanges

Question

Tslint is sending a warning indicating that OnChanges should be implemented for method ngOnChagnes lifecycle hooks. If I change ngOnChanges to OnChanges then the warning is not there.

import { Component, Input, OnInit, Output, EventEmitter, SimpleChange, OnChanges } from '@angular/core';

import { Order } from '../../../../core/orders';

import { CartItem } from '../../../../core/orders';
import { User } from '../../../../core/auth/_models/user.model';

declare var $: any;

@Component({
  selector: 'app-order-summary',
  templateUrl: './order-summary.component.html',
  styleUrls: ['./order-summary.component.scss']
})
export class OrderSummaryComponent implements OnInit, OnChanges {
  @Input() cartDetails: Order;
  @Input() sellerDetail: User;
  @Input() productCost: number;
  @Output() closeOrderSummary = new EventEmitter<string>();
  @Output() checkoutCart = new EventEmitter<string>();
  @Output() updateItemQty = new EventEmitter<string>();
  @Output() updateProductSelected = new EventEmitter<string>();

  cartList: CartItem[] = [];
  isCartEmpty: boolean;

  constructor() {}

  ngOnChanges(changes: SimpleChange) {
    for (const propName in changes) {
      if (propName === 'cartDetails') {
        const change = changes[propName];
        this.cartList = change.currentValue;
        this.isCartEmpty = (change.currentValue.length === 0);
      }
    }
  }

  ngOnInit(): void {
  }

  onUpdateItemCount(item, direc) {
    const payload = { item, direc };
    this.updateItemQty.emit(payload);
  }

  onUpdateProductSelected(value, item) {
    const payload = { value, item};
    this.updateProductSelected.emit(payload);
  }

  goBackToMain() {
    this.closeOrderSummary.emit();
  }

  onCheckoutCart() {
    this.checkoutCart.emit();
  }

}

score 7 · Accepted Answer · answered Jul 28 '21 at 14:54

7

implements OnInit, OnChanges

is missing. whenever you use an Angular lifecycle hook you should also add the corresponding implements interface to the controller class.

answered Jul 28 '21 at 14:54

Patrick Kelleter

2,631
1
13
19

I've added the Onchanges to the implements interface as updated on the code above. Now i'm getting "Property 'ngOnChagnes' int type 'OrderSummaryComponent' is not assignable to the same property in base type 'OnChanges' – Amar Ratna Shakya Jul 28 '21 at 14:59
after i change interface for changes from SimpleChange to SimpleChanges it works. Thanks a lot. – Amar Ratna Shakya Jul 28 '21 at 15:05
This isn't actually true. I couldn't find the doc at the moment, but the interfaces are only for guidance (like naming and syntax). The function `ngOnChanges()` without implementing the interface `implements OnChanges` would perfectly be accepted as a lifecycle-hook by Angular. – ruth Jul 28 '21 at 15:07
@MichaelD that's why I wrote "should" and not "have to" - yes, Angular is perfectly fine without the Interface which is obvious since Angular is evaluated at runtime, when TS is transpiled away already. However it is best practice and then default setting that you have to - therefore you *should*. It also helps preventing other bugs as you can immediately see in the prior comment from Amar ;) I was simplifyng the answer as much as i felt neccessary to match the scope of OP and abstract unneeded details away. – Patrick Kelleter Jul 29 '21 at 07:47

ruth · Answer 2 · 2021-07-28T15:17:10.467

2

The parameter of ngOnChanges() function declared in the OnChanges interface accepts parameter of type SimpleChanges and not SimpleChange. As mentioned in the comment of other answer, usage of function ngOnChanges() without implementing the OnChanges interface would also be accepted as a life-cycle hook by Angular. But the type error you're receiving would not have been thrown, that could've led to other issues.

import { Component, Input, OnInit, Output, EventEmitter, SimpleChanges, OnChanges } from '@angular/core';

ngOnChanges(changes: SimpleChanges) {
  ...
}

edited Jul 28 '21 at 15:17

answered Jul 28 '21 at 15:11

ruth

29,535
4
30
57

Thanks for the information. This did really help me to understand the issue. – Amar Ratna Shakya Jul 28 '21 at 15:16
This doesn't adress the initial issue though. When TSLint tells you that you should implement OnChanges that's what you should do (or alter TSLint config) - the stated is also an issue here but not what was initially asked by OP :) – Patrick Kelleter Jul 29 '21 at 07:50
@PatrickKelleter: Now I see where the issue is stemming from. In the original question OP didn't implement `OnChanges` interface. That's what you saw and your answer addresses that. However a little while later OP included `OnChanges` interface. That is what I saw and addressed in my answer. – ruth Jul 29 '21 at 07:57
@MichaelD oh I see you are right, thanks for pointing that out. @ AmarShakya it is not a good idea to adjust your question-code in order to fit the solution because it changes the dynamic of the post and will confuse later visitors more than it will help :) – Patrick Kelleter Jul 29 '21 at 21:26

Angular Lifecycle Interface OnChanges should be implemented for method ngOnChanges

2 Answers2