{ "type" : "doc", "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "The " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "dotCMS " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://www.google.com/url?q=https://www2.dotcms.com/docs/latest/uve-headless-config?_gl%3D1*38jw9f*_gcl_au*NjA1Mzc3MzQ2LjE3Mzc1MDc3NDQ.&sa=D&source=editors&ust=1740690516632073&usg=AOvVaw1YssNyGupU1LKnSnTeo-uy", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : "c32" } }, { "type" : "underline" }, { "type" : "bold" } ], "text" : "Universal Visual Editor" }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : " " }, { "type" : "text", "text" : "(aka UVE" }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : ") " }, { "type" : "text", "text" : "is a " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "framework-agnostic" }, { "type" : "text", "text" : " editor that enables full in-context editing for headless websites, single-page applications (SPAs), and other remote web applications that use dotCMS as a content source." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "If you're developing applications with Angular, you can integrate UVE to provide a seamless visual editing experience, leveraging the robust architectures of both Angular and dotCMS. By implementing it, you enable users to interact with the interface more dynamically, allowing for instant updates and better content management within your application." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "In this guide, we will walk through the integration of UVE into an Angular project from scratch, ensuring a clean and efficient implementation. We'll cover everything from installation to creating a functional component that enables in-context visual editing of your content." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Note:" }, { "type" : "text", "text" : " The " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "dotCMS Angular library" }, { "type" : "text", "text" : " is compatible and supported starting from " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Angular 17" }, { "type" : "text", "text" : "." } ] }, { "type" : "horizontalRule" }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 2 }, "content" : [ { "type" : "text", "text" : "Prerequisites" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Before integrating " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "UVE" }, { "type" : "text", "text" : " into your Angular project, ensure that your development environment is properly set up. You'll need:" } ] }, { "type" : "bulletList", "content" : [ { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "dotCMS instance:" }, { "type" : "text", "text" : " You can use the demo instance located " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://www.google.com/url?q=https://demo.dotcms.com/?_gl%3D1*jhtuus*_gcl_au*NjA1Mzc3MzQ2LjE3Mzc1MDc3NDQ.&sa=D&source=editors&ust=1740690516634460&usg=AOvVaw2njJzBnWSN4dGUWwjHwhtk", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : "c32" } }, { "type" : "underline" } ], "text" : "here" }, { "type" : "text", "text" : "." } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Node.js & npm:" }, { "type" : "text", "text" : " Follow the " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://www.google.com/url?q=https://nodejs.org/&sa=D&source=editors&ust=1740690516634817&usg=AOvVaw16vjtbDT1z0uV6Lt1Y7swr", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : "c32" } }, { "type" : "underline" } ], "text" : "NodeJS Installation guide" }, { "type" : "text", "text" : "." } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Angular CLI:" }, { "type" : "text", "text" : " Install it by following this " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://www.google.com/url?q=https://angular.dev/tools/cli/setup-local&sa=D&source=editors&ust=1740690516635127&usg=AOvVaw0RXuFyjqmdS2ihJyb5kti4", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : "c32" } }, { "type" : "underline" } ], "text" : "Setting Angular Local " }, { "type" : "text", "text" : "environment guide." } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "An Angular application:" }, { "type" : "text", "text" : " You can create your project using this " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://www.google.com/url?q=https://angular.dev/tutorials/first-app&sa=D&source=editors&ust=1740690516635518&usg=AOvVaw2s3PavxqcBrp-RMPpp4ADk", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : "c32" } }, { "type" : "underline" } ], "text" : "Creating your first Angular app" }, { "type" : "text", "text" : " official guide." }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "#cmnt1", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : null } }, { "type" : "superscript" } ], "text" : "[a]" }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "#cmnt2", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : null } }, { "type" : "superscript" } ], "text" : "[b]" } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Basic knowledge of Tailwind CSS:" }, { "type" : "text", "text" : " Check out the " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://www.google.com/url?q=https://tailwindcss.com/docs/installation/framework-guides/angular&sa=D&source=editors&ust=1740690516635995&usg=AOvVaw2RjtZcgsy1CHDylORD8PPz", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : "c32" } }, { "type" : "underline" } ], "text" : "Tailwind Documentation" }, { "type" : "text", "text" : " for installation instructions." } ] } ] } ] }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 2 }, "content" : [ { "type" : "text", "text" : "What we’re building" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "In this tutorial, we will build a simple React App that’s fully editable with " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://dev.dotcms.com/docs/universal-visual-editor", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : "c32" } }, { "type" : "underline" } ], "text" : "dotCMS Universal Visual Editor" }, { "type" : "text", "text" : ", using dotCMS JavaScript SDK for Angular. Let's see the final result of the tutorial:" } ] }, { "type" : "dotVideo", "attrs" : { "src" : "/dA/6579fed7a4a77863c4774474a396ca9d/asset/Screen Recording 2025-02-27 at 4.03.54PM.mov", "mimeType" : "video/quicktime", "width" : 1920, "height" : 1050, "orientation" : "horizontal", "data" : { "identifier" : "6579fed7a4a77863c4774474a396ca9d", "languageId" : 1, "hostName" : "SYSTEM_HOST", "modDate" : "2025-02-27T21:38:24.691+00:00", "title" : "angular-example-final-project-showcase", "contentTypeIcon" : "movie", "baseType" : "DotAsset", "inode" : "3541ad56-2666-409b-82b2-f90856127ee9", "archived" : false, "working" : true, "locked" : false, "stInode" : "c77450b834901a20c8193ef9d561ee5b", "contentType" : "Video", "live" : true, "owner" : "user-6c291978-bb9b-4bab-9bd8-467e0ce4e27f", "hasLiveVersion" : true, "folder" : "SYSTEM_FOLDER", "sortOrder" : 0, "modUser" : "user-6c291978-bb9b-4bab-9bd8-467e0ce4e27f", "urlTitle" : "angular-example-final-project-showcase", "description" : { "type" : "doc", "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" } } ] }, "publishDate" : "2025-02-27T21:37:00.000+00:00", "show" : "true", "asset" : "/data/shared/assets/3/5/3541ad56-2666-409b-82b2-f90856127ee9/asset/Screen Recording 2025-02-27 at 4.03.54PM.mov", "imagePrimaryLoad" : "true", "author" : [ ] } } }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Note: If you get stuck at any point in this tutorial, you can find the full code in this GitHub repository: " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://github.com/KevinDavilaDotCMS/dotcms-angular-integration-example", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : null } }, { "type" : "underline" } ], "text" : "https://github.com/KevinDavilaDotCMS/dotcms-angular-integration-example" }, { "type" : "text", "text" : ". You can also follow along step by step by checking out the commit history here: " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://www.google.com/url?q=https://github.com/KevinDavilaDotCMS/dotcms-angular-integration-example/commits/main&sa=D&source=editors&ust=1740690516637358&usg=AOvVaw2XlKGh-hAEIsg9ZKJYDYdL", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : "c32" } }, { "type" : "underline" } ], "text" : "Commit History." } ] }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 2 }, "content" : [ { "type" : "text", "text" : "dotCMS Basic knowledge" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "dotCMS has a flexible page structure consisting of the following hierarchy:" } ] }, { "type" : "bulletList", "content" : [ { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Rows → Columns → Containers → Content (e.g., news, events, blog posts)." } ] } ] } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "This structure enables easy content organization within dotCMS pages." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Example Diagram:" } ] }, { "type" : "dotImage", "attrs" : { "textAlign" : "left", "src" : "/dA/d0466af87dcd0e06c48f8c2be708cc7a/asset/image.png?language_id=1", "alt" : "image.png", "title" : "image.png", "href" : null, "data" : { "identifier" : "d0466af87dcd0e06c48f8c2be708cc7a", "languageId" : 1, "hostName" : "SYSTEM_HOST", "modDate" : "2025-02-27T21:17:34.153+00:00", "title" : "image.png", "contentTypeIcon" : "image", "baseType" : "DotAsset", "inode" : "0b6cb12b-67db-434c-94fe-0846b4c2bdf8", "archived" : false, "working" : true, "locked" : false, "stInode" : "4061db324fdce3993a494c856e76ab1e", "contentType" : "Images", "live" : true, "owner" : "user-6c291978-bb9b-4bab-9bd8-467e0ce4e27f", "hasLiveVersion" : true, "folder" : "SYSTEM_FOLDER", "sortOrder" : 0, "modUser" : "system", "asset" : "/data/shared/assets/0/b/0b6cb12b-67db-434c-94fe-0846b4c2bdf8/asset/image.png", "description" : "Diagram illustrating a webpage layout with sections for header, footer, and two main rows. Row 1 is divided into two columns. Column 1 contains two containers labeled as Container 1 and Container 2 with text placeholders. Column 2 contains a Container 3 with a nested text placeholder." }, "target" : null } }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Learn more about page structure " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://www.google.com/url?q=https://www2.dotcms.com/courses/videos/content-contributor-introduction/23.01&sa=D&source=editors&ust=1740690516638730&usg=AOvVaw3Apj9ihtkpcp-P-13cw_Ip", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : "c32" } }, { "type" : "underline" } ], "text" : "here" }, { "type" : "text", "text" : "." } ] }, { "type" : "horizontalRule" }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 2 }, "content" : [ { "type" : "text", "text" : "dotCMS Page API" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "The " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://dev.dotcms.com/docs/page-rest-api-layout-as-a-service-laas", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : "c32" } }, { "type" : "underline" } ], "text" : "dotCMS Page API" }, { "type" : "text", "text" : " provides everything we need to build custom pages in a headless architecture. The response includes details about:" } ] }, { "type" : "bulletList", "content" : [ { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Layout" } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Containers" } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Page" } ] } ] } ] }, { "type" : "horizontalRule" }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 2 }, "content" : [ { "type" : "text", "text" : "Getting your dotCMS Environment ready" } ] }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 3 }, "content" : [ { "type" : "text", "text" : "Create Our Example Page" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Let’s create the page we’ll use in this tutorial. Follow these steps to create the page in dotCMS:" } ] }, { "type" : "orderedList", "attrs" : { "start" : 1 }, "content" : [ { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Browse to Site > Pages." } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Click on Create Page and select Page Type." } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Name the page example and select the System Template." } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Publish the page." } ] } ] } ] }, { "type" : "dotVideo", "attrs" : { "src" : "/dA/0a4a4ed9e19ec40e6350ef155e2c9229/fileAsset/create-example-page.mov", "mimeType" : "video/quicktime", "width" : "auto", "height" : "auto", "orientation" : "horizontal", "data" : { } } }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 3 }, "content" : [ { "type" : "text", "text" : "Universal Visual Editor Configuration" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Let’s start by " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://dev.dotcms.com/docs/uve-headless-config#configuration", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : "c32" } }, { "type" : "underline" } ], "text" : "configuring the Universal Visual Editor" }, { "type" : "text", "text" : " (UVE) in dotCMS for headless pages. This step is needed to use UVE to edit pages built in any JavaScript framework and served by any external hosting service. Next, let’s set up the Universal Visual Editor:" } ] }, { "type" : "orderedList", "attrs" : { "start" : 1 }, "content" : [ { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Sign in your dotCMS instance" } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Browse to Settings -> Apps" } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Select the built-in integration for UVE - Universal Visual Editor." } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Select the " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "site" }, { "type" : "text", "text" : " that will be feeding the destination pages." } ] } ] } ] }, { "type" : "dotVideo", "attrs" : { "src" : "/dA/a9d1584cb8f840129717a5386fd1ac46/fileAsset/setting-up-uve-app-gif.mov", "mimeType" : "video/quicktime", "width" : "auto", "height" : "auto", "orientation" : "horizontal", "data" : { } } }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "In the configuration section, add your JSON object configuration. For this example, we’ll use a simple configuration to work with a " }, { "type" : "text", "marks" : [ { "type" : "code" } ], "text" : "localhost" }, { "type" : "text", "text" : " environment:" } ] }, { "type" : "codeBlock", "attrs" : { "language" : "javascript" }, "content" : [ { "type" : "text", "text" : "{\n \"config\": [\n {\n \"pattern\": \".*\",\n \"url\": \"http://localhost:4200/\"\n }\n ]\n}" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Where:" } ] }, { "type" : "bulletList", "content" : [ { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "pattern: a regular expression (RegEx) that identifies to dotCMS which URLs should be associated with the Angular application" } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "url: the location of our Angular app" } ] } ] } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Note: if you want to know more about Universal Visual Editor configuration and all you can do with it, check out our documentation: " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://dev.dotcms.com/docs/uve-headless-config#configuration", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : "c32" } }, { "type" : "underline" } ], "text" : "Universal Visual Editor Configuration for Headless Pages" }, { "type" : "text", "text" : "." } ] }, { "type" : "horizontalRule" }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 2 }, "content" : [ { "type" : "text", "text" : "Building our Angular + dotCMS Page" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "To keep our project structured and maintainable, we will organize it as follows:" } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "🗂️ src/\n\n├── 🗂️ environments/\n\n└── 🗂️ app/\n\n ├── 🗂️ content-types/\n\n ├── 🗂️ layout/\n\n ├── 🗂️ pages/\n\n ├── app.component.html\n\n ├── app.component.ts\n\n └── app.component.scss" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "The first step in setting up our environment is ensuring we have the " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "environment files" }, { "type" : "text", "text" : "." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "If they are missing, you have two options:" } ] }, { "type" : "orderedList", "attrs" : { "start" : 1 }, "content" : [ { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Create them manually" }, { "type" : "text", "text" : " within the src directory." } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Use the Angular CLI schematic" }, { "type" : "text", "text" : ", which will generate the environments folder along with two files:" } ] } ] } ] }, { "type" : "bulletList", "content" : [ { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "environment.ts" } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "environment.development.ts" } ] } ] } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "ng generate environments" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "By running the provided command in your project's root directory, you'll have these files set up automatically." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "These files will store " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "environment variables related to dotCMS" }, { "type" : "text", "text" : ", ensuring a clean and centralized configuration. Next, we add this to the environments and fill it with our information" } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "export const environment = {\n dotcmsURL: 'YOU_DOTCMS_HOST',\n authToken: 'YOUR_TOKEN',\n siteId: 'YOUR_DOTCMS_SITE_ID'\n};" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "We will also create a component inside the pages/ directory, which will be responsible for routing our application and rendering content based on the desired path." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "To achieve this, run the following command:" } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "ng generate component pages --inline-template=true --inline-style=true --skip-tests" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "This will generate a new file: " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "pages.component.ts" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Next, we need to set this component as our main route. To do this, we will navigate to app.routes and configure it accordingly:" } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "/* app.routes.ts */\n\nimport { Routes } from '@angular/router';\nimport { PagesComponent } from './pages/pages.component';\n\nexport const routes: Routes = [\n {\n path: '',\n component: PagesComponent\n },\n {\n path: '**',\n component: PagesComponent\n }\n];" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "And then modify the AppComponent" } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "/* app.component.ts */\n\nimport { Component } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n imports: [RouterOutlet],\n styleUrl: './app.component.scss'\n})\nexport class AppComponent { }" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" } }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "/* app.component.html */\n\n" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "With this setup, whenever we access any route in our application, the PagesComponent will be rendered." } ] }, { "type" : "dotImage", "attrs" : { "textAlign" : "left", "src" : "/dA/8f9dea6943e2c77888f59b833872bbe1/asset/image5.gif?language_id=1", "alt" : "image5.gif", "title" : "image5.gif", "href" : null, "data" : { "identifier" : "8f9dea6943e2c77888f59b833872bbe1", "languageId" : 1, "hostName" : "SYSTEM_HOST", "modDate" : "2025-02-27T21:25:23.855+00:00", "title" : "image5.gif", "contentTypeIcon" : "image", "baseType" : "DotAsset", "inode" : "693ee9b2-a72e-4c9c-8a8d-c0a4726e5e04", "archived" : false, "working" : true, "locked" : false, "stInode" : "4061db324fdce3993a494c856e76ab1e", "contentType" : "Images", "live" : true, "owner" : "user-6c291978-bb9b-4bab-9bd8-467e0ce4e27f", "hasLiveVersion" : true, "folder" : "SYSTEM_FOLDER", "sortOrder" : 0, "modUser" : "system", "asset" : "/data/shared/assets/6/9/693ee9b2-a72e-4c9c-8a8d-c0a4726e5e04/asset/image5.gif", "description" : "A computer screen displaying a browser window with a blank page that has the text 'pages works!' at the top left corner." }, "target" : null } }, { "type" : "horizontalRule" }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 2 }, "content" : [ { "type" : "text", "text" : "Fetching a Page from dotCMS" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "The next step is to install the " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "dotCMS client library SDK, part of our Javascript SDK" }, { "type" : "text", "text" : ". This library provides the necessary methods to interact seamlessly with dotCMS APIs, allowing us to retrieve and manage content efficiently." } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "npm i @dotcms/client" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "After installing the SDK library, we need to configure the client with our specific values. To do this, we must add the following configuration inside the " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "app.config.ts" }, { "type" : "text", "text" : " file." } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "export const DOTCMS_CLIENT_TOKEN = new InjectionToken('DOTCMS_CLIENT');\n\nconst DOTCMS_CLIENT_CONFIG: ClientConfig = {\n dotcmsUrl: environment.dotcmsURL,\n authToken: environment.authToken,\n siteId: environment.siteId,\n};\n\nconst client = DotCmsClient.init(DOTCMS_CLIENT_CONFIG);\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n ...existing configs,\n {\n provide: DOTCMS_CLIENT_TOKEN,\n useValue: client\n },\n ],\n};" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Where:" } ] }, { "type" : "bulletList", "content" : [ { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "dotcmsURL" }, { "type" : "text", "text" : ": The URL of your dotCMS instance." } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "authToken" }, { "type" : "text", "text" : ": The JWT token of the dotCMS user you are using. If you don't have one, you can generate it by following these instructions:" }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://www2.dotcms.com/docs/latest/rest-api-authentication?_gl=1*th7nts*_gcl_au*NjA1Mzc3MzQ2LjE3Mzc1MDc3NDQ.#creating-an-api-token-in-the-ui", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : null } } ], "text" : " " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://dev.dotcms.com/docs/rest-api-authentication#creating--an-api-token-in-the-ui", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : null } }, { "type" : "underline" }, { "type" : "bold" } ], "text" : "Creating an API Token in the UI" }, { "type" : "text", "text" : "." } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "siteId" }, { "type" : "text", "text" : ": The ID of the site from which you want to retrieve information. If left empty, the client will use the " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "default site" }, { "type" : "text", "text" : ". Learn more here: " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://dev.dotcms.com/docs/multi-site-management", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : null } }, { "type" : "underline" }, { "type" : "bold" } ], "text" : "Multi-Site Management in dotCMS" }, { "type" : "text", "text" : "." } ] } ] } ] }, { "type" : "horizontalRule" }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 2 }, "content" : [ { "type" : "text", "text" : "Fetching the Page Asset" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Now that our environment is fully set up, we are ready to retrieve content from our dotCMS instance!" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "We can use the " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "http://client.page", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : null } } ], "text" : "client.page" }, { "type" : "text", "text" : ".get() method to fetch the content of any page within our dotCMS instance. This method accepts an object of type " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "PageApiOptions" }, { "type" : "text", "text" : " as a parameter." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "For this example, we will use the path provided in the URL along with the default language_id." } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "/* pages.component.ts */\n\nimport { Component, inject } from '@angular/core';\nimport { DOTCMS_CLIENT_TOKEN } from '../app.config';\nimport { ActivatedRoute } from '@angular/router';\n\n@Component({\n selector: 'app-pages',\n imports: [],\n template: `\n

\n pages works!\n

\n `,\n styles: ``\n})\nexport class PagesComponent {\n #dotcmsClient = inject(DOTCMS_CLIENT_TOKEN);\n #route = inject(ActivatedRoute);\n\n ngOnInit() {\n this.#route.url.subscribe((urlSegments) => {\n const pathname = urlSegments.join('/');\n\n this.#fetchPageAsset(pathname);\n });\n }\n\n #fetchPageAsset(pathname: string) {\n this.#dotcmsClient.page.get({ path: pathname, language_id: 1 })\n .then((page) => {\n console.log(\"DotCMS Page Asset: \",page);\n })\n .catch((error) => {\n console.error(\"Error fetching page asset: \",error);\n });\n }\n}" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "If we check the console, we will see the response containing all the details of our " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Page Asset" }, { "type" : "text", "text" : "." } ] }, { "type" : "dotImage", "attrs" : { "textAlign" : "left", "src" : "/dA/0020c809cedf6f41134fbdc202cf0de9/asset/image4.gif?language_id=1", "alt" : "image4.gif", "title" : "image4.gif", "href" : null, "data" : { "identifier" : "0020c809cedf6f41134fbdc202cf0de9", "languageId" : 1, "hostName" : "SYSTEM_HOST", "modDate" : "2025-02-27T21:28:20.698+00:00", "title" : "image4.gif", "contentTypeIcon" : "image", "baseType" : "DotAsset", "inode" : "b03d4e53-2a2c-4a4c-94d3-82706bacc4d5", "archived" : false, "working" : true, "locked" : false, "stInode" : "4061db324fdce3993a494c856e76ab1e", "contentType" : "Images", "live" : true, "owner" : "user-6c291978-bb9b-4bab-9bd8-467e0ce4e27f", "hasLiveVersion" : true, "folder" : "SYSTEM_FOLDER", "sortOrder" : 0, "modUser" : "system", "asset" : "/data/shared/assets/b/0/b03d4e53-2a2c-4a4c-94d3-82706bacc4d5/asset/image4.gif", "description" : "A browser window displaying a message 'pages works!' on the left and a developer console on the right showing Angular information." }, "target" : null } }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "With just a few lines of code, we can retrieve all the necessary information from our dotCMS instance 🚀" } ] }, { "type" : "horizontalRule" }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 2 }, "content" : [ { "type" : "text", "text" : "Rendering Our Page with @dotcms/angular" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "To render our page, we will use the " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Angular SDK library" }, { "type" : "text", "text" : " provided by dotCMS. This library allows us to render a page using the " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Page Asset" }, { "type" : "text", "text" : " along with a " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "component mapping system" }, { "type" : "text", "text" : " (which we will cover in more detail later)." } ] }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 3 }, "content" : [ { "type" : "text", "text" : "Step 1: Install the Library" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Before proceeding, we need to install the Angular library for dotCMS." } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "npm i @dotcms/angular" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Now we can use the component to render our page. This component requires the following inputs:" } ] }, { "type" : "bulletList", "content" : [ { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "pageAsset" }, { "type" : "text", "text" : ": The page object we receive from the " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "http://client.page", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : null } } ], "text" : "client.page" }, { "type" : "text", "text" : ".get() function. It represents our page." } ] } ] }, { "type" : "listItem", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "components" }, { "type" : "text", "text" : ": A key-value object where the key is the name of an element in our page, and the value is the component that will be rendered. This allows us to dynamically render different components based on each page element." } ] } ] } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "For now, we will pass an empty object to components." } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "/* pages.component.ts */\n\nimport { Component, inject, signal } from '@angular/core';\nimport { DotcmsLayoutComponent, DotCMSPageAsset, DotCMSPageComponent } from '@dotcms/angular';\nimport { DOTCMS_CLIENT_TOKEN } from '../app.config';\nimport { ActivatedRoute } from '@angular/router';\n\n@Component({\n selector: 'app-pages',\n imports: [DotcmsLayoutComponent],\n template: `\n @if (page(); as page) {\n

\n \n

\n }\n `,\n styles: ``\n})\nexport class PagesComponent {\n #dotcmsClient = inject(DOTCMS_CLIENT_TOKEN);\n #route = inject(ActivatedRoute);\n\n page = signal(null);\n\n components = signal({})\n\n ngOnInit() {\n this.#route.url.subscribe((urlSegments) => {\n const pathname = urlSegments.join('/');\n\n this.#fetchPageAsset(pathname);\n });\n }\n\n #fetchPageAsset(pathname: string) {\n this.#dotcmsClient.page.get({ path: pathname, language_id: 1 })\n .then((page) => {\n this.page.set(page as DotCMSPageAsset);\n })\n .catch((error) => {\n console.error(\"Error fetching page asset: \",error);\n });\n }\n}" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "With these changes, if we go to UVE and view our page, it will look like this:" } ] }, { "type" : "dotImage", "attrs" : { "textAlign" : "left", "src" : "/dA/d0526d39-56d4-4ca0-bb77-2a01e60b0660/asset/image6.png?language_id=1", "alt" : "image6.png", "title" : "image6.png", "href" : null, "data" : { "identifier" : "d0526d39-56d4-4ca0-bb77-2a01e60b0660", "languageId" : 1, "hostName" : "SYSTEM_HOST", "modDate" : "2025-02-27T21:30:25.440+00:00", "title" : "image6.png", "contentTypeIcon" : "image", "baseType" : "DotAsset", "inode" : "85a3dfc1-993d-48eb-acff-79144f66c91a", "archived" : false, "working" : true, "locked" : false, "stInode" : "4061db324fdce3993a494c856e76ab1e", "contentType" : "Images", "live" : true, "owner" : "user-6c291978-bb9b-4bab-9bd8-467e0ce4e27f", "hasLiveVersion" : true, "folder" : "SYSTEM_FOLDER", "sortOrder" : 0, "modUser" : "system", "asset" : "/data/shared/assets/8/5/85a3dfc1-993d-48eb-acff-79144f66c91a/asset/image6.png", "description" : "Screenshot of a content management system interface showing an empty container layout with a menu on the left and content tools on the right." }, "target" : null } }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "This is expected because our page doesn't have any content yet, just an empty container. To add content, we will insert a contentlet of type \"Banner.\" You can drag it from the Content Palette." } ] }, { "type" : "dotImage", "attrs" : { "textAlign" : "left", "src" : "/dA/68e404a203db91ee7062f2fb38bcbed2/asset/image2.gif?language_id=1", "alt" : "image2.gif", "title" : "image2.gif", "href" : null, "data" : { "identifier" : "68e404a203db91ee7062f2fb38bcbed2", "languageId" : 1, "hostName" : "SYSTEM_HOST", "modDate" : "2025-02-27T21:29:50.259+00:00", "title" : "image2.gif", "contentTypeIcon" : "image", "baseType" : "DotAsset", "inode" : "720f02ac-e887-4e5c-aed1-b69400e736c2", "archived" : false, "working" : true, "locked" : false, "stInode" : "4061db324fdce3993a494c856e76ab1e", "contentType" : "Images", "live" : true, "owner" : "user-6c291978-bb9b-4bab-9bd8-467e0ce4e27f", "hasLiveVersion" : true, "folder" : "SYSTEM_FOLDER", "sortOrder" : 0, "modUser" : "system", "asset" : "/data/shared/assets/7/2/720f02ac-e887-4e5c-aed1-b69400e736c2/asset/image2.gif", "description" : "Screenshot of a CMS page editor showing an empty container with various editing tools on the side." }, "target" : null } }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "At this point, our page will display this message: " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "\"No component for Banner.\"" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "This happens because the component is trying to render a component for the " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Banner" }, { "type" : "text", "text" : " element we added. However, since we haven’t provided one yet, it falls back to a default message." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Now, let’s specify which component should be rendered for the " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Banner" }, { "type" : "text", "text" : ". To do this, we will create a new component inside the content-types folder." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "We can generate this component using the Angular CLI." } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "ng generate component content-types/banner --inline-template=true --inline-style=true --skip-tests" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "And the content of this component will be:" } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "/* banner.component.ts */\nimport { Component, input, OnInit } from '@angular/core';\nimport { DotCMSContentlet } from '@dotcms/angular';\n\n@Component({\n selector: 'app-banner',\n imports: [],\n template: `\n

\n banner works!\n

\n `,\n styles: ``\n})\nexport class BannerComponent implements OnInit {\n contentlet = input.required();\n\n ngOnInit() {\n console.log(\"Banner Contentlet: \",this.contentlet());\n }\n}\n" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Now, we will go to " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "pages.component.ts" }, { "type" : "text", "text" : " and add our new component to the components map." } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "/* pages.component.ts */\n\nimport { Component, inject, signal } from '@angular/core';\nimport { DotcmsLayoutComponent, DotCMSPageAsset } from '@dotcms/angular';\nimport { DOTCMS_CLIENT_TOKEN } from '../app.config';\nimport { DotCMSPageComponent } from '@dotcms/angular';\nimport { ActivatedRoute } from '@angular/router';\n\n@Component({\n selector: 'app-pages',\n imports: [DotcmsLayoutComponent],\n template: `\n @if (page(); as page) {\n

\n \n

\n }\n `,\n styles: ``\n})\nexport class PagesComponent {\n #dotcmsClient = inject(DOTCMS_CLIENT_TOKEN);\n #route = inject(ActivatedRoute);\n\n page = signal(null);\n\n components = signal({\n Banner: import('../content-types/banner/banner.component').then(m => m.BannerComponent)\n })\n\n ngOnInit() {\n this.#route.url.subscribe((urlSegments) => {\n const pathname = urlSegments.join('/');\n\n this.#fetchPageAsset(pathname);\n });\n }\n\n #fetchPageAsset(pathname: string) {\n this.#dotcmsClient.page.get({ path: pathname, language_id: 1 })\n .then((page) => {\n this.page.set(page as DotCMSPageAsset);\n })\n .catch((error) => {\n console.error(\"Error fetching page asset: \",error);\n });\n }\n}" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "If we check the console inside " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "UVE" }, { "type" : "text", "text" : ", we will see something like this:" } ] }, { "type" : "dotImage", "attrs" : { "textAlign" : "left", "src" : "/dA/3ee59716-fe09-46a3-a418-e05b6a4c194c/asset/image7.png?language_id=1", "alt" : "image7.png", "title" : "image7.png", "href" : null, "data" : { "identifier" : "3ee59716-fe09-46a3-a418-e05b6a4c194c", "languageId" : 1, "hostName" : "SYSTEM_HOST", "modDate" : "2025-02-27T21:32:17.041+00:00", "title" : "image7.png", "contentTypeIcon" : "image", "baseType" : "DotAsset", "inode" : "f4a352d1-905e-4a41-b56c-127cc383920e", "archived" : false, "working" : true, "locked" : false, "stInode" : "4061db324fdce3993a494c856e76ab1e", "contentType" : "Images", "live" : true, "owner" : "user-6c291978-bb9b-4bab-9bd8-467e0ce4e27f", "hasLiveVersion" : true, "folder" : "SYSTEM_FOLDER", "sortOrder" : 0, "modUser" : "system", "asset" : "/data/shared/assets/f/4/f4a352d1-905e-4a41-b56c-127cc383920e/asset/image7.png", "description" : "A screenshot of a web-based content management system interface with a banner section selected, and the browser's developer tools open showing JSON data of the banner." }, "target" : null } }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Internally, the component passes the " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Banner" }, { "type" : "text", "text" : " data as an input to our component. Because of this, our component needs an input of type dotCMSContentlet." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "This input represents our " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Banner" }, { "type" : "text", "text" : ", and within our component, we can manipulate it however we like." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "For this example, we are using " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Tailwind CSS" }, { "type" : "text", "text" : " to render a simple banner." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Additionally, we parse the image included in the " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Banner" }, { "type" : "text", "text" : " to use it on our website. Since the " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "contentlet" }, { "type" : "text", "text" : " is a " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "signal" }, { "type" : "text", "text" : ", we can take advantage of it by using a " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "computed property" }, { "type" : "text", "text" : "." } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "/* banner.component.html */\n\nimport { Component, computed, input, OnInit } from '@angular/core';\nimport { DotCMSContentlet } from '@dotcms/angular';\nimport { environment } from '../../../environments/environment.development';\nimport { RouterLink } from '@angular/router';\n\n@Component({\n selector: 'app-banner',\n imports: [RouterLink],\n template: `\n\n @if (contentlet().image; as image) {\n \n }\n \n

\n {{ contentlet().title }}\n

\n \n {{ contentlet()['buttonText'] }}\n \n \n \n `,\n styles: ``\n})\nexport class BannerComponent {\n contentlet = input.required();\n\n imageURL = computed(() => {\n return environment.dotcmsURL + '/dA/' + this.contentlet().image;\n });\n}" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "And our page should look like this:" } ] }, { "type" : "dotImage", "attrs" : { "textAlign" : "left", "src" : "/dA/02de2fba-b44f-448e-a794-247a4861a6d7/asset/image8.png?language_id=1", "alt" : "image8.png", "title" : "image8.png", "href" : null, "data" : { "identifier" : "02de2fba-b44f-448e-a794-247a4861a6d7", "languageId" : 1, "hostName" : "SYSTEM_HOST", "modDate" : "2025-02-27T21:33:04.492+00:00", "title" : "image8.png", "contentTypeIcon" : "image", "baseType" : "DotAsset", "inode" : "436d8743-7b3e-4574-85f2-1103b166901a", "archived" : false, "working" : true, "locked" : false, "stInode" : "4061db324fdce3993a494c856e76ab1e", "contentType" : "Images", "live" : true, "owner" : "user-6c291978-bb9b-4bab-9bd8-467e0ce4e27f", "hasLiveVersion" : true, "folder" : "SYSTEM_FOLDER", "sortOrder" : 0, "modUser" : "system", "asset" : "/data/shared/assets/4/3/436d8743-7b3e-4574-85f2-1103b166901a/asset/image8.png", "description" : "A screenshot of a CMS interface showing a website design page with an image of a skier on a snowy mountain. The heading reads 'Featured Resort' with a button labeled 'Explore Colorado'." }, "target" : null } }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Our Angular application now renders our dotCMS page, Great 👏!" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "Let's move on to the final details." } ] }, { "type" : "horizontalRule" }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 2 }, "content" : [ { "type" : "text", "text" : "Adding Header & Footer" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "The dotCMS PageAsset includes a Layout property with two boolean attributes: header and footer." } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "/* PageAsset*/\n{\n\tcanCreateTemplate: booleanM\n\tcontainers: {},\n\tlayout: {\n\t ...\n\t footer: boolean,\n\t header: boolean,\n\t ...\t\n },\n\n}" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "These attributes can be either true or false, depending on the configuration of our dotCMS template. In our case, we want to create header and footer components and add them to the page if they are active in the template. That said, let's go ahead and create those components:" } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "ng generate component layout/header --inline-template=true --inline-style=true --skip-tests\n\n\nng generate component layout/footer --inline-template=true --inline-style=true --skip-tests" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Header" } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-header',\n template: `\n

\n My Angular Page with dotCMS\n

\n `,\n styles: ``\n})\nexport class HeaderComponent {}" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "Footer" } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-footer',\n template: `\n \n `, \n styles: ``\n})\nexport class FooterComponent { }" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "And now we can use both in our main component:" } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "/* pages.component.ts */\n\nimport { Component, inject, signal } from '@angular/core';\nimport { DotcmsLayoutComponent, DotCMSPageAsset } from '@dotcms/angular';\nimport { DOTCMS_CLIENT_TOKEN } from '../app.config';\nimport { DotCMSPageComponent } from '@dotcms/angular';\nimport { ActivatedRoute } from '@angular/router';\nimport { HeaderComponent } from \"../layout/header/header.component\";\nimport { FooterComponent } from \"../layout/footer/footer.component\";\n\n@Component({\n selector: 'app-pages',\n imports: [DotcmsLayoutComponent, HeaderComponent, FooterComponent],\n template: `\n @if (page(); as page) {\n

\n @if(page.layout.header) {\n \n } \n \n

\n \n

\n \n @if(page.layout.footer) {\n \n } \n

\n }\n `,\n styles: ``\n})\nexport class PagesComponent {\n #dotcmsClient = inject(DOTCMS_CLIENT_TOKEN);\n #route = inject(ActivatedRoute);\n\n page = signal(null);\n\n components = signal({\n Banner: import('../content-types/banner/banner.component').then(m => m.BannerComponent)\n })\n\n ngOnInit() {\n this.#route.url.subscribe((urlSegments) => {\n const pathname = urlSegments.join('/');\n\n this.#fetchPageAsset(pathname);\n });\n }\n\n #fetchPageAsset(pathname: string) {\n this.#dotcmsClient.page.get({ path: pathname, language_id: 1 })\n .then((page) => {\n console.log(\"Page Asset: \",page);\n this.page.set(page as DotCMSPageAsset);\n })\n .catch((error) => {\n console.error(\"Error fetching page asset: \",error);\n });\n }\n}" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "And now our page should look like this:" } ] }, { "type" : "dotImage", "attrs" : { "textAlign" : "left", "src" : "/dA/26d8f868-e6a4-4028-b0ec-3c476c332861/asset/image3.png?language_id=1", "alt" : "image3.png", "title" : "image3.png", "href" : null, "data" : { "identifier" : "26d8f868-e6a4-4028-b0ec-3c476c332861", "languageId" : 1, "hostName" : "SYSTEM_HOST", "modDate" : "2025-02-27T21:35:33.951+00:00", "title" : "image3.png", "contentTypeIcon" : "image", "baseType" : "DotAsset", "inode" : "ee0d0c0f-d1c6-47a4-b9d0-59de6f6ced43", "archived" : false, "working" : true, "locked" : false, "stInode" : "4061db324fdce3993a494c856e76ab1e", "contentType" : "Images", "live" : true, "owner" : "user-6c291978-bb9b-4bab-9bd8-467e0ce4e27f", "hasLiveVersion" : true, "folder" : "SYSTEM_FOLDER", "sortOrder" : 0, "modUser" : "system", "asset" : "/data/shared/assets/e/e/ee0d0c0f-d1c6-47a4-b9d0-59de6f6ced43/asset/image3.png", "description" : "Screenshot of dotCMS web page editor displaying a webpage with the title 'My Angular Page with dotCMS'. The page features a background image of a skier on a snowy mountain with text 'Featured Resort'. The website interface includes various editing tools and options." }, "target" : null } }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "We now have our page rendering the Header, Footer, and our contentlets. Let's add a few final touches. 😎" } ] }, { "type" : "horizontalRule" }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 2 }, "content" : [ { "type" : "text", "text" : "Let’s make the page fully editable in dotCMS" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "At this point, we can render our page in our Angular application. The next step is to make it fully editable." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "We will add an extra function to our app component." } ] }, { "type" : "codeBlock", "attrs" : { "language" : null }, "content" : [ { "type" : "text", "text" : "/* pages.component.ts */\n\nimport { Component, inject, signal } from '@angular/core';\nimport { DotcmsLayoutComponent, DotCMSPageAsset, DotCMSPageComponent } from '@dotcms/angular';\nimport { DOTCMS_CLIENT_TOKEN } from '../app.config';\nimport { ActivatedRoute } from '@angular/router';\nimport { HeaderComponent } from \"../layout/header/header.component\";\nimport { FooterComponent } from \"../layout/footer/footer.component\";\nimport { isInsideEditor } from '@dotcms/client';\n\n@Component({\n selector: 'app-pages',\n imports: [DotcmsLayoutComponent, HeaderComponent, FooterComponent],\n template: `\n @if (page(); as page) {\n

\n @if(page.layout.header) {\n \n } \n \n

\n \n

\n \n @if(page.layout.footer) {\n \n } \n

\n }\n `,\n styles: ``\n})\nexport class PagesComponent {\n #dotcmsClient = inject(DOTCMS_CLIENT_TOKEN);\n #route = inject(ActivatedRoute);\n\n page = signal(null);\n\n components = signal({\n Banner: import('../content-types/banner/banner.component').then(m => m.BannerComponent)\n })\n\n ngOnInit() {\n if (isInsideEditor()) {\n this.#listenToEditorChanges();\n }\n \n this.#route.url.subscribe((urlSegments) => {\n const pathname = urlSegments.join('/');\n\n this.#fetchPageAsset(pathname);\n });\n }\n\n #fetchPageAsset(pathname: string) {\n this.#dotcmsClient.page.get({ path: pathname, language_id: 1 })\n .then((page) => {\n console.log(\"Page Asset: \",page);\n this.page.set(page as DotCMSPageAsset);\n })\n .catch((error) => {\n console.error(\"Error fetching page asset: \",error);\n });\n }\n\n #listenToEditorChanges() {\n this.#dotcmsClient.editor.on('changes', (page) => {\n if (!page) {\n return;\n }\n\n this.page.set(page as DotCMSPageAsset);\n });\n }\n}" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "We’ve added the " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "listenToEditorChanges" }, { "type" : "text", "text" : " function, which will handle updating the page asset every time the editor makes changes. To achieve this, we use the changes event from the Universal Visual Editor. This event emits every change made to the page content. Additionally, we use the " }, { "type" : "text", "marks" : [ { "type" : "bold" } ], "text" : "isInsideEditor" }, { "type" : "text", "text" : " function to check if we’re in the UVE context." } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "And that’s it 🎉! We’ve connected our Angular application with dotCMS and made it fully editable." } ] }, { "type" : "horizontalRule" }, { "type" : "heading", "attrs" : { "textAlign" : "left", "level" : 2 }, "content" : [ { "type" : "text", "text" : "Conclusion and Next Steps" } ] }, { "type" : "paragraph", "attrs" : { "textAlign" : "left" }, "content" : [ { "type" : "text", "text" : "In this tutorial, we’ve successfully connected a React app to dotCMS, fetched page assets, rendered dynamic content, and made it editable 🥳 🚀. For the next steps, consider exploring " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://dev.dotcms.com/docs/content-types", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : null } }, { "type" : "underline" } ], "text" : "dotCMS Content Types" }, { "type" : "text", "text" : " or the " }, { "type" : "text", "marks" : [ { "type" : "link", "attrs" : { "href" : "https://dev.dotcms.com/docs/page-rest-api-layout-as-a-service-laas", "target" : "_blank", "rel" : "noopener noreferrer nofollow", "class" : null } }, { "type" : "underline" } ], "text" : "Page API" }, { "type" : "text", "text" : " to suit your app's needs." } ] } ] }

Join Over 10,000 Subscribers

Oops!