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

Answer 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