Search code examples
angularsap-commerce-cloudspartacus-storefront

Spartacus - Retrieving data from custom CMS component


In SAP Commerce I prepared custom CMS component. I put it in right slot. Spartacus receive information about it - I can see that this component is in the right place on the page. But how can I retrieve some data from this component. In response in given slot it looks like:

 "components": {
                "component": [
                    {
                        "uid": "NewsletterComponent",
                        "uuid": "eyJpdGVtSWQiOiJOZXdzbGV0dGVyQ29tcG9uZW50IiwiY2F0YWxvZ0lkIjoiZWxlY3Ryb25pY3Mtc3BhQ29udGVudENhdGFsb2ciLCJjYXRhbG9nVmVyc2lvbiI6Ik9ubGluZSJ9",
                        "typeCode": "NewsletterComponent",
                        "modifiedTime": "2020-04-02T21:57:10.236+02:00",
                        "name": "Newsletter Component",
                        "container": "false",
                        "mailPlaceholder": "Your email address",
                        "mailHeaderText": "E-mail Newsletter"
                    }

How can I retrieve this data from angular? I create some component but it doesn't work

import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
import { CmsComponentData } from '@spartacus/storefront';
import { CmsComponent, CmsService } from '@spartacus/core'
import { Observable } from 'rxjs';

@Component({
  selector: 'app-newsletter',
  templateUrl: './newsletter.component.html',
  styleUrls: ['./newsletter.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NewsletterComponent extends CmsComponentData<CmsComponent> {

  component: Observable<any>;

  constructor(cmsService: CmsService) {
    super();
    this.component = cmsService.getComponentData('NewsletterComponent')
  }


  public getText(): any {
     console.log(this.component)
  }
}

I register it in module

B2cStorefrontModule.withConfig({
      cmsComponents: {
        NewsletterComponent: {
          component: NewsletterComponent
        }
      },

Can I retrieve mailPlaceholder and mailHeader text from server response?


Solution

  • Your component needs to accept component data in the constructor, see for example: https://sap.github.io/spartacus/components/ParagraphComponent.html#source