How to fetch data from custom component created @hybris side in Spartacus

Question

I created custom component "CustomPromotionComponent" by extending "SimpleCMSComponent" @hybris side. It got rendered on spartacus site.

0: {slotId: "Section2A-Promotion",…}
components: {component: [{uid: "CustomPromotionComponent",…}]}
component: [{uid: "CustomPromotionComponent",…}]
0: {uid: "CustomPromotionComponent",…}
container: "false"
modifiedtime: "2020-07-25T17:58:35.279+05:30"
name: "Custom Promotion Component"
typeCode: "CustomPromotionComponent"
uid: "CustomPromotionComponent"
uuid: "eyJpdGVtSWQiOiJDdXN0b21Qcm9tb3Rpb25Db21wb25lbnQiLCJjYXRhbG9nSWQiOiJlbGVjdHJvbmljcy1zcGFDb250ZW50Q2F0YWxvZyIsImNhdGFsb2dWZXJzaW9uIjoiT25saW5lIn0="

as shown above.

How can I retrieve this data from angular? I created same component @angular side too but it doesn't work. i have added my component in .ts file as shown along with this i added my component in custom-page.module.ts also.

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { CmsComponentData } from '@spartacus/storefront';
import { CmsService} from '@spartacus/core';
import { CMSCustomPromotionComponent } from '../cms.custom-promotion-component';


@Component({
  selector: 'app-custom-promotion',
  templateUrl: './custom-promotion.component.html',
  styleUrls: ['./custom-promotion.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CustomPromotionComponent implements OnInit {

  componentData$: Observable<CMSCustomPromotionComponent> = this.componentData.data$;

  constructor( protected componentData: CmsComponentData<CMSCustomPromotionComponent>, 
    protected cmsService: CmsService) {}

  ngOnInit(): void {
    console.log(this.componentData$);
  }

}

html part:

<p *ngIf="(componentData$ | async) as data" [innerHTML]="data.name"></p>

ConfigModule.withConfig({
      cmsComponents: {
        CustomPromotionComponent: {
          component: CustomPromotionComponent,
        }
      },
    } as CmsConfig)

created cmscustomcomponent by extending cmscomponent.

import { CmsComponent } from '@spartacus/core';

export interface CMSCustomPromotionComponent extends CmsComponent {
    container?: string;
}

While rendering on storefront i am getting below error:

core.js:6228 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[CustomPromotionComponent -> CmsComponentData]: 
  StaticInjectorError(Platform: core)[CustomPromotionComponent -> CmsComponentData]: 
    NullInjectorError: No provider for CmsComponentData!
NullInjectorError: StaticInjectorError(AppModule)[CustomPromotionComponent -> CmsComponentData]: 
  StaticInjectorError(Platform: core)[CustomPromotionComponent -> CmsComponentData]: 
    NullInjectorError: No provider for CmsComponentData!

Cayacdev Cayacdev · Accepted Answer · 2020-08-12T07:34:46

You can use https://github.com/SAP/spartacus/blob/develop/projects/storefrontlib/src/cms-components/content/paragraph/ as a reference.

This is the interesting part:

constructor(public component: CmsComponentData<CmsParagraphComponent>) {}

How to fetch data from custom component created @hybris side in Spartacus

2 Answers