docs(playground): 📘 update all playground examples

src/app/app.component.html

@@ -19,9 +19,10 @@ <h1>&#64;ngneat/query Playground</h1>
       <aside class="menu box">
         <p class="menu-label">Examples</p>
         <ul class="menu-list">
-          <li><a routerLinkActive="is-active-example" routerLink="basic">Basic</a></li>
-          <li><a routerLinkActive="is-active-example" routerLink="infinite-scroll">Infinite Scroll</a></li>
-          <li><a routerLinkActive="is-active-example" routerLink="pagination">Pagination</a></li>
+          <li><a routerLinkActive="is-active-example" routerLink="basic">Basic Query</a></li>
+          <li><a routerLinkActive="is-active-example" routerLink="intersecting">Parallel Queries</a></li>
+          <li><a routerLinkActive="is-active-example" routerLink="infinite-scroll">Infinite Scroll Query</a></li>
+          <li><a routerLinkActive="is-active-example" routerLink="pagination">Pagination Query</a></li>
           <li><a routerLinkActive="is-active-example" routerLink="mutation">Mutation</a></li>
         </ul>
       </aside>

src/app/app.routes.ts

@@ -3,6 +3,7 @@ import { TodosPageComponent } from './basic-page/todos-page.component';
 import { PostsPageComponent } from './infinite-scroll-page/posts-page.component';
 import { PaginationPageComponent } from './pagination-page/pagination-page.component';
 import { MutationPageComponent } from './mutation-page/mutation-page.component';
