0
# Core Services & Configuration
1

2
Core services for global configuration, internationalization, theming, and application-wide functionality.
3

4
## Capabilities
5

6
### Configuration Service
7

8
Global configuration service for managing component default settings and theme configuration.
9

10
```typescript { .api }
11
/**
12
 * Global configuration service
13
 */
14
interface NzConfigService {
15
  /** Get all configuration */
16
  getConfig(): NzConfig;
17
  /** Get configuration for specific component */
18
  getConfigForComponent<T extends NzConfigKey>(componentName: T): NzConfig[T];
19
  /** Set configuration for specific component */
20
  set<T extends NzConfigKey>(componentName: T, value: NzConfig[T]): void;
21
}
22

23
/**
24
 * Configuration decorator for components
25
 */
26
function WithConfig<T>(): PropertyDecorator;
27

28
// Types
29
type NzConfigKey = 
30
  | 'affix'
31
  | 'alert'
32
  | 'anchor'
33
  | 'avatar'
34
  | 'backTop'
35
  | 'badge'
36
  | 'button'
37
  | 'card'
38
  | 'carousel'
39
  | 'cascader'
40
  | 'codeEditor'
41
  | 'collapse'
42
  | 'descriptions'
43
  | 'drawer'
44
  | 'empty'
45
  | 'form'
46
  | 'icon'
47
  | 'message'
48
  | 'modal'
49
  | 'notification'
50
  | 'pageHeader'
51
  | 'pagination'
52
  | 'progress'
53
  | 'rate'
54
  | 'space'
55
  | 'spin'
56
  | 'switch'
57
  | 'table'
58
  | 'tabs'
59
  | 'timePicker'
60
  | 'tree'
61
  | 'treeSelect'
62
  | 'typography';
63

64
interface NzConfig {
65
  affix?: NzAffixConfig;
66
  button?: NzButtonConfig;
67
  message?: NzMessageConfig;
68
  notification?: NzNotificationConfig;
69
  // ... other component configs
70
}
71

72
// Configuration interfaces for major components
73
interface NzButtonConfig {
74
  nzSize?: 'large' | 'default' | 'small';
75
}
76

77
interface NzMessageConfig {
78
  nzDuration?: number;
79
  nzMaxStack?: number;
80
  nzAnimate?: boolean;
81
  nzTop?: number | string;
82
}
83

84
interface NzNotificationConfig {
85
  nzTop?: string | number;
86
  nzBottom?: string | number;
87
  nzPlacement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
88
}
89

90
// Module
91
class NzConfigModule {
92
  static forRoot(): ModuleWithProviders<NzConfigModule>;
93
}
94
```
95

96
**Usage Examples:**
97

98
```typescript
99
import { NzConfigService } from 'ng-zorro-antd/core/config';
100

101
@Component({
102
  template: `
103
    <!-- Button will use global size configuration -->
104
    <button nz-button nzType="primary">Global Configured Button</button>
105
  `
106
})
107
export class ConfigExampleComponent {
108
  constructor(private nzConfigService: NzConfigService) {
109
    // Set global button configuration
110
    this.nzConfigService.set('button', { nzSize: 'large' });
111
  }
112
}
113
```
114

115
### Internationalization Service
116

117
Comprehensive internationalization service with 70+ language support.
118

