LIGAZAKON HEADER ANGULAR LIBRARY

Installing

### 1. Install it

npm i lz-header-lib-


### 2. Prepare your angular.json

Exmaple:
``
"lzDeveloperClient": {
...
"architect": {
"build": {
"builder": ... ,
"options": {
"outputPath": ... ,
"index": ... ,
"main": ... ,
"polyfills": ... ,
"tsConfig": ... ,
"assets": [
... ,
{
"glob": "*/",
"input": "node_modules/lz-header-lib/assets",
"output": "dist/ng2/src/assets/lz-header-assets/" // Папка "lz-header-assets" должна находиться по точно такому же пути в вашем проекте т.к. там хранятся шрифты и less который их подключает, можно шрифты можно подключить самому.
}
...
],
"styles": [
...
"node_modules/lz-header-lib/assets/less/reset.less",
"node_modules/lz-header-lib/assets/less/fonts.less",
"node_modules/font-awesome/css/font-awesome.css" // Шапка использует font-awesome-4.7
],
"scripts": [ // Шапка использует набор js библиотек
"node_modules/jquery/dist/jquery.min.js",
"lib/sockjs/sockjs.min.js",
"lib/stomp-websocket/lib/stomp.min.js",
"lib/platform/platform.js",
"lib/fingerprint/fingerprint.js"
]
}
}
}
...
}
`

### 3. Prepare your app.module.ts

Exmaple:
`
import { NgModule } from '@angular/core';

...

import { PLTHeaderModule, LzProductConfig, LzLanguageService } from 'lz-header-lib';

export function createTranslateLoader(http: HttpClient) {
// your path to translate sources *смотреть п.4
return new TranslateHttpLoader(http, './i18n/', '.json');
}

...

imports: [
...
PLTHeaderModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
...
]

...

export class AppModule {
constructor(private lzProductConfig: LzProductConfig, private lzLanguageService: LzLanguageService, private translateService: TranslateService) {
this.lzProductConfig.setProductSettings({
'ips_location': '/ips', // Ссылка на ИПС
'ipas_location': '/ipas', // Ссылка на ПЛАТФОРМУ
'order_code': 'lz_developer_client', // Алиас продукта, который подключает шапку
'product_name': 'lzDeveloperClient', // Имя продукта, который подключает шапку
'product_version': '1.0', // Версия клиента, который подключает шапку
'api_path': 'dev', // Сервер, через который будут ходить ресты шапки: dev/test/prod, параметр не обязательный, если ну указать, то dev, test и prod будут вычислятся из урла по хосту, если определить не получится, запросы будут ходить на prod
'check_user_session': true, // Нужно ли проверять сессию пользователя каждую минуту,
// в случае выбитой сессии всплывает модалка с авторизацией
});
this.translateService.use(this.lzLanguageService.identifyLanguage());
}
}
`

### 4. Add header component to your app.component.html

Example:
`


`

### 5. Translations

translations and TranslateModule

lz-header-lib have buttons to change project language. It's using 'LzLanguageService' from lz-header-lib.
current language is saving in local storage (it can be 'ru' or 'ua' values). By default 'ua' language.

After language change it triggers page reloading.

You can use 'identifyLanguage' method from 'LzLanguageService' to get current language and apply it to your project.

You shoud merge yours i18n .jsons with lz-header-lib translations via grunt, gulp, webpack etc. and import it into yours app.module.ts

Example:

`
Grunt task for merging

grunt.initConfig({
"merge-json": {
"ru": {
src: [
"src/**/ru.json",
"lz-shared/**/ru.json",
"node_modules/lz-header-lib/assets/i18n/ru.json"
],
dest: "dist/i18n/ru.json"
},
"ua": {
src: [
"src/**/ua.json",
"lz-shared/**/ua.json",
"node_modules/lz-header-lib/assets/i18n/ua.json"
],
dest: "dist/i18n/ua.json"
}
}
})

app.module.ts

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

import { LzLanguageService } from 'lz-header-lib';

export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, '/dist/i18n/', '.json');
}

@NgModule({
imports: [
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})
]
})

export class AppModule {
constructor(private langService: LzLanguageService, private translate: TranslateService) {
translate.use(language.identifyLanguage());
}
}
``

### 5. Вызов формы заказа на тест

import { 'LzPurchaseService' } from 'lz-header-lib';
....
constructor(private purchaseService: LzPurchaseService) { }
...
public showTestForm = () => {
this.purchaseService.doPurchaseNew(alias?: string, isTrial?: boolean, disableSlider?: boolean, customData?: any);
}

// alias - не обязательный параметр. Алиас продукта, который берём на тест, если не передать - будет 'platforma'
// isTrial - не обязательный древний параметр, никто не помнить за что от отвечает, если не передать - будет false
// disableSlider - не обязательный параметр. Значение true отключает левый слайдер на форме, если не передать - будет false
// customData - не обязательный параметр. Особенность реализации, ни на что не влияет