chore(examples): Update Angular example to use next version API (dotCMS#32160)

This pull request introduces several updates to improve type safety,
modernize API usage, and enhance Angular components across the
application. Key changes include the adoption of more specific
TypeScript interfaces, the replacement of deprecated methods with
updated APIs, and the refactoring of Angular components to use modern
features like `computed` properties and required inputs.

### TypeScript Improvements:
* Updated the `#getPageFromGraphQL` method in `PageClient` to support
generic types, improving flexibility and type safety
(`core-web/libs/sdk/client/src/lib/client/page/page-api.ts`).
[[1]](diffhunk://#diff-c78881047cc240f2b5bf982d6628d362d8d6809baef85ffadaf8f270d8aebc7dL119-R119)
[[2]](diffhunk://#diff-c78881047cc240f2b5bf982d6628d362d8d6809baef85ffadaf8f270d8aebc7dL129-R134)

### Angular Client Updates:
* Replaced `DotCmsClient.init` with `createDotCMSClient` in
`app.config.ts` to use the latest client initialization API. Updated the
client configuration type to `DotCMSClientConfig` for better
compatibility (`examples/angular/src/app/app.config.ts`).
* Added `DotCMSEditablePageService` to the application providers to
enable editable page functionality
(`examples/angular/src/app/app.config.ts`).

### Component Refactoring:
* Refactored multiple Angular components (`ActivityComponent`,
`BannerComponent`, `ImageComponent`, `ProductComponent`,
`WebPageContentComponent`) to use specific contentlet interfaces instead
of the generic `DotCMSContentlet`. This improves type safety and clarity
(`examples/angular/src/app/content-types`).
[[1]](diffhunk://#diff-63b433b9d03e786471e7d6108e15f86c5b2a190c018001c7dee7ac281d5195a2L4-R44)
[[2]](diffhunk://#diff-c28b5e34652734bbffe79d19692542393955e512f424fbd91f325997b80d4782L4-R49)
[[3]](diffhunk://#diff-481074a9594708861b3b3c1c4c2ea89f2a5619542b7d1c4d8758a2190364f765L3-R33)
[[4]](diffhunk://#diff-cd1f41fdf8bc1ca6879d6074add62d242d22f269a4e36920376626d69fd2b1eaL2-R33)
[[5]](diffhunk://#diff-c3e544da8f3e2fd565610871a05740024af320673950dc09095accc0da3f7fe0L3-R15)
* Replaced deprecated property access patterns (e.g.,
`contentlet()['fieldName']`) with modern, type-safe accessors (e.g.,
`contentlet().fieldName`) across components.
[[1]](diffhunk://#diff-63b433b9d03e786471e7d6108e15f86c5b2a190c018001c7dee7ac281d5195a2L4-R44)
[[2]](diffhunk://#diff-c28b5e34652734bbffe79d19692542393955e512f424fbd91f325997b80d4782L4-R49)
[[3]](diffhunk://#diff-481074a9594708861b3b3c1c4c2ea89f2a5619542b7d1c4d8758a2190364f765L3-R33)
[[4]](diffhunk://#diff-cd1f41fdf8bc1ca6879d6074add62d242d22f269a4e36920376626d69fd2b1eaL2-R33)
[[5]](diffhunk://#diff-c3e544da8f3e2fd565610871a05740024af320673950dc09095accc0da3f7fe0L3-R15)

### Blog Page Enhancements:
* Updated `BlogPostComponent` to use a `computed` property for parsing
`blogContent` dynamically, improving performance and readability
(`examples/angular/src/app/pages/blog/blog-post/blog-post.component.ts`).
[[1]](diffhunk://#diff-dfb28b2843662915c9de0d47636c9200186e00b6a74bd3121d3f4eb4e9eaa44cL1-R5)
[[2]](diffhunk://#diff-dfb28b2843662915c9de0d47636c9200186e00b6a74bd3121d3f4eb4e9eaa44cL14-R28)
* Refactored `blog.component.html` to align with the updated API
response structure, ensuring compatibility with the new `pageResponse`
format (`examples/angular/src/app/pages/blog/blog.component.html`).
[[1]](diffhunk://#diff-1fef797720bbe8494bbbacaa14d7fe1ba9262cc42f401b9a55e59509d43f9c16L3-R3)
[[2]](diffhunk://#diff-1fef797720bbe8494bbbacaa14d7fe1ba9262cc42f401b9a55e59509d43f9c16L16-L29)

These changes collectively improve the maintainability, performance, and
type safety of the codebase while aligning with modern Angular and
TypeScript best practices.

Author: zJaaal

core-web/libs/sdk/client/src/lib/client/page/page-api.ts

@@ -116,7 +116,7 @@ export class PageClient {
         url: string,
         options?: DotCMSPageRequestParams
     ): Promise<DotCMSComposedPageResponse<T>> {
-        return this.#getPageFromGraphQL(url, options) as Promise<DotCMSComposedPageResponse<T>>;
+        return this.#getPageFromGraphQL(url, options);
     }
 
     /**
@@ -126,12 +126,12 @@ export class PageClient {
      * @private
      * @param {string} url - The URL of the page to retrieve
      * @param {DotCMSPageRequestParams} [options] - Options including languageId, mode, and GraphQL parameters
-     * @returns {Promise<DotCMSPageResponse>} A Promise that resolves to the page data
+     * @returns {Promise<DotCMSComposedPageResponse<T>>} A Promise that resolves to the page data
      */
-    async #getPageFromGraphQL(
+    async #getPageFromGraphQL<T extends DotCMSExtendedPageResponse = DotCMSPageResponse>(
         url: string,
         options?: DotCMSPageRequestParams
-    ): Promise<DotCMSPageResponse> {
+    ): Promise<DotCMSComposedPageResponse<T>> {
         const {
             languageId = '1',
             mode = 'LIVE',

examples/angular/src/app/app.component.css

@@ -2,10 +2,9 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [RouterOutlet],
-  template: '<router-outlet />',
-  styleUrl: './app.component.css',
+    selector: 'app-root',
+    standalone: true,
+    imports: [RouterOutlet],
+    template: '<router-outlet />'
 })
 export class AppComponent {}

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

@@ -1,44 +1,49 @@
 import { ApplicationConfig, InjectionToken } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { createDotCMSClient } from '@dotcms/client/next';
 
-import { ClientConfig, DotCmsClient } from '@dotcms/client';
 import { provideDotCMSImageLoader } from '@dotcms/angular';
 
 import { routes } from './app.routes';
 import { environment } from '../environments/environment';
+import { DotCMSClientConfig } from '@dotcms/types';
+import { DotCMSEditablePageService } from '@dotcms/angular/next';
 
-export const DOTCMS_CLIENT_TOKEN = new InjectionToken<DotCmsClient>('DOTCMS_CLIENT');
+export const DOTCMS_CLIENT_TOKEN = new InjectionToken<ReturnType<typeof createDotCMSClient>>(
+    'DOTCMS_CLIENT'
+);
 
-const DOTCMS_CLIENT_CONFIG: ClientConfig = {
-  dotcmsUrl: environment.dotcmsUrl,
-  authToken: environment.authToken,
-  siteId: environment.siteId,
+const DOTCMS_CLIENT_CONFIG: DotCMSClientConfig = {
+    dotcmsUrl: environment.dotcmsUrl,
+    authToken: environment.authToken,
+    siteId: environment.siteId
 };
 
-const client = DotCmsClient.init(DOTCMS_CLIENT_CONFIG);
+const client = createDotCMSClient(DOTCMS_CLIENT_CONFIG);
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    provideRouter(routes),
-    /**
-     * We provide the ⁠DOTCMS_CLIENT_TOKEN with the initialized ⁠DotCmsClient instance, enabling
-     * its injection throughout the application. This approach ensures a single ⁠DotCmsClient
-     * instance is used, promoting consistency and centralized management of client configuration.
-     */
-    {
-      provide: DOTCMS_CLIENT_TOKEN,
-      useValue: client
-    },
-    /**
-     * This custom image loader, designed for the NgOptimizedImage component, appends the dotCMS URL
-     * to the image source if it’s not an external URL.
-     *
-     * Additionally, it appends the ⁠language_id query parameter if the ⁠loaderParams object contains
-     * a ⁠languageId key. To use an image from an external URL, set the ⁠isOutsideSRC key to ⁠true in
-     * the ⁠loaderParams object.
-     * <img [ngSrc]="https://my-url.com/some.jpg" [loaderParams]="{isOutsideSRC: true}" />
-     * For further customization, you can provide your own image loader implementation.
-     */
-    provideDotCMSImageLoader(environment.dotcmsUrl),
-  ],
+    providers: [
+        provideRouter(routes),
+        /**
+         * We provide the ⁠DOTCMS_CLIENT_TOKEN with the initialized ⁠DotCmsClient instance, enabling
+         * its injection throughout the application. This approach ensures a single ⁠DotCmsClient
+         * instance is used, promoting consistency and centralized management of client configuration.
+         */
+        {
+            provide: DOTCMS_CLIENT_TOKEN,
+            useValue: client
+        },
+        /**
+         * This custom image loader, designed for the NgOptimizedImage component, appends the dotCMS URL
+         * to the image source if it’s not an external URL.
+         *
+         * Additionally, it appends the ⁠language_id query parameter if the ⁠loaderParams object contains
+         * a ⁠languageId key. To use an image from an external URL, set the ⁠isOutsideSRC key to ⁠true in
+         * the ⁠loaderParams object.
+         * <img [ngSrc]="https://my-url.com/some.jpg" [loaderParams]="{isOutsideSRC: true}" />
+         * For further customization, you can provide your own image loader implementation.
+         */
+        provideDotCMSImageLoader(environment.dotcmsUrl),
+        DotCMSEditablePageService
+    ]
 };

examples/angular/src/app/app.config.ts

@@ -1,15 +1,14 @@
 import { Routes } from '@angular/router';
-import { DotCMSPagesComponent } from './pages/pages.component';
+import { DotCMSPageComponent } from './pages/dot-cms-page/dot-cms-page.component';
 import { BlogComponent } from './pages/blog/blog.component';
 
 export const routes: Routes = [
-
-  {
-    path: 'blog/post/:slug',
-    component: BlogComponent
-  },
-  {
-    path: '**',
-    component: DotCMSPagesComponent
-  },
+    {
+        path: 'blog/post/:slug',
+        component: BlogComponent
+    },
+    {
+        path: '**',
+        component: DotCMSPageComponent
+    }
 ];

examples/angular/src/app/app.routes.ts

@@ -1,38 +1,42 @@
 import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { DotCMSContentlet } from '@dotcms/angular';
+import { DotCMSBasicContentlet } from '@dotcms/types';
+
+interface ActivityContentlet extends DotCMSBasicContentlet {
+    image?: {
+        identifier: string;
+    };
+    title: string;
+    description: string;
+    urlTitle: string;
+}
 
 @Component({
-  selector: 'app-activity',
-  standalone: true,
-  imports: [RouterLink, NgOptimizedImage],
-  template: ` <article class="overflow-hidden p-4 bg-white rounded shadow-lg">
-    @if (contentlet().image; as image) {
-      <img
-        class="w-full"
-        [ngSrc]="image"
-        width="100"
-        height="100"
-        alt="Activity Image"
-      />
-    }
-    <div class="px-6 py-4">
-      <p class="mb-2 text-xl font-bold">{{ contentlet().title }}</p>
-      <p class="text-base line-clamp-3">{{ contentlet()['description'] }}</p>
-    </div>
-    <div class="px-6 pt-4 pb-2">
-      <a
-        [routerLink]="'/activities/' + contentlet()['urlTitle'] || '#'"
-        class="inline-block px-4 py-2 font-bold text-white bg-red-400 rounded-full hover:bg-red-500"
-      >
-        Link to detail →
-      </a>
-    </div>
-  </article>`,
-  styleUrl: './activity.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-activity',
+    standalone: true,
+    imports: [RouterLink, NgOptimizedImage],
+    template: ` <article class="overflow-hidden p-4 bg-white rounded-sm shadow-lg my-2">
+        @if (contentlet().inode; as inode) {
+        <div class="relative w-full h-56 overflow-hidden">
+            <img class="object-cover w-full h-full" [ngSrc]="inode" fill alt="Activity Image" />
+        </div>
+        }
+        <div class="px-6 py-4">
+            <p class="mb-2 text-xl font-bold">{{ contentlet().title }}</p>
+            <p class="text-base line-clamp-3">{{ contentlet().description }}</p>
+        </div>
+        <div class="px-6 pt-4 pb-2">
+            <a
+                [routerLink]="'/activities/' + contentlet().urlTitle || '#'"
+                class="inline-block px-4 py-2 font-bold text-white bg-red-400 rounded-full hover:bg-red-500">
+                Link to detail →
+            </a>
+        </div>
+    </article>`,
+    styleUrl: './activity.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ActivityComponent {
-  contentlet = input.required<DotCMSContentlet>();
+    contentlet = input.required<ActivityContentlet>();
 }

examples/angular/src/app/content-types/activity/activity.component.ts

@@ -1,42 +1,50 @@
 import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { DotCMSContentlet, DotEditableTextComponent } from '@dotcms/angular';
+
+import { DotCMSEditableTextComponent } from '@dotcms/angular/next';
+import { DotCMSBasicContentlet } from '@dotcms/types';
+
+interface BannerContentlet extends DotCMSBasicContentlet {
+    image?: {
+        identifier: string;
+    };
+    title: string;
+    caption: string;
+    link: string;
+    buttonText: string;
+}
 
 @Component({
-  selector: 'app-banner',
-  standalone: true,
-  imports: [RouterLink, NgOptimizedImage, DotEditableTextComponent],
-  template: `<div
-    class="flex overflow-hidden relative justify-center items-center w-full h-96 bg-gray-200"
-  >
-    @if (contentlet().image; as image) {
-    <img
-      class="object-cover w-full"
-      [ngSrc]="image"
-      [alt]="contentlet().title"
-      fill
-      priority
-    />
-    }
-    <div
-      class="flex absolute inset-0 flex-col justify-center items-center p-4 text-center text-white"
-    >
-      <h2 class="mb-2 text-6xl font-bold text-shadow">
-        <dot-editable-text fieldName="title" [contentlet]="contentlet()" />
-      </h2>
-      <p class="mb-4 text-xl text-shadow">{{ contentlet()['caption'] }}</p>
-      <a
-        class="p-4 text-xl bg-red-400 rounded transition duration-300 hover:bg-red-500"
-        [routerLink]="contentlet()['link']"
-      >
-        {{ contentlet()['buttonText'] }}
-      </a>
-    </div>
-  </div>`,
-  styleUrl: './banner.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-banner',
+    standalone: true,
+    imports: [RouterLink, NgOptimizedImage, DotCMSEditableTextComponent],
+    template: `<div
+        class="flex overflow-hidden relative justify-center items-center w-full h-96 bg-gray-200">
+        @if (contentlet().image?.identifier; as imageIdentifier) {
+        <img
+            class="object-cover w-full"
+            [ngSrc]="imageIdentifier"
+            [alt]="contentlet().title"
+            fill
+            priority />
+        }
+        <div
+            class="flex absolute inset-0 flex-col justify-center items-center p-4 text-center text-white">
+            <h2 class="mb-2 text-6xl font-bold text-shadow">
+                <dotcms-editable-text fieldName="title" [contentlet]="contentlet()" />
+            </h2>
+            <p class="mb-4 text-xl text-shadow">{{ contentlet().caption }}</p>
+            <a
+                class="p-4 text-xl bg-red-400 rounded-sm transition duration-300 hover:bg-red-500"
+                [routerLink]="contentlet().link">
+                {{ contentlet().buttonText }}
+            </a>
+        </div>
+    </div>`,
+    styleUrl: './banner.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class BannerComponent {
-  contentlet = input.required<DotCMSContentlet>();
+    contentlet = input.required<BannerContentlet>();
 }

examples/angular/src/app/content-types/banner/banner.component.ts

@@ -1,32 +1,34 @@
-import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { NgOptimizedImage } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { DotCMSContentlet } from '@dotcms/angular';
+import { DotCMSBasicContentlet } from '@dotcms/types';
+
+interface ImageContentlet extends DotCMSBasicContentlet {
+    fileAsset: string;
+    title: string;
+    description: string;
+}
 
 @Component({
-  selector: 'app-image',
-  standalone: true,
-  imports: [CommonModule, NgOptimizedImage],
-  template: `<div
-    class="overflow-hidden relative mb-4 bg-white rounded shadow-lg group"
-  >
-    <div class="relative w-full h-96 bg-gray-200">
-      <img
-        class="object-cover"
-        [ngSrc]="contentlet()['fileAsset']"
-        [alt]="contentlet().title"
-        fill
-      />
-    </div>
-    <div
-      class="absolute bottom-0 px-6 py-8 w-full text-white bg-orange-500 bg-opacity-80 transition-transform duration-300 translate-y-full w-100 group-hover:translate-y-0"
-    >
-      <div class="mb-2 text-2xl font-bold">{{ contentlet().title }}</div>
-      <p class="text-base">{{ contentlet()['description'] }}</p>
-    </div>
-  </div>`,
-  styleUrl: './image.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-image',
+    standalone: true,
+    imports: [NgOptimizedImage],
+    template: `<div class="overflow-hidden relative mb-4 bg-white rounded shadow-lg group">
+        <div class="relative w-full h-96 bg-gray-200">
+            <img
+                class="object-cover"
+                [ngSrc]="contentlet().fileAsset"
+                [alt]="contentlet().title"
+                fill />
+        </div>
+        <div
+            class="absolute bottom-0 px-6 py-8 w-full text-white bg-orange-500 bg-opacity-80 transition-transform duration-300 translate-y-full w-100 group-hover:translate-y-0">
+            <div class="mb-2 text-2xl font-bold">{{ contentlet().title }}</div>
+            <p class="text-base">{{ contentlet().description }}</p>
+        </div>
+    </div>`,
+    styleUrl: './image.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ImageComponent {
-  contentlet = input.required<DotCMSContentlet>();
+    contentlet = input.required<ImageContentlet>();
 }