Question about internationalization and theme manager

[JordanGS]

Three questions,

1. I noticed that the project has an internationalization folder with US in it, does this project support internationalization out of the box or how would i go about implementing that?

2. I love the UI, the elements but i really want to change the color scheme, especially i want to have a several different themes available for the user, how would i go about this?

3. I see .col-xl- in the demo but i see col-xlg being used in the scss files, which one is correct? Any guidance would be appreciated. Thank you.

[m0uj]

Hi

1- The ng2-admin is using ngx-translate for i18 internationalization, u can take a look on the file app/app.translation.module.ts, you can find it imported in the app/pages/pages.module.ts so that we can use the translate pipe in the web pages {{'address.street' | translate}} !

2- To change or customize the color scheme or theme you can follow the guides in the docs https://akveo.github.io/ng2-admin/articles/011-changing-color-scheme/ https://akveo.github.io/ng2-admin/articles/014-switch-to-blur-theme/

3- For Large Devices Desktops we use .col-lg- (≥992px) and .col-xl- (≥1200px) you can familiarize yourself with the Grid System under the menu UI features in the demo http://akveo.com/ng2-admin/#/pages/ui/grid

[rakesh1988]

@m0uj i am a newbie to angular.. I am trying to translate sentence in .ts file this.toastr.error('Invalid Username or Password', 'Error');

In this case, should i create a new translation service and inject it to my component? if not, how can i use the app.translation.module.ts and translate?

[m0uj]

You should have only one Translate instance per App, so create a shared module that imports and exports the TranslateModule;

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core';
import { NgaModule } from '../../theme/nga.module';

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    TranslateModule,
    NgaModule,
  ],
  exports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    TranslateModule,
    NgaModule,
  ],
})
export class SharedModule {
}

The initialisation of the translation service is under the app.translation.module.ts.

All you have to do is import the AppTranslationModule in the app.module.ts, import the shared module in your app's modules and use the translation service under your components by injecting it.