Hi,
I've created an internal issue. I will let you know when the issue is resolved. Thanks for the reporting.
Hi @annguyentps
The problem has already fixed. You should upgrade your solution to the v.4.4.0. Please refer to Upgrading the ABP Framework document.
Hi @steve.burgess,
Code samples in https://leptontheme.com are compatible with MVC UI so they samples do not work with Angular UI.
ABP Angular UI depends on ng-bootstrap library. You can follow this document to use dropdown component.
Please see the Angular UI documentation for the further information.
Regards.
Can we use metronic directly like ng zorro in our Angular UI product?
Yes. You can use any UI library with ABP framework by following its documentation. ABP Angular UI does not restrict you to use any library.
Hi,
Unfortunately, ABP generate proxy does not support the HTTP headers. You can modify the generated method like this:
makeOfferReadyByOfferIdAndExpectedVersion = (offerId: string, expectedVersion: number) =>
this.restService.request<any, NoContentResult>({
method: 'PUT',
url: /api/offers/${offerId}/make-ready,
headers: { "expected-version": expectedVersion }
},
{ apiName: this.apiName });
Please note that your changes in this service will be removed if you regenerate the proxies for the same module. It might be good to move this service from the proxy folder to a different folder.
We will improve the generate proxy for the headers. Thanks!
Hi @samuelhelou
Unfortunately, ABP lookup table component do not support displaying extra columns.
However, you can achieve this;
First way: You can handle this situation in backend side. So you can manipulate displayName prop like this:
{displayName: "Code: HZON, Name: XXX" }
With this way, you can display more than one information in one table column.
Second way: You should create your lookup component and use it instead of the abp-lookup-input component. You can follow the steps below to do this:
yarn ng generate component shared/lookup-input --export
Import SharedModule to your module which is generated from ABP Suite.
Open created lookup-input.component.ts file and replace its content with below code:
import { ABP, AbstractNgModelComponent, ListService } from '@abp/ng.core';
import { AfterViewInit, Component, Injector, Input } from '@angular/core';
import { NgControl } from '@angular/forms';
import { Observable } from 'rxjs';
@Component({
selector: 'app-lookup-input',
templateUrl: 'lookup-input.component.html',
providers: [ListService],
})
export class LookupInputComponent
extends AbstractNgModelComponent<string>
implements AfterViewInit
{
@Input() getFn: (params: ABP.PageQueryParams) => Observable<ABP.PagedResponse<any>>;
@Input() lookupNameProp = 'displayName';
@Input() displayNameProp = 'name';
@Input() editingData: any;
@Input() pickButton = { show: true, disabled: false };
@Input() clearButton = { show: true, disabled: false };
@Input() cid?: string;
selectedName = '';
isModalVisible: boolean;
data = {
items: [],
totalCount: 0,
};
pageQuery: ABP.PageQueryParams = { maxResultCount: 10, skipCount: 0, filter: '' };
private ngControl: NgControl;
public readonly list: ListService;
get isInvalid() {
return this.ngControl.dirty && this.ngControl.invalid;
}
constructor(injector: Injector) {
super(injector);
this.list = injector.get(ListService);
this.ngControl = injector.get(NgControl);
this.ngControl.valueAccessor = this;
}
ngAfterViewInit() {
if (this.value && this.editingData && this.editingData[this.displayNameProp]) {
this.selectedName = this.editingData[this.displayNameProp];
}
const getData = (query: ABP.PageQueryParams) =>
this.getFn({
...query,
...this.pageQuery,
});
const setData = list => (this.data = list);
this.list.hookToQuery(getData).subscribe(setData);
}
pick(data: any) {
this.value = data.id;
this.selectedName = data[this.lookupNameProp];
this.isModalVisible = false;
}
onClickPick() {
this.isModalVisible = true;
}
onClickClear() {
this.value = '';
this.selectedName = '';
}
writeValue(value: string): void {
if (!value) this.selectedName = '';
super.writeValue(value);
}
}
lookup-input.component.html file and replace its content with below code:<div class="input-group">
<input
[id]="cid"
type="text"
class="form-control"
disabled
[ngModel]="selectedName"
[class.input-validation-error]="isInvalid"
/>
<div class="input-group-append">
<button
*ngIf="pickButton.show"
[disabled]="pickButton.disabled"
class="btn btn-info"
type="button"
(click)="onClickPick()"
>
{{ { key: '::Pick', defaultValue: 'Pick' } | abpLocalization }}
</button>
<button
*ngIf="clearButton.show"
[disabled]="clearButton.disabled"
class="btn btn-danger"
type="button"
(click)="onClickClear()"
>
<i class="fa fa-times"></i>
</button>
</div>
</div>
<abp-modal [(visible)]="isModalVisible">
<ng-template #abpHeader>
<h3>{{ { key: '::Pick', defaultValue: 'Pick' } | abpLocalization }}</h3>
</ng-template>
<ng-template #abpBody>
<div class="card">
<div class="card-body">
<div id="data-tables-table-filter" class="data-tables-filter">
<label
><input
type="search"
class="form-control"
[placeholder]="'AbpUi::PagerSearch' | abpLocalization"
[(ngModel)]="pageQuery.filter"
(input.debounce)="list.get()"
/></label>
</div>
<ngx-datatable
[rows]="data.items"
[count]="data.totalCount"
[list]="list"
default
[headerHeight]="0"
>
<ngx-datatable-column [maxWidth]="150" [width]="150" [sortable]="false">
<ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
<button class="btn btn-primary btn-sm" type="button" (click)="pick(row)">
{{ '::Pick' | abpLocalization }}
</button>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [sortable]="false">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row[lookupNameProp] }}
</ng-template>
</ngx-datatable-column>
<!-- you can add new column here -->
</ngx-datatable>
</div>
</div>
</ng-template>
<ng-template #abpFooter>
<button type="button" class="btn btn-secondary" abpClose (click)="isModalVisible = false">
{{ 'AbpUi::Cancel' | abpLocalization }}
</button>
</ng-template>
</abp-modal>
app-lookup-input component instead of the abp-lookup-input component.Hi @abpVAndy
You should import NG-ZORRO styles, please refer to NG-ZORRO importing styles document.
See this community article to learn how to use PrimeNG components with the ABP Angular UI.
Go to the http://localhost:4200/file-management URL manually, what do you see?
If you see the 403 error page, please check the user's permission.
If you see the 404 error page, please share app.module.ts and app-routing.module.ts files content so that I can find source of the problem.
Hi @thaithiendi
Please try to remove the node_modules folder and install the packages with the yarn command.
It is done, will be available in v4.4-preview. You can see the PR: https://github.com/abpframework/abp/pull/9392