@wizishop/angular-components
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.59 • Public • Published

    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>.

    Keywords

    none

    Install

    npm i @wizishop/angular-components

    DownloadsWeekly Downloads

    295

    Version

    0.0.59

    License

    none

    Unpacked Size

    2.17 MB

    Total Files

    188

    Last publish

    Collaborators

    • jumbay
    • anakior
    • marvinrmx
    • brianwizi
    • paulinewizi
    • romainwizi
    • sheeneria