未加星标

JHipster, Angular, PrimeNG and AutoComplete

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

JHipster, Angular, PrimeNG and AutoComplete

JHipster is a great way to bootstrap your application. Your app can be a monolith or be split into several microservices, use JWT or OAuth2, packaged with Docker, deployed on a cloud provider… JHipster is there to handle the heavy technical complexity. Great ! But… when it comes to choosing an item from a combobox, JHipster is not that great.

In this post I will show you how to improve the generated JHipster Angular code so you can have an (optimized) auto-completion instead of just a plain combo-box using PrimeNG .

Use Case

Let’s take a simple use-case: a contact (a person who can be contacted within an organisation) has one preferred language of communication. For example “ Paul prefers to speak English ” and “ Paulo prefers to speak Portuguese “. Thanks to JDL Studio we can have a visual representation of such business model:


JHipster, Angular, PrimeNG and AutoComplete

For those of you who know JHipster and its JDL language, here is the JDL syntax of such relationship:

entity Contact {
firstName String required,
lastName String required,
email String
}
entity Language {
alpha3b String required maxlength(3),
alpha2 String required maxlength(2)
name String required,
flag32 String,
flag128 String,
activated Boolean
}
relationship ManyToOne {
Contact{language(name) required} to Language
}

If you think of the user interface to handle such requirement, you can see that when creating a contact, you need to select a language from a combobox. And that’s exactly the topic of this blog post.

Bare JHipster Generated Application

When we use JHipster to generate a simple application with a many-to-one relation between Contact and Language , we get a combo-box limited to 20 items. And because in real life there is approximately 180 “ official ” languages, a combo-box of 20 items is not enough. So, here, when I tried to create a new contact, JHipster only gives me the 20 first languages (which is useless in real life).


JHipster, Angular, PrimeNG and AutoComplete

With the default JHipster generated code, there is no way to get “English” as a language (too far in the alphabet).

In terms of code, the generated Angular component is made of two files: an HTML and a TypeScript file. This is what it looks like. The HTML file bindsto the language of the contact( [(ngModel)]="contact.language" ]), and with an ngFor gets the list of languages from the back-end. <div class="form-group">
<label class="form-control-label" jhiTranslate="noautocompleteApp.contact.language" for="field_language">Language</label>
<select class="form-control" id="field_language" name="language" [(ngModel)]="contact.language" required>
<option *ngIf="!editForm.value.language" [ngValue]="null" selected></option>
<option [ngValue]="languageOption.id === contact.language?.id ? contact.language : languageOption" *ngFor="let languageOption of languages; trackBy: trackLanguageById">{{languageOption.name}}</option>
</select>
</div> ngOnInit() {
// ...
this.languageService.query().subscribe(
(res: HttpResponse<ILanguage[]>) => {this.languages = res.body;
},
(res: HttpErrorResponse) => this.onError(res.message)
);
} PrimeNG Auto-Complete Component with Entities

That’s when you go to PrimeNG and pick up a more clever component: the auto-complete component. So instead of using the default JHipster combo-box, it’s just a matter of setting up PrimeNG and changing a few lines of code to get a combo-box that suggests languages as you type. The end result looks like this:


JHipster, Angular, PrimeNG and AutoComplete

As you can see, we don’t have a dumb combobox anymore, but an auto-complete component that calls the back-end each time you type a few characters (e.g. typing en will bring back Armenian, Bengali, Chechen…). For this to work we need to install PrimeNG with the following NPM commands:

$ npm install primeng --save
$ npm install primeicons --save
$ npm install @angular/animations --save

Then, add the PrimeNG CSS in the JHipster vendor.scss file . Once PrimeNG is setup, we need to change the contact-update.component.html file and add the p-autoComplete component.

Notice the attributes of this component. First, the binding is made directly in the contact.language variable. The field attribute is important as it shows the language.name value (Armenian, Bengali, Chechen…) in the auto-complete component (otherwise you would get [Object object] ). The completeMethod invokes the searchLanguages method which is responsible to invoke the back-end and get the list of suggested languages ( suggestions attribute). <div class="form-group">
<label class="form-control-label" jhiTranslate="autocompleteentityApp.contact.language" for="field_language">Language</label>
<div class="form-group">
<p-autoComplete id="field_language" name="language" [(ngModel)]="contact.language" field="name" [suggestions]="suggestedLanguages" (completeMethod)="searchLanguages($event)" required>
</p-autoComplete>
</div>
</div>

Now it’s just a matter of coding the Typescript part of the component. Thanks to JHipster filtering we don’t have much to do. In fact, we re-use the generated method query and pass the right argument 'name.contains' and the value of what we have typed in the auto-complete component( $event.query ). This is what contact-update.component.ts looks like:

suggestedLanguages: ILanguage[];
searchLanguages($event) {
this.languageService.query({'name.contains': $event.query}).subscribe(
(res: HttpResponse<ILanguage[]>) => {this.suggestedLanguages = res.body;
},
(res: HttpErrorResponse) => this.onError(res.message)
);
} PrimeNG Auto-Complete Component with DTOs The previous examples use directly the

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:JHipster, Angular, PrimeNG and AutoComplete
本站链接:https://www.codesec.net/view/611339.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(119)