119
```typescript { .api }
120
/**
121
 * Internationalization service
122
 */
123
interface NzI18nService {
124
  /** Set locale */
125
  setLocale(locale: NzI18nInterface): void;
126
  /** Get current locale */
127
  getLocale(): NzI18nInterface;
128
  /** Get current locale ID */
129
  getLocaleId(): string;
130
  /** Set date locale */
131
  setDateLocale(dateLocale: any): void;
132
  /** Get date locale */
133
  getDateLocale(): any;
134
  /** Get localized text */
135
  translate(path: string, data?: any): string;
136
  /** Get locale data by path */
137
  getLocaleData(path: string, defaultValue?: any): any;
138
  /** Locale change observable */
139
  readonly localeChange: Observable<NzI18nInterface>;
140
}
141

142
/**
143
 * Internationalization pipe
144
 * Usage: {{ 'path.to.text' | nzI18n }}
145
 */
146
interface NzI18nPipe {
147
  transform(path: string, keyValue?: object): string;
148
}
149

150
/**
151
 * Date helper service for localized date operations
152
 */
153
interface NzDateHelperService {
154
  /** Get first day of week */
155
  getFirstDayOfWeek(): WeekDayIndex;
156
  /** Get locale data */
157
  getDateLocale(): any;
158
  /** Format date */
159
  format(date: Date, formatStr: string): string;
160
  /** Parse date */
161
  parseDate(text: string, formatStr?: string): Date;
162
  /** Parse time */
163
  parseTime(text: string, formatStr?: string): Date | undefined;
164
}
165

166
// Types
167
interface NzI18nInterface {
168
  locale: string;
169
  Pagination?: any;
170
  DatePicker?: any;
171
  TimePicker?: any;
172
  Calendar?: any;
173
  Table?: any;
174
  Modal?: any;
175
  Popconfirm?: any;
176
  Transfer?: any;
177
  Upload?: any;
178
  Empty?: any;
179
  global?: any;
180
  PageHeader?: any;
181
  // ... other component translations
182
}
183

184
type WeekDayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
185

186
// Tokens
187
const NZ_I18N: InjectionToken<NzI18nInterface>;
188
const NZ_DATE_CONFIG: InjectionToken<NzDateConfig>;
189

190
interface NzDateConfig {
191
  /** First day of week */
192
  firstDayOfWeek?: WeekDayIndex;
193
}
194

195
// Language packs (partial list)
196
const ar_EG: NzI18nInterface;  // Arabic (Egypt)
197
const en_US: NzI18nInterface;  // English (US)
198
const en_GB: NzI18nInterface;  // English (UK)
199
const zh_CN: NzI18nInterface;  // Chinese (Simplified)
200
const zh_TW: NzI18nInterface;  // Chinese (Traditional)
201
const fr_FR: NzI18nInterface;  // French
202
const de_DE: NzI18nInterface;  // German
203
const ja_JP: NzI18nInterface;  // Japanese
204
const ko_KR: NzI18nInterface;  // Korean
205
const es_ES: NzI18nInterface;  // Spanish
206
const pt_BR: NzI18nInterface;  // Portuguese (Brazil)
207
const ru_RU: NzI18nInterface;  // Russian
208
const it_IT: NzI18nInterface;  // Italian
209
// ... 70+ total language packs
210

211
// Module
212
class NzI18nModule {
213
  static forRoot(): ModuleWithProviders<NzI18nModule>;
214
}
215
```
216

217
**Usage Examples:**
218

219
```typescript
220
import { NzI18nService, en_US, zh_CN } from 'ng-zorro-antd/i18n';
221

222
@Component({
223
  template: `
224
    <nz-date-picker></nz-date-picker>
225
    <nz-pagination [nzTotal]="100"></nz-pagination>
226
    
227
    <!-- Custom translations -->
228
    <p>{{ 'common.confirm' | nzI18n }}</p>
229
    
230
    <button (click)="switchLanguage()">Switch Language</button>
231
  `
232
})
233
export class I18nExampleComponent {
234
  constructor(private i18n: NzI18nService) {}
235

236
  switchLanguage(): void {
237
    const currentLocale = this.i18n.getLocaleId();
238
    const newLocale = currentLocale === 'en' ? zh_CN : en_US;
239
    this.i18n.setLocale(newLocale);
240
  }
241
}
242

243
// App module configuration
244
@NgModule({
245
  imports: [
246
    NzI18nModule.forRoot()
247
  ],
248
  providers: [
249
    { provide: NZ_I18N, useValue: en_US }
250
  ]
251
})
252
export class AppModule {}
253
```
254

255
### Icon Service
256

257
Icon service for managing and registering custom icons.
258

