mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4152] Updated folder structure of core docs (#4415)
* [ADF-4152] Moved core library docs into subfolders * [ADF-4152] Moved core library docs into subfolders * [ADF-4152] Manual fixes to core doc file links * [ADF-4152] Further automatic + manual link tidying
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
285e56e9fb
commit
5fc05da7aa
152
docs/core/interfaces/card-view-item.interface.md
Normal file
152
docs/core/interfaces/card-view-item.interface.md
Normal file
@@ -0,0 +1,152 @@
|
||||
---
|
||||
Title: Card View Item interface
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-05-08
|
||||
---
|
||||
|
||||
# [Card View Item interface](../../../lib/core/card-view/interfaces/card-view-item.interface.ts "Defined in card-view-item.interface.ts")
|
||||
|
||||
Defines the implementation of an item in a [Card View component](../components/card-view.component.md).
|
||||
|
||||
## Definition
|
||||
|
||||
```ts
|
||||
export interface CardViewItem {
|
||||
label: string;
|
||||
value: any;
|
||||
key: string;
|
||||
default?: any;
|
||||
type: string;
|
||||
displayValue: string;
|
||||
editable?: boolean;
|
||||
icon?: string;
|
||||
data?: any;
|
||||
}
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| ---- | ---- | ------- | ----------- |
|
||||
| label | string | "" | Item label |
|
||||
| value | any | | The original data value for the item |
|
||||
| key | string | "" | Identifying key (important when editing the item) |
|
||||
| default | any | | The default value to display if the value is empty |
|
||||
| displayValue | string | "" | The value to display |
|
||||
| editable | boolean | false | Toggles whether the item is editable |
|
||||
| clickable | boolean | false | Toggles whether the item is clickable |
|
||||
| icon | string | | The material icon to show beside clickable items |
|
||||
| data | any | null | Any custom data which is needed to be provided and stored in the model for any reason. During an update or a click event this can be a container of any custom data which can be useful for 3rd party codes. |
|
||||
|
||||
## Details
|
||||
|
||||
Card item components are loaded dynamically by the
|
||||
main [Card View component](../components/card-view.component.md). This allows you to define your own
|
||||
component for a custom item type.
|
||||
|
||||
For example, follow the steps given below to add a **stardate** type to display Captain
|
||||
Picard's birthday (47457.1):
|
||||
|
||||
1. Define the model for the custom type.
|
||||
|
||||
Your model must extend the [`CardViewBaseItemModel`](../../../lib/core/card-view/models/card-view-baseitem.model.ts) class and implement the [`CardViewItem`](../../../lib/core/card-view/interfaces/card-view-item.interface.ts)
|
||||
and [`DynamicComponentModel`](../../../lib/core/services/dynamic-component-mapper.service.ts) interfaces. See the
|
||||
[Card View Text Item model source](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts)
|
||||
for an example of how to do this.
|
||||
|
||||
```ts
|
||||
import { CardViewBaseItemModel, CardViewItem, DynamicComponentModel } from '@alfresco/adf-core';
|
||||
|
||||
export class CardViewStarDateItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
|
||||
type: string = 'star-date';
|
||||
|
||||
get displayValue() {
|
||||
return this.convertToStarDate(this.value) || this.default;
|
||||
}
|
||||
|
||||
private convertToStarDate(starTimeStamp: number): string {
|
||||
// Do the magic
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2. Define the component for the custom type.
|
||||
|
||||
The selector is not important given that this is a dynamically loaded component.
|
||||
You can choose any name for the selector, but it makes sense to follow the Angular standards.
|
||||
|
||||
```ts
|
||||
@Component({
|
||||
selector: 'card-view-stardateitem' /* For example */
|
||||
...
|
||||
})
|
||||
export class CardViewStarDateItemComponent {
|
||||
@Input()
|
||||
property: CardViewStarDateItemModel;
|
||||
|
||||
@Input()
|
||||
editable: boolean;
|
||||
|
||||
constructor(private cardViewUpdateService: CardViewUpdateService) {}
|
||||
|
||||
isEditable() {
|
||||
return this.editable && this.property.editable;
|
||||
}
|
||||
|
||||
showStarDatePicker() {
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
See the
|
||||
[Card View Text Item component source](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts)
|
||||
or the
|
||||
[Card View Date Item component source](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts) for examples of how to make the field
|
||||
editable.
|
||||
|
||||
3. Add your custom component to your module's `entryComponents` list.
|
||||
|
||||
You must register your component in your module's `entryComponents` array
|
||||
to enable Angular to load it dynamically:
|
||||
|
||||
```js
|
||||
@NgModule({
|
||||
imports: [...],
|
||||
declarations: [
|
||||
CardViewStarDateItemComponent
|
||||
],
|
||||
entryComponents: [
|
||||
CardViewStarDateItemComponent
|
||||
],
|
||||
exports: [...]
|
||||
})
|
||||
export class MyModule {}
|
||||
```
|
||||
|
||||
4. Bind your custom component to the custom model type so that Angular's dynamic component
|
||||
loader can find it.
|
||||
|
||||
```ts
|
||||
@Component({
|
||||
...
|
||||
providers: [ CardItemTypeService ] /* If you don't want to pollute the main instance of the CardItemTypeService service */
|
||||
...
|
||||
})
|
||||
export class SomeParentComponent {
|
||||
|
||||
constructor(private cardItemTypeService: CardItemTypeService) {
|
||||
cardItemTypeService.setComponentTypeResolver('star-date', () => CardViewStarDateItemComponent);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The [Card Item Type service](../services/card-item-types.service.md) maps each item type to the
|
||||
corresponding component. See its [doc page](../services/card-item-types.service.md) for further
|
||||
details.
|
||||
|
||||
## See also
|
||||
|
||||
- [Card View component](../components/card-view.component.md)
|
||||
- [Card Item Types service](../services/card-item-types.service.md)
|
||||
157
docs/core/interfaces/datatable-adapter.interface.md
Normal file
157
docs/core/interfaces/datatable-adapter.interface.md
Normal file
@@ -0,0 +1,157 @@
|
||||
---
|
||||
Title: DataTableAdapter interface
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
|
||||
# [DataTableAdapter interface](../../../lib/core/datatable/data/datatable-adapter.ts "Defined in datatable-adapter.ts")
|
||||
|
||||
Defines how table data is supplied to [DataTable](../components/datatable.component.md) and [Tasklist](../../process-services/components/task-list.component.md) components.
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| selectedRow | [`DataRow`](../../../lib/core/datatable/data/data-row.model.ts) | The data for the currently selected row. |
|
||||
|
||||
## Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| rowsChanged | [`Subject<Array<DataRow>>`](../../../lib/core/datatable/data/data-row.model.ts) | Raised when data adapter gets new rows. |
|
||||
|
||||
## Methods
|
||||
|
||||
[`getRows(): Array<DataRow>;`](../../../lib/core/datatable/data/data-row.model.ts)<br/>
|
||||
[`setRows(rows: Array<DataRow>): void;`](../../../lib/core/datatable/data/data-row.model.ts)<br/>
|
||||
Get/set the values for display in the table using an array of rows.
|
||||
|
||||
[`getColumns(): Array<DataColumn>;`](../../../lib/core/datatable/data/data-column.model.ts)<br/>
|
||||
[`setColumns(columns: Array<DataColumn>): void;`](../../../lib/core/datatable/data/data-column.model.ts)<br/>
|
||||
Get/set an array of column specifications.
|
||||
|
||||
`getValue(row:`[`DataRow,`](../../../lib/core/datatable/data/data-row.model.ts)`col: DataColumn): any;`<br/>
|
||||
Get the data value from a specific table cell.
|
||||
|
||||
`getSorting():`[`DataSorting`](../../../lib/core/datatable/data/data-sorting.model.ts)`;`<br/>
|
||||
`setSorting(sorting: DataSorting): void;`<br/>
|
||||
Get/set the sorting key and direction (ascending or descending).
|
||||
|
||||
`sort(key?: string, direction?: string): void;`<br/>
|
||||
Sort the table with a specified key and direction (ascending or descending).
|
||||
|
||||
## Details
|
||||
|
||||
You can implement [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) in your own class to display your data with the [DataTable](../components/datatable.component.md)
|
||||
and [Tasklist](../../process-services/components/task-list.component.md) components.
|
||||
This interface (along with other interfaces for column and row data) hides the details of your class from the caller, so you can store your data internally however you like. The DataTable library implements the interface in the [`ObjectDataTableAdapter`](../../../lib/core/datatable/data/object-datatable-adapter.ts) class which is the standard adapter for the Datatable component.
|
||||
|
||||
The basic idea of [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) is that the caller can request your class to return an array of column
|
||||
definition objects. Each of these objects specifies the unique key, name, type and other properties of a single column.
|
||||
|
||||
The caller can also request the data values for the table as an array of row objects. The caller accesses the data from a row using a `getValue` method that returns the data from a specified column. This column is identified by the unique key that was set during the column definition.
|
||||
|
||||
The data-hiding works the other way around when the caller needs to set data in the [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) class - the internal
|
||||
details of the caller's storage are hidden by the column and row interfaces. When the `setColumns` and `setRows` methods are
|
||||
called on the adapter, it can simply query the column/row objects it receives and then store the data in its own format.
|
||||
|
||||
### Columns and rows
|
||||
|
||||
Columns are defined by the [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) interface:
|
||||
|
||||
```ts
|
||||
interface DataColumn {
|
||||
key: string;
|
||||
type: string;
|
||||
format?: string;
|
||||
sortable?: boolean;
|
||||
title?: string;
|
||||
srTitle?: string;
|
||||
cssClass?: string;
|
||||
template?: TemplateRef<any>;
|
||||
formatTooltip?: Function;
|
||||
}
|
||||
```
|
||||
|
||||
An array of these objects is passed to your object when the `setColumns` method is called. The `key` property is used to identify columns and so each column's key should be unique. The `type` string can have a value of 'text', 'image' or 'date'.
|
||||
|
||||
An array of [`DataRow`](../../../lib/core/datatable/data/data-row.model.ts) objects is passed to your object when the `setRows` method is called:
|
||||
|
||||
```ts
|
||||
interface DataRow {
|
||||
isSelected: boolean;
|
||||
isDropTarget?: boolean;
|
||||
cssClass?: string;
|
||||
hasValue(key: string): boolean;
|
||||
getValue(key: string): any;
|
||||
}
|
||||
```
|
||||
|
||||
Each row contains a set of values. An item in the set is retrieved by passing its key (specified in the column description) to the `getValue` method. As a result, the row does not need to store its data items in any particular order or format as long as it can retrieve the right item using its key.
|
||||
|
||||
### ObjectDataTableAdapter
|
||||
|
||||
The DataTable library provides a implementation of [DataTableAdapter,](../../../lib/core/datatable/data/datatable-adapter.ts) called
|
||||
[`ObjectDataTableAdapter`](../../../lib/core/datatable/data/object-datatable-adapter.ts). This is a simple adapter that binds to object arrays and turns object fields into columns:
|
||||
|
||||
```ts
|
||||
let data = new ObjectDataTableAdapter(
|
||||
// Row data
|
||||
[
|
||||
{ id: 1, name: 'Name 1' },
|
||||
{ id: 2, name: 'Name 2' }
|
||||
],
|
||||
// Column schema
|
||||
[
|
||||
{
|
||||
type: 'text',
|
||||
key: 'id',
|
||||
title: 'Id',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
key: 'name',
|
||||
title: 'Name',
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
|
||||
If you don't specify the column array then the constructor will infer the layout of the columns from
|
||||
the structure of the row objects. The field names ('id' and 'name' in the example below) will be used
|
||||
for both the `key` and `title` properties of the columns:
|
||||
|
||||
```ts
|
||||
let data = [
|
||||
{ id: 2, name: 'abs' },
|
||||
{ id: 1, name: 'xyz' }
|
||||
];
|
||||
|
||||
let schema = ObjectDataTableAdapter.generateSchema(data);
|
||||
|
||||
/*Auto generated column schema:
|
||||
[
|
||||
{
|
||||
type: 'text',
|
||||
key: 'id',
|
||||
title: 'Id',
|
||||
sortable: false
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
key: 'name',
|
||||
title: 'Name',
|
||||
sortable: false
|
||||
}
|
||||
]
|
||||
*/
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [Datatable component](../components/datatable.component.md)
|
||||
- [Task list component](../../process-services/components/task-list.component.md)
|
||||
155
docs/core/interfaces/form-field-validator.interface.md
Normal file
155
docs/core/interfaces/form-field-validator.interface.md
Normal file
@@ -0,0 +1,155 @@
|
||||
---
|
||||
Title: FormFieldValidator interface
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
|
||||
# [FormFieldValidator interface](../../../lib/core/form/components/widgets/core/form-field-validator.ts "Defined in form-field-validator.ts")
|
||||
|
||||
Defines how the input fields of [`Form`](../../../lib/process-services/task-list/models/form.model.ts) and Task Details components are validated.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-form [fieldValidators]="fieldValidators"></adf-form>
|
||||
```
|
||||
|
||||
```ts
|
||||
import { FORM_FIELD_VALIDATORS } from '@alfresco/adf-core';
|
||||
|
||||
@Component({...})
|
||||
export class AppComponent {
|
||||
|
||||
fieldValidators = [
|
||||
// default set of ADF validators if needed
|
||||
...FORM_FIELD_VALIDATORS,
|
||||
|
||||
// custom validator
|
||||
new MyValidator()
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
export class MyValidator implements FormFieldValidator {
|
||||
|
||||
isSupported(field: FormFieldModel): boolean {
|
||||
// Check if this validation can be used with 'field'.
|
||||
}
|
||||
|
||||
validate(field: FormFieldModel): boolean {
|
||||
// Perform the validation.
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Methods
|
||||
|
||||
`isSupported(field: FormFieldModel): boolean;`
|
||||
Does this validator support the type of data used in `field`?
|
||||
|
||||
`validate(field: FormFieldModel): boolean;`
|
||||
Perform validation on `field`.
|
||||
|
||||
## Details
|
||||
|
||||
You can supply a set of validator objects for a form using its `fieldValidators` property.
|
||||
ADF will determine if a validator should be used with a given field by calling its
|
||||
`isSupported` method, passing the field's [`FormFieldModel`](../../core/models/form-field.model.md) as a parameter. If the validator
|
||||
does support the field then its `validate` method will be called on the [`FormFieldModel`](../../core/models/form-field.model.md)
|
||||
during the validation phase.
|
||||
|
||||
Several validator classes are predefined for you to use:
|
||||
|
||||
| Validator name | Checks that: |
|
||||
| -------------- | ------------ |
|
||||
| [`RequiredFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts) | Field is not left blank |
|
||||
| [`NumberFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts) | Field contains numeric data |
|
||||
| [`MinLengthFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts) | Field text has at least a minimum number of characters |
|
||||
| [`MaxLengthFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts) | Field text has no more than a maximum number of characters |
|
||||
| [`MinValueFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts) | Numeric field's value is greater than a lower limit |
|
||||
| [`MaxValueFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts) | Numeric field's vaue is less than an upper limit |
|
||||
| [`RegExFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts) | Field text matches a regular expression |
|
||||
| [`DateFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts) | Field contains a date in the correct format |
|
||||
| [`MinDateFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts) | Date within a field occurs after a certain starting point |
|
||||
| [`MaxDateFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts) | Date within a field occurs before a certain end point |
|
||||
|
||||
The `FORM_FIELD_VALIDATORS` array contains an instance of each of these classes. You can assign this to the `fieldValidators` property of a [`Form`](../../../lib/process-services/task-list/models/form.model.ts) or [Task Details component](../../process-services/components/task-details.component.md) to enable standard validation.
|
||||
|
||||
### Custom validators
|
||||
|
||||
You can implement your own custom validator classes if the standard set doesn't provide the
|
||||
features you need. For example, you could check for consistency between separate fields on
|
||||
the form (currency values adding up to a given total, say).
|
||||
|
||||
The `type` property of [`FormFieldModel`](../../core/models/form-field.model.md) is often used in the `isSupported` function, since
|
||||
validation methods typically apply only to specific types of data.
|
||||
The [`FormFieldTypes`](../../../lib/core/form/components/widgets/core/form-field-types.ts)
|
||||
class defines convenient constants for the type strings.
|
||||
|
||||
The validator in the example
|
||||
below simply checks that "admin" is not entered into a text field:
|
||||
|
||||
```ts
|
||||
import { FormFieldModel, FormFieldTypes, FormFieldValidator } from '@alfresco/adf-core';
|
||||
|
||||
export class DemoFieldValidator implements FormFieldValidator {
|
||||
|
||||
isSupported(field: FormFieldModel): boolean {
|
||||
return field && field.type === FormFieldTypes.TEXT;
|
||||
}
|
||||
|
||||
validate(field: FormFieldModel): boolean {
|
||||
if (this.isSupported(field)) {
|
||||
if (field.value && field.value.toLowerCase() === 'admin') {
|
||||
field.validationSummary = 'Sorry, the value cannot be "admin".';
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
You will usually want to extend the existing `FORM_FIELD_VALIDATORS` set rather than replace
|
||||
it entirely (although you can do this if necessary):
|
||||
|
||||
```ts
|
||||
import { DemoFieldValidator } from './demo-field-validator';
|
||||
|
||||
@Component({...})
|
||||
export class AppComponent {
|
||||
|
||||
fieldValidators = [
|
||||
...FORM_FIELD_VALIDATORS,
|
||||
new DemoFieldValidator()
|
||||
];
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
You can now use the 'fieldValidators' property of the [`Form`](../../../lib/process-services/task-list/models/form.model.ts) or Task Details components to assign your
|
||||
custom validator set:
|
||||
|
||||
```html
|
||||
<activiti-task-details
|
||||
[fieldValidators]="fieldValidators"
|
||||
taskId="123">
|
||||
</<activiti-task-details>
|
||||
|
||||
<!-- OR -->
|
||||
|
||||
<adf-form
|
||||
[fieldValidators]="fieldValidators"
|
||||
taskI="123">
|
||||
</adf-form>
|
||||
```
|
||||
|
||||
If you now run the application and try to enter "admin" in one of the text fields (either optional or required), you should see the following error:
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
- [Form field model](../models/form-field.model.md)
|
||||
- [Form component](../components/form.component.md)
|
||||
94
docs/core/interfaces/search-configuration.interface.md
Normal file
94
docs/core/interfaces/search-configuration.interface.md
Normal file
@@ -0,0 +1,94 @@
|
||||
---
|
||||
Title: Search Configuration interface
|
||||
Added: v2.1.0
|
||||
Status: Active
|
||||
---
|
||||
|
||||
# [Search Configuration interface](../../../lib/core/interface/search-configuration.interface.ts "Defined in search-configuration.interface.ts")
|
||||
|
||||
Provides fine control of parameters to a search.
|
||||
|
||||
## Methods
|
||||
|
||||
`generateQueryBody(searchTerm: string, maxResults: string, skipCount: string): QueryBody`<br/>
|
||||
Generates a QueryBody object with custom search parameters.
|
||||
|
||||
## Details
|
||||
|
||||
The interface defines a service that generates a custom
|
||||
[QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md)
|
||||
object. This object can then be supplied to a search operation to refine the search parameters.
|
||||
|
||||
A standard implementation, the
|
||||
[Search Configuration service](../services/search-configuration.service.md) is provided in the ADF Core library
|
||||
source. This works fine in most cases but if you need to, you can implement your own service, as
|
||||
described below.
|
||||
|
||||
### How to use the interface
|
||||
|
||||
1. Implement the service class
|
||||
|
||||
Create your own service class to implement the [`SearchConfigurationInterface`](../../core/interfaces/search-configuration.interface.md). This defines the
|
||||
the `generateQueryBody` method that returns the QueryBody object. See the
|
||||
[QueryBody](https://github.com/Alfresco/alfresco-js-api/blob/1.6.0/src/alfresco-search-rest-api/docs/QueryBody.md)
|
||||
page in the Alfresco JS API for further details about the options this object provides.
|
||||
|
||||
An example implementation is given below:
|
||||
|
||||
```ts
|
||||
import { QueryBody } from '@alfresco/js-api';
|
||||
import { SearchConfigurationInterface } from '@alfresco/adf-core';
|
||||
|
||||
export class TestSearchConfigurationService implements SearchConfigurationInterface {
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
public generateQueryBody(searchTerm: string, maxResults: string, skipCount: string): QueryBody {
|
||||
const defaultQueryBody: QueryBody = {
|
||||
query: {
|
||||
query: searchTerm ? `${searchTerm}* OR name:${searchTerm}*` : searchTerm
|
||||
},
|
||||
include: ['path', 'allowableOperations'],
|
||||
paging: {
|
||||
maxItems: maxResults,
|
||||
skipCount: skipCount
|
||||
},
|
||||
filterQueries: [
|
||||
{ query: "TYPE:'cm:folder'" },
|
||||
{ query: 'NOT cm:creator:System' }]
|
||||
};
|
||||
|
||||
return defaultQueryBody;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2. Provide your service class to the module
|
||||
|
||||
Once you have created your service class, you must inform the component to use it instead
|
||||
of the default one. This is easily done using the component providers:
|
||||
|
||||
```ts
|
||||
import { SearchService, SearchConfigurationService } from '@alfresco/adf-core';
|
||||
import { TestSearchConfigurationService } from './search-config-test.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-search-extended-component',
|
||||
templateUrl: './search-extended.component.html',
|
||||
styleUrls: ['./search-extended.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
providers: [
|
||||
{ provide: SearchConfigurationService, useClass: TestSearchConfigurationService },
|
||||
SearchService
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
You also need to add the [`SearchService`](../../core/services/search.service.md) as a provider to avoid overriding the module instance. This component will have his own instance of the [`SearchService`](../../core/services/search.service.md) that will use the class you have provided
|
||||
as its configuration.
|
||||
|
||||
## See also
|
||||
|
||||
- [Search component](../../content-services/search.component.md)
|
||||
- [Search configuration service](../services/search-configuration.service.md)
|
||||
Reference in New Issue
Block a user