ngOnChanges doesn't trigger for angular 2

Question

I have a child component as a pagerService which gives us pageBounds every time I give it a length of array I need to be paginated.

This is how I pass the length of the array to be paginated to the child component from the parent component:

<!--parent -->
    <ng-container *ngIf="currentView.tasks && currentView.tasks.length">
            <span>{{currentView.tasks.length}}</span>  <!--for debugging -->
            <pagination-bar [totalItems]="currentView.tasks.length" (onTotalItemChanged)="setPageBounds($event)" >

            </pagination-bar>
        </ng-container>
<!--/parent>

This is my child component :

@Component({
selector: 'pagination-bar',
  template: `<ul *ngIf="pager.pages && pager.pages.length" class="pagination">
                <li [ngClass]="{disabled:pager.currentPage === 1}">
                    <a (click)="setPage(1)">First</a>
                </li>
                <li [ngClass]="{disabled:pager.currentPage === 1}">
                    <a (click)="setPage(pager.currentPage - 1)">Previous</a>
                </li>
                <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
                    <a (click)="setPage(page)">{{page}}</a>
                </li>
                <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                    <a (click)="setPage(pager.currentPage + 1)">Next</a>
                </li>
                <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                    <a (click)="setPage(pager.totalPages)">Last</a>
                </li>
            </ul>
`,
})
    export class PagerService implements OnChanges{
      @Input()
      totalItems:number;
      @Output()
      onTotalItemChanged = new EventEmitter<any>();
      pageBounds : any;
      pager : Pager;

      constructor() {
      }

      //this is never called
      ngOnChanges(changes: SimpleChanges): void {
        this.pager = this.getPager(this.totalItems);
        this.pageBounds = {
          startIndex: this.pager.startIndex,
          endIndex: this.pager.endIndex
        };
        this.onTotalItemChanged.emit(this.pageBounds);
      }


      getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) :Pager {
        let pager:Pager ;
        // some logic.. hidden as irrelevant to the question


        return pager;
      }
    }

The currentView is changed in the parent which in turn is triggered by the route.navigate as:

  ngOnInit(): void {
    this.workbenchBaseUrl = this.propertyService.configData && this.propertyService.configData.workbenchBaseUrl || null;
    this.route.params
        .switchMap((params: Params) => {
      let id = params['id'];
      if(!id){
        this.router.navigate(['/view', this.taskViewService.getDefaultViewId()])
      }
      return this.taskViewService.getView(id);
    })
      .subscribe((view: TaskView) => {
      this.currentView = view;
      this.taskViewService.refreshViewContent(this.currentView);

    });

  }

I read similar questions including this one: Detect changes in objects inside array in Angular2

Which got me thinking maybe ngOnChanges is not trigger as it doesn't change the input instance but I'm not sure of that hypothesis,

I read about ngDoCheck(DoCheck ) but don't completely understand it or even if I need to use it in my case

It's a little bit weird you didn't provide @Component and provide source for a class named PagerService which hint to a service and not at all a component. But again this code use Input and Output used only in component. So if it's really a service the behavior is completely normal. — JEY, Aug 11 '17 at 14:42
It is a component , I didn't provide the compoenent part of it as I thought It might be irrelevant , I have added it now — Snedden27, Aug 11 '17 at 14:48
Is the setPage function removed as well? I'm not seeing that function on the component. — Joseph King, Aug 11 '17 at 14:57
@JosephKing yes , it basically emits an event event which call a function int the parent to change the page ,i hidden it for now — Snedden27, Aug 11 '17 at 15:00
`ngOnChanges` is only called for template expressions bound to `@Input()` properties. Are you sure your `*ngIf` resolves to `true`? — Reactgular, Aug 11 '17 at 15:01
I check the span in the html and it gets the correct length so yes, it does go inside the if-block — Snedden27, Aug 11 '17 at 15:02

score 1 · Answer 1 · answered Aug 11 '17 at 18:43

1

This is probably stupid ,but I should post it before someone else waste their time like me . I had forgot to put the child component in the appmodule declarations

answered Aug 11 '17 at 18:43

Snedden27

1,870
7
32
60

ngOnChanges doesn't trigger for angular 2

1 Answers1