Dynamic component rendering in analog.JS with contentful

Analog.JS - the fullstack meta-framework for Angular.

Contentful - a cloud-based headless Content Management System (CMS) that allows to manage and deliver content to various digital platforms.

The Analog.JS app created, can dynamically specify what components to render based on data from Contentful. The web page's structure is dynamically defined based on component data from Contentful and it's rendered at runtime. This gives ability for content authors to pick components and change the layout of a page without dev support.

Create Content Model in Contentful

Create content types for all the dynamic components in Contentful and fetch them to the front-end using Contentful delivery API. This is the diagram of the content model.

Define and configure the components in FE

Components that are dynamically loaded need to be predefined and configured in FE. contentful.service.ts handles the data from Contentful,and then its imported to the server.ts file, so data is fetched from server before loading the page. And then map the content models defined in Contentful to components in FE

const _dynamicComponentMap: 
    ComponentMap = {
        mainHero: {
            loadComponent: () => 
                MainHeroComponent,
        },
        header: {
            loadComponent: () => 
                HeaderComponent,
        },
        footer: {
            loadComponent: () => 
                FooterComponent,
        },
};

Build components in FE to display the content

Finally build the components to display the content fom CMS.

Source code

https://github.com/AngelMathew/analogContentfulDynamic.git