259
```typescript { .api }
260
/**
261
 * Icon service for icon management
262
 */
263
interface NzIconService {
264
  /** Add icon */
265
  addIcon(...icons: IconDefinition[]): void;
266
  /** Add icon literal */
267
  addIconLiteral(type: string, literal: string): void;
268
  /** Clear icons */
269
  clear(): void;
270
  /** Get icon */
271
  getRenderedContent(icon: IconDefinition | string, twoToneColor?: string): Observable<SVGElement>;
272
  /** Create icon from font */
273
  createIconfontIcon(scriptUrl: string): void;
274
  /** Set two tone color */
275
  twoToneColor: { primaryColor: string; secondaryColor?: string };
276
}
277

278
/**
279
 * Icon directive
280
 * Selector: [nz-icon]
281
 */
282
interface NzIconDirective {
283
  /** Icon type */
284
  nzType: string;
285
  /** Icon theme */
286
  nzTheme: 'outline' | 'twotone' | 'fill';
287
  /** Icon spin */
288
  nzSpin: boolean;
289
  /** Two tone color */
290
  nzTwoToneColor: string;
291
  /** Icon font */
292
  nzIconfont: string;
293
  /** Icon rotate */
294
  nzRotate: number;
295
}
296

297
// Types from @ant-design/icons-angular
298
interface IconDefinition {
299
  name: string;
300
  theme: 'outline' | 'twotone' | 'fill';
301
  icon: string | ((primaryColor: string, secondaryColor: string) => string);
302
}
303

304
// Module
305
class NzIconModule {
306
  static forRoot(icons: IconDefinition[]): ModuleWithProviders<NzIconModule>;
307
}
308
```
309

310
### Breakpoint Service
311

312
Service for responsive design breakpoint management.
313

314
```typescript { .api }
315
/**
316
 * Breakpoint service for responsive design
317
 */
318
interface NzBreakpointService {
319
  /** Subscribe to breakpoint changes */
320
  subscribe(breakpointMap: NzBreakpointMap): Observable<NzBreakpointState>;
321
  /** Subscribe to specific breakpoint */
322
  subscribe(bp: NzBreakpointKey): Observable<boolean>;
323
}
324

325
// Types
326
type NzBreakpointKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
327

328
interface NzBreakpointMap {
329
  xs?: string;
330
  sm?: string;
331
  md?: string;
332
  lg?: string;
333
  xl?: string;
334
  xxl?: string;
335
}
336

337
interface NzBreakpointState {
338
  xs: boolean;
339
  sm: boolean;
340
  md: boolean;
341
  lg: boolean;
342
  xl: boolean;
343
  xxl: boolean;
344
}
345
```
346

347
### Animation Utilities
348

349
Animation utilities and directives for component transitions.
350

351
```typescript { .api }
352
/**
353
 * No animation directive
354
 * Selector: [nzNoAnimation]
355
 */
356
interface NzNoAnimationDirective {
357
  /** Disable animation */
358
  nzNoAnimation: boolean;
359
}
360

361
// Animation functions
362
function slideMotion(): AnimationTriggerMetadata;
363
function fadeMotion(): AnimationTriggerMetadata;
364
function collapseMotion(): AnimationTriggerMetadata;
365
function zoomMotion(): AnimationTriggerMetadata;
366
function moveUpMotion(): AnimationTriggerMetadata;
367

368
// Module
369
class NzNoAnimationModule {
370
  static forRoot(): ModuleWithProviders<NzNoAnimationModule>;
371
}
372
```
373

374
### Wave Effect
375

376
Wave effect directive for click feedback.
377

378
```typescript { .api }
379
/**
380
 * Wave directive for click effect
381
 * Selector: [nz-wave]
382
 */
383
interface NzWaveDirective {
384
  /** Wave config */
385
  nzWaveExtraNode: boolean;
386
}
387

388
// Module
389
class NzWaveModule {
390
  static forRoot(): ModuleWithProviders<NzWaveModule>;
391
}
392
```
393

394
### Utility Services
395

396
Core utility services for common functionality.
397

398
```typescript { .api }
399
/**
400
 * Scroll service for scroll utilities
401
 */
402
interface NzScrollService {
403
  /** Get scroll position */
404
  getScroll(target?: Element | Window, top?: boolean): number;
405
  /** Scroll to position */
406
  scrollTo(containerEl: Element | Window, targetTopValue?: number, easing?: string, callback?: () => void): void;
407
}
408

409
/**
410
 * Dom event service for DOM utilities
411
 */
412
interface NzDomEventService {
413
  /** Register resize listener */
414
  registerResizeListener(callback: () => void): () => void;
415
}
416

417
/**
418
 * Drag service for drag & drop
419
 */
420
interface NzDragService {
421
  /** Request dragging sequence */
422
  requestDraggingSequence(event: MouseEvent | TouchEvent): Observable<{ x: number; y: number; deltaX: number; deltaY: number }>;
423
}
424

425
/**
426
 * Singleton service for creating singletons
427
 */
428
interface NzSingletonService {
429
  /** Get singleton instance */
430
  getSingleton<T>(key: string, factory?: () => T): T;
431
  /** Register singleton */
432
  registerSingleton<T>(key: string, factory: () => T): void;
433
}
434

435
/**
436
 * Resize observer service
437
 */
438
interface NzResizeObserverService {
439
  /** Observe element resize */
440
  observe(element: Element): Observable<ResizeObserverEntry[]>;
441
}
442
```
443

