How to use the ng-zorro-antd/core.WithConfig function in ng-zorro-antd

selector: 'nz-back-top',
  exportAs: 'nzBackTop',
  animations: [fadeMotion],
  templateUrl: './nz-back-top.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  preserveWhitespaces: false
})
export class NzBackTopComponent implements OnInit, OnDestroy {
  private scroll$: Subscription | null = null;
  private target: HTMLElement | null = null;

  visible: boolean = false;

  @Input() nzTemplate: TemplateRef;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 400) @InputNumber() nzVisibilityHeight: number;

  @Input()
  set nzTarget(el: string | HTMLElement) {
    this.target = typeof el === 'string' ? this.doc.querySelector(el) : el;
    this.registerScrollEvent();
  }

  @Output() readonly nzClick: EventEmitter = new EventEmitter();

  constructor(
    public nzConfigService: NzConfigService,
    private scrollSrv: NzScrollService,
    // tslint:disable-next-line:no-any
    @Inject(DOCUMENT) private doc: any,
    private platform: Platform,
    private cd: ChangeDetectorRef

@ViewChild('inputElement', { static: true }) inputRef: ElementRef;
  @Input() nzSize: string | null = null;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 1) nzHourStep: number;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 1) nzMinuteStep: number;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 1) nzSecondStep: number;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'clear') nzClearText: string;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) nzPopupClassName: string;
  @Input() nzPlaceHolder = '';
  @Input() nzAddOn: TemplateRef;
  @Input() nzDefaultOpenValue = new Date();
  @Input() nzDisabledHours: () => number[];
  @Input() nzDisabledMinutes: (hour: number) => number[];
  @Input() nzDisabledSeconds: (hour: number, minute: number) => number[];
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'HH:mm:ss') nzFormat: string;
  @Input() nzOpen = false;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) @InputBoolean() nzUse12Hours: boolean;
  @Output() readonly nzOpenChange = new EventEmitter();

  @Input() @InputBoolean() nzHideDisabledOptions = false;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) @InputBoolean() nzAllowEmpty: boolean;
  @Input() @InputBoolean() nzDisabled = false;
  @Input() @InputBoolean() nzAutoFocus = false;

  set value(value: Date | null) {
    this._value = value;
    if (this._onChange) {
      this._onChange(this.value);
    }
    if (this._onTouched) {
      this._onTouched();
    }
  }

'[class.ant-card-hoverable]': 'nzHoverable',
    '[class.ant-card-small]': 'nzSize === "small"',
    '[class.ant-card-contain-grid]': 'grids && grids.length',
    '[class.ant-card-type-inner]': 'nzType === "inner"',
    '[class.ant-card-contain-tabs]': '!!tab'
  }
})
export class NzCardComponent {
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) @InputBoolean() nzBordered: boolean;
  @Input() @InputBoolean() nzLoading = false;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) @InputBoolean() nzHoverable: boolean;
  @Input() nzBodyStyle: { [key: string]: string };
  @Input() nzCover: TemplateRef;
  @Input() nzActions: Array> = [];
  @Input() nzType: string;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'default') nzSize: NzSizeDSType;
  @Input() nzTitle: string | TemplateRef;
  @Input() nzExtra: string | TemplateRef;
  @ContentChild(NzCardTabComponent, { static: false }) tab: NzCardTabComponent;
  @ContentChildren(NzCardGridDirective) grids: QueryList;

  constructor(public nzConfigService: NzConfigService, renderer: Renderer2, elementRef: ElementRef) {
    renderer.addClass(elementRef.nativeElement, 'ant-card');
  }
}

]);
const defaultFormatter: NzProgressFormatter = (p: number): string => `${p}%`;

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  selector: 'nz-progress',
  exportAs: 'nzProgress',
  preserveWhitespaces: false,
  templateUrl: './nz-progress.component.html'
})
export class NzProgressComponent implements OnChanges, OnInit, OnDestroy {
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) nzShowInfo: boolean;
  @Input() nzWidth = 132;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) nzStrokeColor: NzProgressStrokeColorType;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'default') nzSize: 'default' | 'small';
  @Input() nzFormat?: NzProgressFormatter;
  @Input() @InputNumber() nzSuccessPercent?: number;
  @Input() @InputNumber() nzPercent: number = 0;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) @InputNumber() nzStrokeWidth: number;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) @InputNumber() nzGapDegree: number;
  @Input() nzStatus: NzProgressStatusType;
  @Input() nzType: NzProgressTypeType = 'line';
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'top') nzGapPosition: NzProgressGapPositionType;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'round') nzStrokeLinecap: NzProgressStrokeLinecapType;

  /** Gradient style when `nzType` is `line`. */
  lineGradient: string | null = null;

  /** If user uses gradient color. */
  isGradient = false;

@Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 1) nzSecondStep: number;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'clear') nzClearText: string;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) nzPopupClassName: string;
  @Input() nzPlaceHolder = '';
  @Input() nzAddOn: TemplateRef;
  @Input() nzDefaultOpenValue = new Date();
  @Input() nzDisabledHours: () => number[];
  @Input() nzDisabledMinutes: (hour: number) => number[];
  @Input() nzDisabledSeconds: (hour: number, minute: number) => number[];
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'HH:mm:ss') nzFormat: string;
  @Input() nzOpen = false;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) @InputBoolean() nzUse12Hours: boolean;
  @Output() readonly nzOpenChange = new EventEmitter();

  @Input() @InputBoolean() nzHideDisabledOptions = false;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) @InputBoolean() nzAllowEmpty: boolean;
  @Input() @InputBoolean() nzDisabled = false;
  @Input() @InputBoolean() nzAutoFocus = false;

  set value(value: Date | null) {
    this._value = value;
    if (this._onChange) {
      this._onChange(this.value);
    }
    if (this._onTouched) {
      this._onTouched();
    }
  }

  get value(): Date | null {
    return this._value;
  }

opacity: 1;
      }
    `
  ]
})
export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnDestroy, OnChanges {
  @ContentChildren(NzCarouselContentDirective) carouselContents: QueryList;

  @ViewChild('slickList', { static: false }) slickList: ElementRef;
  @ViewChild('slickTrack', { static: false }) slickTrack: ElementRef;

  @Input() nzDotRender: TemplateRef<{ $implicit: number }>;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'scrollx') nzEffect: NzCarouselEffects;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) @InputBoolean() nzEnableSwipe: boolean;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) @InputBoolean() nzDots: boolean;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) @InputBoolean() nzAutoPlay: boolean;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 3000) @InputNumber() nzAutoPlaySpeed: number;
  @Input() @InputNumber() nzTransitionSpeed = 500;

  @Input()
  @InputBoolean()
  get nzVertical(): boolean {
    return this.vertical;
  }

  set nzVertical(value: boolean) {
    warnDeprecation(`'nzVertical' is deprecated and will be removed in 9.0.0. Please use 'nzDotPosition' instead.`);
    this.vertical = value;
  }

  @Input()
  @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'bottom')

display: block;
      }
    `
  ],
  host: {
    '[class.ant-card-loading]': 'nzLoading',
    '[class.ant-card-bordered]': 'nzBordered',
    '[class.ant-card-hoverable]': 'nzHoverable',
    '[class.ant-card-small]': 'nzSize === "small"',
    '[class.ant-card-contain-grid]': 'grids && grids.length',
    '[class.ant-card-type-inner]': 'nzType === "inner"',
    '[class.ant-card-contain-tabs]': '!!tab'
  }
})
export class NzCardComponent {
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) @InputBoolean() nzBordered: boolean;
  @Input() @InputBoolean() nzLoading = false;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) @InputBoolean() nzHoverable: boolean;
  @Input() nzBodyStyle: { [key: string]: string };
  @Input() nzCover: TemplateRef;
  @Input() nzActions: Array> = [];
  @Input() nzType: string;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'default') nzSize: NzSizeDSType;
  @Input() nzTitle: string | TemplateRef;
  @Input() nzExtra: string | TemplateRef;
  @ContentChild(NzCardTabComponent, { static: false }) tab: NzCardTabComponent;
  @ContentChildren(NzCardGridDirective) grids: QueryList;

  constructor(public nzConfigService: NzConfigService, renderer: Renderer2, elementRef: ElementRef) {
    renderer.addClass(elementRef.nativeElement, 'ant-card');
  }
}

