Viber-landing-pages-template NPM

ViberLandingPagesTemplate

How to use this package

installation:

npm install @viberlab/ngx-viber --save

Should be added to the AppModule:

VbrLayoutModule - For template usage with the vbr-header component.
VbrModule - empty
VbrTranslateModule - For vbr-languages-switch and vbr-footer components.

components sass

In your styles.scss add next line after material design include:

@import '~@viberlab/ngx-viber/vbr.styles';

images and jsons

in your .angular-cli.json alter apps.assets array with:

        {
          "glob": "**/*",
          "input": "../node_modules/@viberlab/ngx-viber/assets",
          "output": "./assets/@viberlab/"
        }

it will make translation and images available under ./assets/@viberlab/ url

Languages and Translations

Additions in TranslateModule

When including in root module make sure to call VbrTranslateModule.forRoot(config: VbrModuleConfig) and to export it Following functional is supported:

 TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (languageDetector), // Functions that returns LanguageDetector class that implements the VbrLanguageDetector class
        deps: [HttpClient]
      }
    }),
    VbrTranslateModule.forRoot({
      allowedLanguages: ['ar', 'bg', 'de', 'el', 'en', 'es', 'fr-FR', 'hr', 'hu',
        'it', 'ja', 'pt-BR', 'ru', 'sr', 'uk', 'vi', 'zh-CN', 'zh-TW'] // Use to set the list of languages that are allowed,
      defaultLanguage: 'en', // Use to set the default language the default is English 
      languageDetector: {
        provide: VBR_CUSTOM_LANGUAGE_DETECTOR,
        useFactory: (languageDetector),
        deps: [ActivatedRoute]
      }
    })

Create function that will return VbrTranslateLoader (TranslateLoader)

export function createTranslateLoader(http: HttpClient) {
  return new VbrTranslateLoader(
    [
      new VbrTranslateBaseLoader(http), // Use default translate loader, to load translation for the footer and header components
      new TranslateHttpLoader(http, './assets/translations/content-', '.json') // Custom Loader, in this case from @ngx-translate/http-loader
    ]
  );
}

Create another function for the languageDetector service, that will detect the language using the url params

The function:

export function languageDetector(route: ActivatedRoute): VbrLanguageDetector {
  return new LanguageDetector(route);
}

The service:

import { Observable } from 'rxjs/Observable';
import { VbrLanguageDetector } from '@viberlab/ngx-viber/translate';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { ActivatedRoute } from '@angular/router';

export class LanguageDetector implements VbrLanguageDetector {

  private language$: BehaviorSubject<string> = new BehaviorSubject(undefined);

  constructor(private route: ActivatedRoute) {
    this.route.queryParamMap
      .filter(params => !!params)
      .switchMap(params => {
        // Language been found from parameters
        if (!!params.get('lang')) {
          return Observable.of(params.get('lang'));
        }
        return Observable.of(null);
      }).subscribe(this.language$);
  }

  getLanguage(): Observable<string> {
    return this.language$.filter(language => undefined !== language);
  }
}

In example above, translations from both loaders will be merged and used for translations

All other interaction with Languages and translations should be done via VbrTanslateService

Page structure and directives

<vbr-page>
  <vbr-header><vbr-languages-switch></vbr-languages-switch></vbr-header>
  <vbr-content>
    <app-content></app-content> // Your application content
  </vbr-content>
  <vbr-footer></vbr-footer>
</vbr-page>

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.