+import { IntersectingPageComponent } from './intersecting-page/intersecting-page.component';
 
 export const appRoutes: Route[] = [
   {
@@ -13,6 +14,10 @@ export const appRoutes: Route[] = [
     path: 'infinite-scroll',
     component: PostsPageComponent,
   },
+  {
+    path: 'intersecting',
+    component: IntersectingPageComponent,
+  },
   {
     path: 'pagination',
     component: PaginationPageComponent,

src/app/basic-page/todos-page.component.html

@@ -1,27 +1,34 @@
-<h1>Observable</h1>
-@if(todosResult.result$ | async; as result) { @if(result.isLoading) {
-<p>Loading</p>
-} @if(result.isSuccess) {
-<p>{{ result.data[0].title }}</p>
-} @if(result.isError) {
-<p>Error</p>
-} }
+<div class="content">
+  <h1>Basic Example</h1>
+  <p>
+    This is a basic example of <code>injectQuery()</code>, it will fetch the specified todo from the API.
+  </p>
+  <p>
+    To see the result changing, open the <b>devtools</b> in the <b>bottom-right</b> corner, from there you can
+    trigger a refetch of the query, invalidate it or even trigger the loading and error state.
+    Feel free to play around with it.
+  </p>
 
-<h1>Signals</h1>
+  <h3>Signal Result</h3>
+  <blockquote>
+    @if (todos();as result) { @if (result.isLoading) {
+    <p>Loading</p>
+    } @if (result.isSuccess) {
+    <p>{{ result.data[0].title }}</p>
+    } @if (result.isError) {
+    <p>Error</p>
+    } }
+  </blockquote>
 
-@if(todos(); as result) { @if(result.isLoading) {
-<p>Loading</p>
-} @if(result.isSuccess) {
-<p>{{ result.data[0].title }}</p>
-} @if(result.isError) {
-<p>Error</p>
-} }
+  <h3>Observable Result</h3>
 
-<h1>Signals Intersection</h1>
-@if(intersection(); as intersectionResult) { @if(intersectionResult.isLoading) {
-<p>Loading</p>
-} @if(intersectionResult.isSuccess) {
-<p>{{ intersectionResult.data }}</p>
-} @if(intersectionResult.isError) {
-<p>Error</p>
-} }
+  <blockquote>
+    @if (todosResult.result$ | async;as result) { @if (result.isLoading) {
+    <p>Loading</p>
+    } @if (result.isSuccess) {
+    <p>{{ result.data[0].title }}</p>
+    } @if (result.isError) {
+    <p>Error</p>
+    } }
+  </blockquote>
+</div>

src/app/basic-page/todos-page.component.ts

@@ -1,35 +1,20 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Injector,
-  inject,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TodosService } from '../services/todos.service';
-import { intersectResults } from '@ngneat/query';
+import { TabsComponent } from '../ui/query-tabs/tabs.component';
+import { TabComponent } from '../ui/query-tab/tab.component';
 
 @Component({
   selector: 'query-todos-page',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, TabsComponent, TabComponent],
   templateUrl: './todos-page.component.html',
   styles: [],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TodosPageComponent {
   #todosService = inject(TodosService);
-  #injector = inject(Injector);
 
   todosResult = this.#todosService.getTodos();
   todos = this.todosResult.result;
-
-  intersection = intersectResults(
-    [
-      this.#todosService.getTodo('1').result,
-      this.#todosService.getTodo('2').result,
-    ],
-    ([todoOne, todoTwo]) => {
-      return todoOne.title + todoTwo.title;
-    }
-  );
 }

src/app/infinite-scroll-page/posts-page.component.html

@@ -1,45 +1,90 @@
-<h1>Infinite Loading</h1>
+<div class="content">
 
-<ng-container *ngIf="posts$ | async as result">
+  <h1>Infinite Loading Example</h1>
+
+  <p>
+    In this example, as soon as the viewport gets to the end of the page it emits a event to pull in more data
+    from the server. This is done by using the <code>queryInView</code> directive.
+  </p>
+
+  <p>
+    To see the result changing, open the <b>devtools</b> in the <b>bottom-right</b> corner, from there you can
+    trigger a refetch of the query, invalidate it or even trigger the loading and error state.
+    Feel free to play around with it.
+  </p>
+</div>
+
+@if (posts$ | async;as result) {
   <p *ngIf="result.isPending">Loading...</p>
 
   <span *ngIf="result.isError">Error: {{ result.error.message }}</span>
 
-  <div>
+  <div class="pagination">
+    <div class="pagination-list">
+      {{
+        result.isFetching && !result.isFetchingNextPage
+          ? 'Background Updating...'
+          : ''
+      }}
+    </div>
     <button
+      class="pagination-previous button is-primary"
+      style="margin: 0 auto;"
+      [class.is-loading]="result.isFetchingPreviousPage"
       (click)="result.fetchPreviousPage()"
       [disabled]="!result.hasPreviousPage || result.isFetchingPreviousPage"
     >
       {{
         result.isFetchingPreviousPage
           ? 'Loading more...'
           : result.hasPreviousPage
-          ? 'Load Older'
-          : 'Nothing more to load'
+            ? 'Load Older'
+            : 'Nothing more to load'
       }}
     </button>
   </div>
 
-  <ng-container *ngIf="result.isSuccess">
-    <ng-container *ngFor="let page of result.data.pages">
-      <div *ngFor="let post of page.data">
-        <p
-          [ngStyle]="{
-            border: '1px solid gray',
-            borderRadius: '5px',
-            padding: '10rem 1rem',
-            background: getBackground(post.id)
-          }"
-        >
-          {{ post.name }}
-        </p>
-      </div>
-    </ng-container>
-  </ng-container>
+  <div style="margin-bottom: 3rem;">
+    @if (result.isSuccess) {
+      @for (page of result.data.pages;track $index) {
+        @for (post of page.data;track $index) {
+          <div class="card" style="margin-top: 3rem">
+            <div class="card-content">
+              <div class="media">
+                <div class="media-left">
+                  <figure class="image is-48x48">
+                    <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
+                  </figure>
+                </div>
+                <div class="media-content">
+                  <p class="title is-4">{{ post.name  }}</p>
+                  <p class="subtitle is-6"></p>
+                </div>
+              </div>
 
-  <div>
+              <div class="content">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Phasellus nec iaculis mauris.
+              </div>
+            </div>
+          </div>
+        }
+      }
+    }
+  </div>
+
+  <div class="pagination">
+    <div class="pagination-list">
+      {{
+        result.isFetching && !result.isFetchingNextPage
+          ? 'Background Updating...'
+          : ''
+      }}
+    </div>
     <button
       queryInView
+      class="button is-primary pagination-next"
+      [class.is-loading]="result.isFetchingNextPage"
       (inView)="result.fetchNextPage()"
       (click)="result.fetchNextPage()"
       [disabled]="!result.hasNextPage || result.isFetchingNextPage"
@@ -48,17 +93,9 @@ <h1>Infinite Loading</h1>
         result.isFetchingNextPage
           ? 'Loading more...'
           : result.hasNextPage
-          ? 'Load Newer'
-          : 'Nothing more to load'
+            ? 'Load Newer'
+            : 'Nothing more to load'
       }}
     </button>
   </div>
-
-  <div>
-    {{
-      result.isFetching && !result.isFetchingNextPage
-        ? 'Background Updating...'
-        : ''
-    }}
-  </div>
-</ng-container>
+}

