@wizishop/angular-components

Wizi Angular Components Module

1 - Dependencies

• Run npm i @wizishop/angular-components.

• Then install all the lib dependencies & peerDenpendencies. You can find the list, in the package.json file in node_modules/@wizishop/angular-components.

Run npm i nameOfTheDependency.

2 - Module & Translation system

In app.module.ts file :

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

import { WiziComponentsModule } from 'angular-components';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/angular-components/i18n/', '.json');
}


@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    ...
    HttpClientModule,
    TranslateModule.forRoot({
      defaultLanguage: 'fr',
      loader: {
          provide: TranslateLoader,
          useFactory: (HttpLoaderFactory),
          deps: [HttpClient]
      }
    }),
    WiziComponentsModule
  ]
  ...
})

If you already use ngx-translate, maybe you should use @ngx-translate/multi-http-loader in order to load multiple translation source file.

3 - Integration / Assets & Styles

• In angular.json file add a link to the module assets and a link to calendar script :

assets": [
              ...
              {
                "glob": "**/*",
                "input": "node_modules/@wizishop/angular-components/assets/",
                "output": "./assets/angular-components/"
              }
            ],
...
"scripts": [
              "node_modules/bulma-calendar/dist/js/bulma-calendar.js"
            ]

• Add <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous" /> in your index.html file.

• Copy/paste the following folder in your app project.

Github link with all scss files to import

• Make the import of the import.scss file in your main scss file :

@import '@wizishop/angular-components/angular-components';

4 - Use components from this module !

All the components of this module starts with wac- prefix like <wac-button>.