AngularAccelerator

A sap-commerce storefront using angular

This is a collection of core directives, filters and services

How to

• Services:

  • AuthGuard: CanActivate if oauth status is authorized
  • BrowserRef: Window object wrapper with SSR functionality
  • SiteGuard: CanActivate if BaseSite is found and processed
  • LocaleService: Root service. Will handle all site and locales
  • LocaleServiceInterceptor: Will add lang and curr query params to api request. See below
  • NavigatorService: Router navigate wrapper. Will handle navigation respecting base site url patterns
  • SmartEditService: Applies smartedit feedback to render changes

• Directives:

  • scrollTop on click scroll to top
  • srcLazy will lazy load images/videos/iframes eg. <img [srcLazy]="image.png">
  • ifTheme similar to ngIf, will test for provided theme and render eg. <div *ifTheme="'alpha'">Hello World</div>
  • ifSite similar to ngIf, will test for provided site and render if true eg. <div *ifSite="'electronics'">Hello World</div>
  • intoView: will emit boolean event if element is into view. Uses IntersectionObserver

• Filters:

  • site, theme : will add current siteId / theme to the class name like hompage | className will result in homepage site-electronics if on electronics site
  • fileSize : friendly file size
  • sanitizeHtml , sanitizeStyle and sanitizeUrl utils
  • stripHtml, stripTimeString, truncateNumber and truncateText as text utils
  • thumbnail, image: get thumbnail / primary image from media object
  • host : append host config parameter if resource is on different domain
  • routerPath, routerQuery and routerFragment: utils in dealing with site routing. Use these instead of [router]='/somewhere'
  • map: Map pipe. eg. [values]="sorts | map:'code'"

• Validators:

  • ccNumber, ccCSC, ccMonth, ccYear, phone, password. Include YValidators to use them. YValidators extends Validators

• To use Animations, in your component add them like this:

animations: [Animations.expand({value: 1})]

• Form elements:

  • input-file : file upload input

    <input-file class="row g-0" (filesChange)="saveFile($event)">
      <ng-template #label>
        <div class="btn btn-secondary choose-file-button">
          Select file
        </div>
      </ng-template>
      <ng-template #suffix>
        <span class="p-1">{{file?.name}}</span>
      </ng-template>
    </input-file>

  • input-select : select input

     <input-select formControlName="pageSize"
                   [placeholder]="pagination.pageSize"
                   [values]="pageSizes"
                   [optionNames]="pageSizes">
     </input-select>

  • input-switch : toogle switch checkbox input

    <input-switch [(ngModel)]="consent"></input-switch>

• LocaleService Interceptor needs to be installed in AppModule

providers: [
  {
    provide: HTTP_INTERCEPTORS,
    multi: true,
    useClass: LocaleInterceptor
  }
]

• Use of SiteGuard

const routes: Routes = [
  {
    path: '',
    canActivate: [SiteGuard],
    children: [
      {
        path: '',
        loadChildren: () => import('./modules/layout/layout.module').then(m => m.LayoutModule)
      },
      {
        path: '**',
        redirectTo: 'error'
      }
    ]
  }
];

Installing

npm install @ngx-y/ycore

Build

ng build ycore --prod

App Requirements

• @ngx-y/yapi is required for api services support

Licensing

GPLv2

© DialogData 2021