How to use @delon/theme - 10 common examples
To help you get started, we’ve selected a few @delon/theme examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
dotnetcore / OSharp / tests / web / ui / ng-alain7 / src / app / shared / shared.module.ts View on Github 
ModalTreeComponent,
FilterGroupComponent,
FilterRuleComponent,
AdSearchComponent,
AdSearchModalComponent
];
const DIRECTIVES = [];
// #endregion
@NgModule({
imports: [
CommonModule,
FormsModule,
RouterModule,
ReactiveFormsModule,
AlainThemeModule.forChild(),
DelonABCModule,
DelonACLModule,
DelonFormModule,
OsharpModule,
// third libs
...THIRDMODULES
],
declarations: [
// your components
...COMPONENTS,
...DIRECTIVES
],
exports: [
CommonModule,
FormsModule,
ReactiveFormsModule,OsharpModule,
];
// endregion
// region: your componets & directives
const COMPONENTS = [];
const DIRECTIVES = [];
// endregion
@NgModule({
imports: [
CommonModule,
FormsModule,
RouterModule,
ReactiveFormsModule,
AlainThemeModule.forChild(),
DelonABCModule,
DelonACLModule,
DelonFormModule,
MaterialModule,
// third libs
...THIRDMODULES
],
declarations: [
// your components
...COMPONENTS,
...DIRECTIVES
],
exports: [
CommonModule,
FormsModule,
ReactiveFormsModule,modal: { size: 'lg' },
};
}
const GLOBAL_CONFIG_PROVIDES = [
// TIPS：@delon/abc 有大量的全局配置信息，例如设置所有 `st` 的页码默认为 `20` 行
{ provide: STConfig, useFactory: fnSTConfig },
{ provide: PageHeaderConfig, useFactory: fnPageHeaderConfig },
{ provide: DelonAuthConfig, useFactory: fnDelonAuthConfig },
{ provide: DelonACLConfig, useFactory: fnDelonACLConfig },
];
// #endregion
@NgModule({
imports: [AlainThemeModule.forRoot(), DelonACLModule.forRoot(), ...MOCK_MODULES],
})
export class DelonModule {
constructor(@Optional() @SkipSelf() parentModule: DelonModule) {
throwIfAlreadyLoaded(parentModule, 'DelonModule');
}
static forRoot(): ModuleWithProviders {
return {
ngModule: DelonModule,
providers: [...REUSETAB_PROVIDES, ...GLOBAL_CONFIG_PROVIDES],
};
}
}import { AppSessionService } from './session/app-session.service';
// #region your componets & directives
const COMPONENTS = [
];
const DIRECTIVES = [];
// #endregion
@NgModule({
imports: [
CommonModule,
FormsModule,
RouterModule,
ReactiveFormsModule,
AlainThemeModule.forChild(),
DelonABCModule,
DelonACLModule,
DelonFormModule,
// third libs
...THIRDMODULES
],
declarations: [
// your components
...COMPONENTS,
...DIRECTIVES
],
exports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
RouterModule,BaseTreeTableComponent,
BaseDetailComponent,
BaseSelectorComponent,
BaseTreeSelectorComponent,
TransferSelectorComponent
];
const DIRECTIVES = [];
// endregion
@NgModule({
imports: [
CommonModule,
FormsModule,
RouterModule,
ReactiveFormsModule,
AlainThemeModule.forChild(),
DelonABCModule,
DelonChartModule,
DelonACLModule,
DelonFormModule,
// third libs
...THIRDMODULES
],
declarations: [
// your components
...COMPONENTS,
...DIRECTIVES
],
entryComponents: [
...COMPONENTS,
],
exports: [FilterGroupComponent,
FilterRuleComponent,
AdSearchComponent,
AdSearchModalComponent,
FunctionViewComponent
];
const DIRECTIVES = [];
// #endregion
@NgModule({
imports: [
CommonModule,
FormsModule,
RouterModule,
ReactiveFormsModule,
AlainThemeModule.forChild(),
DelonABCModule,
DelonACLModule,
DelonFormModule,
// third libs
...THIRDMODULES
],
declarations: [
// your components
...COMPONENTS,
...DIRECTIVES
],
exports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
RouterModule,BaseDetailComponent,
BaseSelectorComponent,
BaseTreeSelectorComponent,
TransferSelectorComponent,
EditorComponent
];
const DIRECTIVES = [];
// endregion
@NgModule({
imports: [
CommonModule,
FormsModule,
RouterModule,
ReactiveFormsModule,
AlainThemeModule.forChild(),
DelonABCModule,
DelonChartModule,
DelonACLModule,
DelonFormModule,
// third libs
...THIRDMODULES
],
declarations: [
// your components
...COMPONENTS,
...DIRECTIVES
],
entryComponents: [...COMPONENTS],
exports: [
CommonModule,
FormsModule,modal: { size: 'lg' },
};
}
const GLOBAL_CONFIG_PROVIDES = [
// TIPS：@delon/abc 有大量的全局配置信息，例如设置所有 `st` 的页码默认为 `20` 行
{ provide: STConfig, useFactory: fnSTConfig },
{ provide: PageHeaderConfig, useFactory: fnPageHeaderConfig },
{ provide: DelonAuthConfig, useFactory: fnDelonAuthConfig },
{ provide: DelonACLConfig, useFactory: fnDelonACLConfig },
];
// #endregion
@NgModule({
imports: [AlainThemeModule.forRoot(), DelonACLModule.forRoot(), ...MOCK_MODULES],
})
export class DelonModule {
constructor(@Optional() @SkipSelf() parentModule: DelonModule) {
throwIfAlreadyLoaded(parentModule, 'DelonModule');
}
static forRoot(): ModuleWithProviders {
return {
ngModule: DelonModule,
providers: [...REUSETAB_PROVIDES, ...GLOBAL_CONFIG_PROVIDES],
};
}
}return Object.assign(new STConfig(), {
ps: 3,
});
}
export function fnLodopConfig(): LodopConfig {
return Object.assign(new LodopConfig(), {
license: `A59B099A586B3851E0F0D7FDBF37B603`,
licenseA: `C94CEE276DB2187AE6B65D56B3FC2848`,
});
}
// #endregion
@NgModule({
imports: [AlainThemeModule.forRoot(), DelonFormModule.forRoot(), DelonACLModule.forRoot(), DelonMockModule.forRoot({ data: MOCKDATA })],
})
export class DelonModule {
constructor(
@Optional()
@SkipSelf()
parentModule: DelonModule,
) {
throwIfAlreadyLoaded(parentModule, 'DelonModule');
}
static forRoot(): ModuleWithProviders {
return {
ngModule: DelonModule,
providers: [...REUSETAB_PROVIDES, { provide: STConfig, useFactory: fnSTConfig }, { provide: LodopConfig, useFactory: fnLodopConfig }],
};
}import { AdLodopConfig, DelonABCModule } from '@delon/abc';
export function adLodopConfig(): AdLodopConfig {
return Object.assign(new AdLodopConfig(), {
license: `A59B099A586B3851E0F0D7FDBF37B603`,
licenseA: `C94CEE276DB2187AE6B65D56B3FC2848`
});
}
// endregion
@NgModule({
imports: [
NgZorroAntdModule.forRoot(),
// theme
AlainThemeModule.forRoot(),
// abc
DelonABCModule.forRoot(),
// form
DelonFormModule.forRoot(),
DelonUtilModule.forRoot()
]
})
export class DelonModule {
constructor( @Optional() @SkipSelf() parentModule: DelonModule) {
throwIfAlreadyLoaded(parentModule, 'DelonModule');
}
static forRoot(): ModuleWithProviders {
return {
ngModule: DelonModule,
providers: [
