Andy Stark 31479cfaa4 [ADF-4152] Restructured remaining doc folders and fixed links (#4441)
* [ADF-4152] Moved proc services cloud docs to subfolders

* [ADF-4152] Fixed links in PS cloud docs

* [ADF-4152] Added subfolders and checked links for extensions and insights docs

* [ADF-4152] Moved proc services cloud docs to subfolders

* [ADF-4152] Fixed links in PS cloud docs

* [ADF-4152] Added subfolders and checked links for extensions and insights docs

* [ADF-4152] Fixed links in Proc cloud, Insights and Extensions docs

* [ADF-4152] Updated links in user guide

* [ADF-4152] Fixed broken links in tutorials

* [ADF-4152] Fixed remaining links in core docs

* [ADF-4152] Fixed remaining links in proc services docs

* [ADF-4152] Fixed remaining links in content services docs

* [ADF-4152] Fixed links in breaking changes docs

* [ADF-4152] Updated main README index page

* [ADF-4152] Fixed glitches with preview ext component docs
2019-03-14 22:01:55 +00:00

58 lines
1.9 KiB
Markdown

---
Title: Dynamic Component
Added: v3.0.0
Status: Experimental
Last reviewed: 2018-12-17
---
# [Dynamic Component](../../../lib/extensions/src/lib/components/dynamic-component/dynamic.component.ts "Defined in dynamic.component.ts")
Displays dynamically-loaded extension components.
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| data | `any` | | Data for the dynamically-loaded component instance. |
| id | `string` | | Unique ID string for the component to show. |
## Details
Use the Dynamic component to create extensible apps
(ie, apps that provide a generalized UI structure where the specific content
can be "plugged in" by other developers). The `id` property refers to a
component that has previously been registered using the `setComponents` method
of the [Extension service](../services/extension.service.md):
```ts
// Registering the extension components.
extensionService.setComponents({
'plugInName.components.docList': DocumentListComponent.
'plugInName.components.login': LoginComponent,
...
});
```
```html
<!-- Using the component pre-registered with the key 'plugInName.components.login' -->
<adf-dynamic-component
id="'plugInName.components.login'"
data="{ ... }"
>
</adf-dynamic-component>
```
Use this to provide the extension developer with a standard layout that
contains placeholders defined by instances of the Dynamic component. The
developer can then register any desired components to correspond to the
defined component IDs. For example, the extensible app might be shipped
with the standard [Document List component](../../content-services/components/document-list.component.md) registered against `plugInName.components.docList`.
The extension developer can replace this with a custom class
simply by registering that class with `setComponents` before use.
## See also
- [Extension service](../services/extension.service.md)