is it possible to run ngAfterViewInit each time input bound property changes, as I am assigning something in ngAfterViewInit with this property

30 views Asked by At
  @Input()
  pageIndex: number;

 ngAfterViewInit(): void {
    this.dataSource.paginator = this._paginator;
    this.dataSource.sort = this._sort;
    this.filterCtrl.valueChanges
      .pipe(takeUntil(this._unsubscribe$))
      .subscribe((searchTerm: string) => {
        this.dataSource.filter = searchTerm.trim().toLowerCase();
      });
    this._paginator.pageIndex = this.pageIndex; // here I am assigning the pageIndex property which changes    // from 0 (initially) to something else let say 1. 
  }

But I am only interested in 1 in this case. What happens is as soon as pageIndex becomes 0 ngAfterViewInit hook runs. And when pageIndex becomes 1 it doesn't run. And this way my paginator index remains as 0. Additionally I can't change the behavior of pageIndex being 0.

I also tried using ngOnChanges like the following-

ngOnChanges(changes: SimpleChanges): void {
    const change = changes['pageIndex'];
    if (change && !change.firstChange) {
      this._paginator.pageIndex = change.currentValue;
    }
  }

But the behavior is that sometimes this._paginator.pageIndex get assigned to 1 and sometime not, on refreshing the page. Additionally, on refreshing the page, pageIndex becomes 0 to 1. I am just trying to persist the state of pagination.

0

There are 0 answers