Using activated route query parameters to fetch articles

articles.component.ts

@Component({
  selector: 'app-articles-list',
  templateUrl: './articles-list.component.html',
  styleUrls: ['./articles-list.component.scss'],
})
export class ArticlesListComponent implements OnDestroy {
  readonly defaultPageSize = 6;

  private readonly unsubscribe$ = new Subject<void>();

  constructor(
    articles: ArticlesService,
    route: ActivatedRoute,
  ) {
    route.queryParams
      .pipe(takeUntil(this.unsubscribe$.asObservable()))
      .subscribe(({ page, category, author }) => {
        articles.fetchArticles({
          limit: this.defaultPageSize,
          // pages are indexed from 1
          skip: (parseInt(page, 10) - 1) * this.defaultPageSize,
          author,
          category,
        });
      });
  }

  ngOnDestroy(): void {
    // event if we are just demostrating functionality
    // we have to take care of our subscription
    // (use async pipe whenever possible to get rid of this)
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}