Reputation: 1930
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
Upvotes: 0
Views: 630
Reputation: 1930
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
Upvotes: 1