How to change date format and currency based on chosen language in JHipster

I declared two languages in my JHipster app: en and pl.

In AngularJS version, switching language in navbar menu, changing date format and currency.

In Angular 5 version, there is only one english version, currency is $.

To have it like in AngularJS, new custom pipes are necessarily.

For date format:

In src/main/webapp/app/shared/language create localizedDatepipe.ts:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

import {DatePipe} from '@angular/common'; import {Pipe, PipeTransform} from '@angular/core'; import {JhiLanguageService} from 'ng-jhipster'; import {registerLocaleData} from '@angular/common'; import localePl from '@angular/common/locales/pl'; @Pipe({ name: 'localizedDate' }) export class LocalizedDatePipe implements PipeTransform { lang = 'en'; constructor( private languageService: JhiLanguageService) { this.getlang(); } getlang() { this.languageService.getCurrent().then(function(langKeyValue) { registerLocaleData(localePl, 'pl'); switch (langKeyValue) { case 'en': { this.lang = 'en'; break; } case 'pl': { this.lang = 'pl'; break; } } }.bind(this)); } transform(value: any, pattern = 'mediumDate'): any { const datePipe: DatePipe = new DatePipe(this.lang); return datePipe.transform(value, pattern); } }

Import it in src/main/webapp/app/shared/shared-common.module.ts:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import { LocalizedDatePipe } from './language/localizedDate.pipe'; . . . @NgModule({ declarations: [ . . . LocalizedDatePipe ], providers: [ . . . ], exports: [ . . LocalizedDatePipe

Then in entity.component.html use pipe:

<td>{{testE.entDate | localizedDate:'medium'}}</td>

---------------------------------

For currency format:

In src/main/webapp/app/shared/language create localizedCurrency.ts:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

import { CurrencyPipe } from '@angular/common' import {Pipe, PipeTransform} from '@angular/core'; import {JhiLanguageService} from 'ng-jhipster'; import {registerLocaleData} from '@angular/common'; import localePl from '@angular/common/locales/pl'; @Pipe({ name: 'localizedCurrency' }) export class LocalizedCurrencyPipe implements PipeTransform { lang = 'en'; currency = '$'; constructor( private languageService: JhiLanguageService) { this.getlang(); } getlang() { this.languageService.getCurrent().then(function(langKeyValue) { registerLocaleData(localePl, 'pl'); switch (langKeyValue) { case 'en': { this.lang = 'en'; this.currency = '$'; break; } case 'pl': { this.lang = 'pl'; this.currency = 'zł'; break; } } }.bind(this)); } transform(value: any): any { const currencyPipe: CurrencyPipe = new CurrencyPipe(this.lang); return currencyPipe.transform(value, this.currency); } }

And import it in src/main/webapp/app/shared/shared-common.module.ts as above for 'localizedDate'.

In html component use pipe like this:

<td>{{testE.price | localizedCurrency}}</td>

How to show different content based on URL in JHipster 4

How to show different content based on URL in JHipster 4

I have category-dialog.component.html and category-dialog.component.ts.

In category.component.html, there is a list of categories with buttons Add subcategory and Edit. Both refer to category-dialog.component.

Add subcategory:

[routerLink]="['/', { outlets: { popup: 'barfitter-category/'+ category.id + '/newsub'} }]"

Edit:

[routerLink]="['/', { outlets: { popup: 'barfitter-category/'+ category.id + '/edit'} }]"

I needed different content in each.

In category-dialog.component.ts added:

On top:

import {Router} from '@angular/router';

On top of class:

location = '' ;

Constructor:

    constructor(
        public activeModal: NgbActiveModal,
        private jhiAlertService: JhiAlertService,
        private categoryService: CategoryService,
        private eventManager: JhiEventManager,
      
        private  _router : Router
    ) {
      this.location = _router.url;
    }

Then in category-dialog.component.html added:

<div *ngIf="_router.url.includes('newsub')">Show me something</div>

How to create new ROLE in JHipster 4

Let’s assume you want to add new role ROLE_MANAGER.

1. In /src/main/resources/config/liquibase/authorities.csv

add ROLE_MANAGER in new line.

In src/main/java/.../security/AuthoritiesConstants.java add:

public static final String MANAGER = "ROLE_MANAGER";

4. In table jhi_authority

add ROLE_MANAGER

5. In console run:

./mvnw liquibase:clearCheckSums
- you should have:

• your database username and password provided in org.liquibase plugin configuration in pom.xml 
• DATABASECHANGELOGLOCK set to 0 in your database