Hello,
This documentation is for version 2.9. Please check up-to-date documents
Hello,
What is your version and what is your UI type?
Hello
The last version of lepton-x supported with ABP version 5.3 is 1.0.0-beta.3. You can install it with the following command
yarn add @abp/ng.theme.lepton-x@1.0.0-beta.3
Angular version 14 is supported by ABP 6.0 version
Hello,
Can you send your environment file?
Hello,
Can you modify your app.component.ts
with following
import { DynamicLayoutComponent, eLayoutType, RouterEvents } from '@abp/ng.core';
import { AfterViewInit, Component, RendererFactory2, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<abp-loader-bar></abp-loader-bar>
<abp-dynamic-layout></abp-dynamic-layout>
`,
})
export class AppComponent implements AfterViewInit {
@ViewChild(DynamicLayoutComponent, { static: false }) dynamicLayout: DynamicLayoutComponent;
constructor(private rendererFactory: RendererFactory2, private routerEvents: RouterEvents) {}
ngAfterViewInit(): void {
const navigationEnd$ = this.routerEvents.getNavigationEvents('End');
navigationEnd$.subscribe(() => {
if (this.dynamicLayout.layoutKey === eLayoutType.empty) {
this.rendererFactory
.createRenderer(document.body, null)
.addClass(document.body, 'empty-layout');
} else {
this.rendererFactory
.createRenderer(document.body, null)
.removeClass(document.body, 'empty-layout');
}
});
}
}
And please add the following style to your style file
.empty-layout {
padding-top: 0;
}
Hello,
Can you send your environment file?
Can you send .well-known/openid-configuration
endpoint's response?
Hello,
I opened an internal issue about this bug. Thanks for reporting.
For now, you can change abp-lookup-component with yours.
import { CoreModule } from '@abp/ng.core';
import { ThemeSharedModule } from '@abp/ng.theme.shared';
import { NgModule } from '@angular/core';
import { CommercialUiModule } from '@volo/abp.commercial.ng.ui';
import { MyLookupInputComponent } from './my-lookup-input.component';
@NgModule({
declarations: [MyLookupInputComponent],
imports: [ThemeSharedModule, CoreModule, CommercialUiModule],
exports: [MyLookupInputComponent],
})
export class MyLookupInputModule {}
import { Component } from '@angular/core';
import { LookupInputComponent } from '@volo/abp.commercial.ng.ui';
@Component({
selector: 'my-lookup-input',
templateUrl: './my-lookup-input.component.html',
})
export class MyLookupInputComponent extends LookupInputComponent {}
<div class="input-group">
<input
[id]="cid"
type="text"
class="form-control"
disabled
[ngModel]="selectedName"
[class.input-validation-error]="isInvalid"
/>
<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>
<abp-modal [(visible)]="isModalVisible">
<ng-template #abpHeader>
<h3>{{ { key: '::Pick', defaultValue: 'Pick' } | abpLocalization }}</h3>
</ng-template>
<ng-template #abpBody>
<abp-lookup-table
[getFn]="getFn"
[lookupNameProp]="lookupNameProp"
(pick)="pick($event)"
></abp-lookup-table>
</ng-template>
<ng-template #abpFooter>
<button type="button" class="btn btn-secondary" abpClose>
{{ 'AbpUi::Cancel' | abpLocalization }}
</button>
</ng-template>
</abp-modal>
MyLookupInputModule
to your module's imports arrayabp-lookup-input
to my-lookup-input
Hello,
You can use the following code as an example
<select
class="form-select form-control"
>
<option
*ngFor="let option of contactTypeOptions; trackBy: track.by('value')"
[ngValue]="option.value"
>
{{ '::Enum:ContactType.' + option.key | abpLocalization }}
</option>
</select>
Hello,
Sorry for the late response.
The top menu feature of lepton x will be available in the next versions.
Hello
Can you send the response of the https://localhost:44987/api/abp/api-definition
endpoint request?