444
### Form Utilities
445

446
Form-related utilities and services.
447

448
```typescript { .api }
449
/**
450
 * Form status service
451
 */
452
interface NzFormStatusService {
453
  /** Form control status update */
454
  formStatusChanges: Subject<{ status: NzValidateStatus; hasFeedback: boolean }>;
455
}
456

457
/**
458
 * Form item feedback icon component
459
 */
460
interface NzFormItemFeedbackIconComponent {
461
  /** Status */
462
  status: NzValidateStatus;
463
}
464

465
// Types
466
type NzValidateStatus = 'success' | 'warning' | 'error' | 'validating' | '';
467
```
468

469
### Logger Service
470

471
Development and debugging logger service.
472

473
```typescript { .api }
474
/**
475
 * Logger service for debugging
476
 */
477
interface NzLoggerService {
478
  /** Log debug message */
479
  debug(...args: any[]): void;
480
  /** Log info message */
481
  info(...args: any[]): void;
482
  /** Log warning message */
483
  warn(...args: any[]): void;
484
  /** Log error message */
485
  error(...args: any[]): void;
486
}
487

488
// Logger module
489
class NzLoggerModule {
490
  static forRoot(): ModuleWithProviders<NzLoggerModule>;
491
}
492
```
493

494
### Highlight Service
495

496
Text highlighting utilities.
497

498
```typescript { .api }
499
/**
500
 * Highlight service for text highlighting
501
 */
502
interface NzHighlightService {
503
  /** Highlight text matches */
504
  highlight(inputStr: string, searchValue: string, startTag?: string, endTag?: string): string;
505
}
506

507
// Highlight pipe
508
interface NzHighlightPipe {
509
  transform(text: string, search: string, startTag?: string, endTag?: string): string;
510
}
511

512
// Module
513
class NzHighlightModule {
514
  static forRoot(): ModuleWithProviders<NzHighlightModule>;
515
}
516
```
517

518
### Global Configuration
519

520
Application-wide configuration and setup.
521

522
```typescript { .api }
523
/**
524
 * Global NG-ZORRO configuration
525
 */
526
interface NzGlobalConfig {
527
  /** Animation configuration */
528
  animation?: {
529
    disabled?: boolean;
530
  };
531
  /** Message configuration */
532
  message?: NzMessageConfig;
533
  /** Notification configuration */
534
  notification?: NzNotificationConfig;
535
  /** Modal configuration */
536
  modal?: {
537
    autoFocusButtonOk?: boolean;
538
  };
539
}
540

541
// Setup function for global configuration
542
function provideNzConfig(config: NzGlobalConfig): Provider[];
543

544
// Usage in app.config.ts or module
545
const appConfig: ApplicationConfig = {
546
  providers: [
547
    provideNzConfig({
548
      message: { nzTop: 120 },
549
      notification: { nzTop: 240 }
550
    })
551
  ]
552
};
553
```
554

555
**Usage Examples:**
556

557
```typescript
558
// Standalone component with global config
559
import { Component } from '@angular/core';
560
import { provideNzConfig } from 'ng-zorro-antd/core/config';
561

562
bootstrapApplication(AppComponent, {
563
  providers: [
564
    provideNzConfig({
565
      message: { nzDuration: 3000 },
566
      notification: { nzPlacement: 'topRight' }
567
    })
568
  ]
569
});
570

571
// Module-based setup
572
@NgModule({
573
  imports: [
574
    NzConfigModule.forRoot(),
575
    NzI18nModule.forRoot()
576
  ],
577
  providers: [
578
    { provide: NZ_I18N, useValue: en_US },
579
    provideNzConfig({
580
      animation: { disabled: false },
581
      message: { nzTop: 100 }
582
    })
583
  ]
584
})
585
export class AppModule {}
586
```