SDK: Unable to Edit Unpublished Page in Angular Example

examples/angular/src/app/pages/pages.component.ts

@@ -17,8 +17,13 @@ import { HeaderComponent } from './components/header/header.component';
 import { NavigationComponent } from './components/navigation/navigation.component';
 import { FooterComponent } from './components/footer/footer.component';
 import { PageService } from './services/page.service';
-import { CUSTOMER_ACTIONS, postMessageToEditor } from '@dotcms/client';
+import {
+  CLIENT_ACTIONS,
+  isInsideEditor,
+  postMessageToEditor,
+} from '@dotcms/client';
 import { DYNAMIC_COMPONENTS } from './components';
+import { DOTCMS_CLIENT_TOKEN } from '../app.config';
 
 export type PageError = {
   message: string;
@@ -51,6 +56,8 @@ export class DotCMSPagesComponent implements OnInit {
   readonly #destroyRef = inject(DestroyRef);
   readonly #router = inject(Router);
   readonly #pageService = inject(PageService);
+  readonly #client = inject(DOTCMS_CLIENT_TOKEN);
+
   protected readonly $context = signal<PageRender>({
     page: null,
     nav: null,
@@ -63,6 +70,10 @@ export class DotCMSPagesComponent implements OnInit {
   protected readonly editorCofig: any = { params: { depth: 2 } };
 
   ngOnInit() {
+    if (isInsideEditor()) {
+      this.#listenToEditorChanges();
+    }
+
     this.#router.events
       .pipe(
         filter(
@@ -90,10 +101,7 @@ export class DotCMSPagesComponent implements OnInit {
       });
   }
 
-  #setPageContent(
-    page: DotCMSPageAsset,
-    nav: DotcmsNavigationItem | null
-  ) {
+  #setPageContent(page: DotCMSPageAsset, nav: DotcmsNavigationItem | null) {
     this.$context.set({
       status: 'success',
       page,
@@ -122,6 +130,20 @@ export class DotCMSPagesComponent implements OnInit {
      * This is a temporary workaround to avoid the editor to be stuck in the loading state.
      * This will be removed once the editor is able to detect when the client is ready without use DotcmsLayoutComponent.
      */
-    postMessageToEditor({ action: CUSTOMER_ACTIONS.CLIENT_READY, payload: {} });
+    postMessageToEditor({ action: CLIENT_ACTIONS.CLIENT_READY, payload: {} });
+  }
+
+  #listenToEditorChanges() {
+    this.#client.editor.on('changes', (page) => {
+      if (!page) {
+        return;
+      }
+      this.$context.update((state) => ({
+        ...state,
+        page: page as DotCMSPageAsset,
+        status: 'success',
+        error: null,
+      }));
+    });
   }
 }

examples/angular/src/app/pages/services/page.service.ts

@@ -75,13 +75,13 @@ export class PageService {
     route: ActivatedRoute,
     config: any
   ): Observable<PageAndNavResponse> {
-    const queryParams = route.snapshot.queryParamMap;
+    const params = route.snapshot.queryParams;
     const url = route.snapshot.url.map((segment) => segment.path).join('/');
     const path = url || '/';
 
     const pageParams = getPageRequestParams({
       path,
-      params: queryParams,
+      params
     });
 
     return from(this.client.page.get({ ...pageParams, ...config.params })).pipe(