@Input() @InputBoolean() nzShowLine: boolean = false;
  @Input() @InputBoolean() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) nzDropdownMatchSelectWidth: boolean;
  @Input() @InputBoolean() nzCheckable: boolean = false;
  @Input() @InputBoolean() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) nzHideUnMatched: boolean;
  @Input() @InputBoolean() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) nzShowIcon: boolean;
  @Input() @InputBoolean() nzShowSearch: boolean = false;
  @Input() @InputBoolean() nzDisabled = false;
  @Input() @InputBoolean() nzAsyncData = false;
  @Input() @InputBoolean() nzMultiple = false;
  @Input() @InputBoolean() nzDefaultExpandAll = false;
  @Input() @InputBoolean() nzCheckStrictly = false;
  @Input() nzExpandedIcon: TemplateRef<{ $implicit: NzTreeNode }>;
  @Input() nzNotFoundContent: string;
  @Input() nzNodes: Array = [];
  @Input() nzOpen = false;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'default') nzSize: NzSizeLDSType;
  @Input() nzPlaceHolder = '';
  @Input() nzDropdownStyle: { [key: string]: string };
  /**
   * @deprecated 9.0.0 - use `nzExpandedKeys` instead.
   */
  @Input()
  set nzDefaultExpandedKeys(value: string[]) {
    warnDeprecation(`'nzDefaultExpandedKeys' would be removed in 9.0.0. Please use 'nzExpandedKeys' instead.`);
    this.expandedKeys = value;
  }
  get nzDefaultExpandedKeys(): string[] {
    return this.expandedKeys;
  }

  @Input()
  set nzExpandedKeys(value: string[]) {

display: inline-block;
      }
    `
  ]
})
export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {
  checked = false;
  onChange: (value: boolean) => void = () => null;
  onTouched: () => void = () => null;
  @ViewChild('switchElement', { static: true }) private switchElement: ElementRef;
  @Input() @InputBoolean() nzLoading = false;
  @Input() @InputBoolean() nzDisabled = false;
  @Input() @InputBoolean() nzControl = false;
  @Input() nzCheckedChildren: string | TemplateRef;
  @Input() nzUnCheckedChildren: string | TemplateRef;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'default') nzSize: NzSizeDSType;

  hostClick(e: MouseEvent): void {
    e.preventDefault();
    if (!this.nzDisabled && !this.nzLoading && !this.nzControl) {
      this.updateValue(!this.checked);
    }
  }

  updateValue(value: boolean): void {
    if (this.checked !== value) {
      this.checked = value;
      this.onChange(this.checked);
    }
  }

  onKeyDown(e: KeyboardEvent): void {

['normal', '#108ee9'],
  ['exception', '#ff5500'],
  ['success', '#87d068']
]);
const defaultFormatter: NzProgressFormatter = (p: number): string => `${p}%`;

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  selector: 'nz-progress',
  exportAs: 'nzProgress',
  preserveWhitespaces: false,
  templateUrl: './nz-progress.component.html'
})
export class NzProgressComponent implements OnChanges, OnInit, OnDestroy {
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, true) nzShowInfo: boolean;
  @Input() nzWidth = 132;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) nzStrokeColor: NzProgressStrokeColorType;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'default') nzSize: 'default' | 'small';
  @Input() nzFormat?: NzProgressFormatter;
  @Input() @InputNumber() nzSuccessPercent?: number;
  @Input() @InputNumber() nzPercent: number = 0;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) @InputNumber() nzStrokeWidth: number;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) @InputNumber() nzGapDegree: number;
  @Input() nzStatus: NzProgressStatusType;
  @Input() nzType: NzProgressTypeType = 'line';
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'top') nzGapPosition: NzProgressGapPositionType;
  @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, 'round') nzStrokeLinecap: NzProgressStrokeLinecapType;

  /** Gradient style when `nzType` is `line`. */
  lineGradient: string | null = null;