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

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

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.