# 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](https://www.npmjs.com/package/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](https://gitlab.wizishop.com/wizi/angular-components/-/tree/master/projects/showcase/src/scss/includes)

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