## AngularAccelerator

A sap-commerce storefront using angular

Provides support working with CMS 

Includes a collection of default cms components like:

* **cms-banner** (SimpleResponsiveBannerComponent)
* **cms-flex** (CMSFlexComponent)
* **cms-image** (SimpleBannerComponent)
* **cms-include** (JspIncludeComponent)
* **cms-link** (CMSLinkComponent)
* **cms-navigation** (NavigationComponent)
* **cms-paragraph** (CMSParagraphComponent, CMSTabParagraphComponent)
* **cms-product-carousel** (ProductCarouselComponent)
* **cms-tab-container** (CMSTabParagraphContainer)

### How to

```angular2html
<cms-page class="home-page" [query]="cmsPageQuery"></cms-page>
```

where 

```typescript
cmsPageQuery: CmsPageQuery = {
    pageType: PageType.CONTENT,
    id: 'homepage'
  };
```

a template component must be provided which matches the template name in the response, in this case `LandingPage2Template`

```typescript
@CmsTemplate('LandingPage2Template')
@Component({
  selector: 'landing-page-2-template',
  templateUrl: 'landing-page-2.template.html'
})
export class LandingPage2TemplateComponent extends AbstractCmsTemplate {
}
```

with

```angular2html
<cms-slot [position]="'Section1'" [cms]="page"></cms-slot>
<div class="row g-0">
  <div class="col-12 col-md-6">
    <cms-slot class="row g-0" [position]="'Section2A'" [cms]="page">
      <ng-template #componentTemplate let-cms="cms">
        <div class="col-12 col-md-6">
          <cms-component [cms]="cms"></cms-component>
        </div>
      </ng-template>
    </cms-slot>
  </div>
  <div class="col-12 col-md-6">
    <cms-slot class="row g-0" [position]="'Section2B'" [cms]="page">
      <ng-template #componentTemplate let-cms="cms">
        <div class="col-12 col-md-6">
          <cms-component [cms]="cms"></cms-component>
        </div>
      </ng-template>
    </cms-slot>
  </div>
  <div class="col-12">
    <cms-slot [position]="'Section2C'" [cms]="page"></cms-slot>
  </div>
</div>
<cms-slot [position]="'Section3'" [cms]="page"></cms-slot>
<cms-slot class="row g-0" [position]="'Section4'" [cms]="page">
  <ng-template #componentTemplate let-cms="cms">
    <div class="col-6 col-md-3">
      <cms-component [cms]="cms"></cms-component>
    </div>
  </ng-template>
</cms-slot>
<cms-slot [position]="'Section5'" [cms]="page"></cms-slot>
```

## Installing
```
npm install @ngx-y/ngx-ycms
```

## Build
```
ng build ngx-ycms --prod
```

## App Requirements
* `@ngx-y/ngx-ycore`

#### Licensing
[GPLv2](LICENSE)

[© DialogData 2021](https://www.dialogdata.de/)