src/app/infinite-scroll-page/posts.service.ts

@@ -47,8 +47,8 @@ function getProjects(c: number) {
         };
       });
 
-    const nextId = cursor < 10 ? data[data.length - 1].id + 1 : null;
-    const previousId = cursor > -10 ? data[0].id - pageSize : null;
+    const nextId = cursor < 20 ? data[data.length - 1].id + 1 : null;
+    const previousId = cursor > -20 ? data[0].id - pageSize : null;
 
     setTimeout(() => {
       observer.next({ data, nextId, previousId });

src/app/intersecting-page/intersecting-page.component.html

@@ -0,0 +1,44 @@
+<div class="content">
+  <h1>Intersecting Queries Example</h1>
+  <p>
+    This example uses the <code>intersectResults(mapFn)</code> method (for
+    Signals) and <code>intersectResults$(mapFn)</code> operator (for RxJS
+    Streams) to merge the results of two queries.
+  </p>
+
+  <p>
+    The two queries <code>getTodo(1)</code> and <code>getTodo(2)</code> will be
+    merged together and the result of each query will be concatenated into a
+    single string.
+  </p>
+
+  <p>
+    To see the result changing, open the <b>devtools</b> in the <b>bottom-right</b> corner, from there you can
+    trigger a refetch of the query, invalidate it or even trigger the loading and error state.
+    Feel free to play around with it.
+  </p>
+
+  <h3>Signal Result</h3>
+
+  <blockquote>
+    @if(intersection(); as intersectionResult) { @if(intersectionResult.isLoading) {
+      <p>Loading</p>
+    } @if(intersectionResult.isSuccess) {
+      <p>{{ intersectionResult.data }}</p>
+    } @if(intersectionResult.isError) {
+      <p>Error</p>
+    } }
+  </blockquote>
+
+  <h3>Observable Result</h3>
+
+  <blockquote>
+    @if(intersection$ | async; as intersectionResult) { @if(intersectionResult.isLoading) {
+      <p>Loading</p>
+    } @if(intersectionResult.isSuccess) {
+      <p>{{ intersectionResult.data }}</p>
+    } @if(intersectionResult.isError) {
+      <p>Error</p>
+    } }
+  </blockquote>
+</div>

src/app/intersecting-page/intersecting-page.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TodosService } from '../services/todos.service';
+import { intersectResults, intersectResults$ } from '@ngneat/query';
+import { combineLatest } from 'rxjs';
+
+@Component({
+  selector: 'query-intersecting-page',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './intersecting-page.component.html',
+  styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IntersectingPageComponent {
+  #todosService = inject(TodosService);
+
+  todosResult = this.#todosService.getTodos();
+  todos = this.todosResult.result;
+
+  intersection = intersectResults(
+    [
+      this.#todosService.getTodo('1').result,
+      this.#todosService.getTodo('2').result,
+    ],
+    ([todoOne, todoTwo]) => {
+      return todoOne.title + todoTwo.title;
+    }
+  );
+
+  intersection$ = combineLatest({
+    todoOne: this.#todosService.getTodo('1').result$,
+    todoTwo: this.#todosService.getTodo('2').result$,
+  }).pipe(
+    intersectResults$(({ todoOne, todoTwo }) => {
+      return todoOne.title + todoTwo.title;
+    })
+  );
+}