Angular SDK: 👷🏽‍♂️ Render dotCMS pages using @dotcms/client

[fmontes]

Parent

#28404

Task description

As a developer, I need to create an Angular example project that demonstrates how to render dotCMS pages using the page API. This example should showcase how to fetch content from dotCMS and display it on a web page using Angular components.

Acceptance Criteria

• Use @angular/cli and the latest stable Angular version
• The example should be located in core/examples/angular
• Use a catch-all strategy for the routes
• Render a dotCMS page using the @angular/client
• Use Tailwind for the styles (don’t use the same colors as Next.js example)
• Use raw css for the layout
• Use ngComponentOutlet to render the components for each content type
• Use InjectionTokens to pass the @dotcms/client to the "content types" components
• Document the steps by step process of creating this example

Assumptions & Initiation Needs

• This example is to be consumed by our customers' developers, keep it as clear and simple as possible
• Future forward a lot of this code will end up in the @dotcms/angular library we have to create, for example:
  • The DotcmsLayout component
  • All the layout related components like Row, Columns etc.
• The @dotcms/angular library will have a service that acts as a React.Context to allow a nested component to access the current page response
• We might want to create another example for Angular SSR

Quality Assurance Notes & Workarounds

N/A

[zJaaal]

IQA Passed

We can run the angular project in the browser and in the Visual Editor

Screenshot

Screen.Recording.2024-05-16.at.5.26.57.PM-1.mov