Class vs Function composition

class.ts

@Component({
   template: `
      <div>
         <show-results *ngIf="results$ | async as results else loading" [results]="results"></show-results>
         <ng-template #loading>
            <spinner></spinner>
         </ng-template>
      </div>

      <pagination [page]="page" [pageSize]="10" [total]="(results$ | async)?.length""></pagination>
   `
})
export class MyComponent {
   page$ = new BehaviorSubject(0)
   results$ = this.page$.pipe(
      switchMap((page) => this.api.getSomething({ page })),
      share()
   )
   
   @Input()
   get page() {
      return this.page$.value
   }
   set page(value) {
      this.page$.next(value)
      this.pageChange.emit(value)
   }

   @Output()
   pageChange = new EventEmitter()

   constructor(private api: Api) {}
}

function.ts

function setup() {
   const api = inject(Api)
   const [page, pageChange] = use(0)
   const results = use()

   subscribe(page, (page) =>
      subscribe(api.getSomething({ page }), results)
   )

   return {
      page,
      pageChange,
      results,
   }
}

@Component({
   template: `
      <div>
         <show-results *ngIf="results else loading" [results]="results"></show-results>
         <ng-template #loading>
            <spinner></spinner>
         </ng-template>
      </div>

      <pagination [page]="page" [pageSize]="10" [total]="results?.length"></pagination>
   `,
   inputs: ["page"],
   outputs: ["pageChange"]
})
export class MyComponent extends ViewDef(setup) {}