|
|
@@ -28,6 +28,7 @@ By default, the "intensity" field will be displayed as a number input:
|
|
|
But let's say we want to display a range slider instead. Here's how we can do this using our shared extension module combined with the [registerFormInputComponent function]({{< relref "register-form-input-component" >}}):
|
|
|
|
|
|
```TypeScript
|
|
|
+// project/ui-extensions/shared.module.ts
|
|
|
import { NgModule, Component } from '@angular/core';
|
|
|
import { FormControl } from '@angular/forms';
|
|
|
import { CustomFieldConfig } from '@vendure/common/lib/generated-types';
|
|
|
@@ -58,6 +59,25 @@ export class SliderControl implements FormInputComponent<CustomFieldConfig> {
|
|
|
})
|
|
|
export class SharedExtensionModule {}
|
|
|
```
|
|
|
+The `SharedExtensionModule` is then passed to the `compileUiExtensions()` function as described in the [UI Extensions With Angular guide]({{< relref "using-angular" >}}#4-pass-the-extension-to-the-compileuiextensions-function):
|
|
|
+
|
|
|
+```TypeScript
|
|
|
+// project/vendure-config.ts
|
|
|
+AdminUiPlugin.init({
|
|
|
+ port: 5001,
|
|
|
+ app: compileUiExtensions({
|
|
|
+ outputPath: path.join(__dirname, 'admin-ui'),
|
|
|
+ extensions: [{
|
|
|
+ extensionPath: path.join(__dirname, 'ui-extensions'),
|
|
|
+ ngModules: [{
|
|
|
+ type: 'shared',
|
|
|
+ ngModuleFileName: 'shared.module.ts',
|
|
|
+ ngModuleName: 'SharedExtensionModule',
|
|
|
+ }],
|
|
|
+ }],
|
|
|
+ }),
|
|
|
+})
|
|
|
+```
|
|
|
|
|
|
Once registered, this new slider input can be used in our custom field config:
|
|
|
|