Jelajahi Sumber

docs: Clarify docs on custom form inputs

Michael Bromley 3 tahun lalu
induk
melakukan
27f55425eb

+ 20 - 0
docs/content/plugins/extending-the-admin-ui/custom-form-inputs/_index.md

@@ -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: