1

I built a component with the name of "gw-responsive-tabs" that has an input with variable (navLinks) which is an Array of the tabs I want to display. When I deliver the input data from the html like that: 

<gw-responsive-tabs
  [navLinks]="[{ label: 'PENDING', path: '/mentoring/manage/pending' },
  { label: 'CURRENT', path: '/mentoring/manage/pending' }]">
</gw-responsive-tabs>

Then everything works as expected and I can see 2 tabs.

If I change it and send the same Data using a getter or a function than the ngOnChanges of the gw-responsive-tabs component fires nonstop with very high frequency and from that point the chrome is not responding.

get mentoringTabs(): Array<any> {
  return [{ label: 'PENDING', path: '/mentoring/manage/pending' }, { label: 'CURRENT', path: '/mentoring/manage/pending' }];
}

and the html: 

<gw-responsive-tabs [navLinks]="mentoringTabs"></gw-responsive-tabs>

Any ideas what can cause this phenomena?

Jean-Baptiste
  • 1,552
  • 1
  • 19
  • 33
Udi Mazor
  • 1,646
  • 2
  • 15
  • 30
  • 1
    The getter has to be called in every change detection cycle and since you return a new object everytime, Angular treats this as changed data and fires OnChange. – Ingo Bürk Jun 24 '18 at 19:57
  • How do you know that is the cause of application fail? – Vega Jun 25 '18 at 06:22

1 Answers1

0

It's because of the change detection default strategy it's checked every sec or so And no matter what if the value of the return object is changed or not it re-render the template and because of that every time it's re rendering the html it's calling the get method which returns a new object everytime it's called and when the ngOnChanges compares it as the value is a new object now it runs in a loop.

here is the link to how change detection works https://angular-2-training-book.rangle.io/handout/change-detection/angular_1_vs_angular_2.html

Gurvinder Guraya
  • 649
  • 4
  • 9
  • I changed the changeDetection stategy to onPush and still with no success. Beside that - change detection will occure whether you send the data using a function or an hardcoded data in the HTML. – Udi Mazor Jun 25 '18 at 05:30
  • can you please add the html for the gw-responsive-tabs because I tried what you are trying to do https://stackblitz.com/edit/angular-y7p4zw?file=src%2Fapp%2Fhello.component.ts and it only throws ngChange twice which is what it should do – Gurvinder Guraya Jun 25 '18 at 13:17