mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-2526] Fixed interpolation marker issue in doc files (#3098)
* [ADF-2526] Test commit of a file with escape tags * [ADF-2526] Fixed interpolation marker issue in doc code samples
This commit is contained in:
committed by
Eugenio Romano
parent
f5d58178db
commit
347b2bb5e8
@@ -39,6 +39,8 @@ Searches items for supplied search terms.
|
|||||||
|
|
||||||
You have to add a template that will be shown when the results are loaded.
|
You have to add a template that will be shown when the results are loaded.
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-search [searchTerm]="searchTerm">
|
<adf-search [searchTerm]="searchTerm">
|
||||||
<ng-template let-result>
|
<ng-template let-result>
|
||||||
@@ -51,12 +53,16 @@ You have to add a template that will be shown when the results are loaded.
|
|||||||
</adf-search>
|
</adf-search>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
The results are provided via the [$implicit variable of angular2](https://angular.io/api/common/NgTemplateOutlet) and can be accessed via the sugar sintax 'let-yourChosenName'. As per example above the result will be something like :
|
The results are provided via the [$implicit variable of angular2](https://angular.io/api/common/NgTemplateOutlet) and can be accessed via the sugar sintax 'let-yourChosenName'. As per example above the result will be something like :
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
But you can define even a more complex template :
|
But you can define even a more complex template :
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-search class="adf-search-result-autocomplete"
|
<adf-search class="adf-search-result-autocomplete"
|
||||||
[rootNodeId]="liveSearchRoot"
|
[rootNodeId]="liveSearchRoot"
|
||||||
@@ -97,6 +103,8 @@ But you can define even a more complex template :
|
|||||||
</adf-search>
|
</adf-search>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
Which will look like :
|
Which will look like :
|
||||||
|
|
||||||

|

|
||||||
@@ -106,6 +114,8 @@ Which will look like :
|
|||||||
You can also attach your input field to the adf-search component via the trigger [searchAutocomplete]
|
You can also attach your input field to the adf-search component via the trigger [searchAutocomplete]
|
||||||
Yuo can do this by exporting the adf-search panel instance into a local template variable (here we called it "search"), and binding that variable to the input's searchAutocomplete property.
|
Yuo can do this by exporting the adf-search panel instance into a local template variable (here we called it "search"), and binding that variable to the input's searchAutocomplete property.
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<input type="text" [searchAutocomplete]="search">
|
<input type="text" [searchAutocomplete]="search">
|
||||||
|
|
||||||
@@ -118,6 +128,8 @@ Yuo can do this by exporting the adf-search panel instance into a local template
|
|||||||
</adf-search>
|
</adf-search>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
In this way it is possible to fetch the results from the word typed into the input text straight into the adf-search component via the custom template variable.
|
In this way it is possible to fetch the results from the word typed into the input text straight into the adf-search component via the custom template variable.
|
||||||
|
|
||||||
### Custom search configuration
|
### Custom search configuration
|
||||||
|
@@ -135,6 +135,8 @@ context.row.getValue('createdByUser.displayName')
|
|||||||
|
|
||||||
You may want using **row** api to get raw value access.
|
You may want using **row** api to get raw value access.
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
|
<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
|
||||||
<ng-template let-context="$implicit">
|
<ng-template let-context="$implicit">
|
||||||
@@ -144,10 +146,14 @@ You may want using **row** api to get raw value access.
|
|||||||
</data-column>
|
</data-column>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
Use **data** api to get values with post-processing, like datetime/icon conversion.\_
|
Use **data** api to get values with post-processing, like datetime/icon conversion.\_
|
||||||
|
|
||||||
In the Example below we will prepend `Hi!` to each file and folder name in the list:
|
In the Example below we will prepend `Hi!` to each file and folder name in the list:
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
|
<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
|
||||||
<ng-template let-entry="$implicit">
|
<ng-template let-entry="$implicit">
|
||||||
@@ -156,9 +162,13 @@ In the Example below we will prepend `Hi!` to each file and folder name in the l
|
|||||||
</data-column>
|
</data-column>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
In the Example below we will integrate the [adf-tag-node-list](../content-services/tag-node-list.component.md) component
|
In the Example below we will integrate the [adf-tag-node-list](../content-services/tag-node-list.component.md) component
|
||||||
with the document list.
|
with the document list.
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<data-column
|
<data-column
|
||||||
title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
|
title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
|
||||||
@@ -171,6 +181,8 @@ with the document list.
|
|||||||
</data-column>
|
</data-column>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
### Styling Techniques
|
### Styling Techniques
|
||||||
|
@@ -8,12 +8,16 @@ Converts a number of bytes to the equivalent in KB, MB, etc.
|
|||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```HTML
|
```HTML
|
||||||
<div>
|
<div>
|
||||||
File Size: {{ sizeInBytes | adfFileSize:"2" }}
|
File Size: {{ sizeInBytes | adfFileSize:"2" }}
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
The pipe chooses the largest unit that is less than the total number of bytes and
|
The pipe chooses the largest unit that is less than the total number of bytes and
|
||||||
|
@@ -8,12 +8,16 @@ Retrieves an icon to represent a MIME type.
|
|||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```HTML
|
```HTML
|
||||||
<div>
|
<div>
|
||||||
<img src='{{ "image/jpeg" | adfMimeTypeIcon }}' />
|
<img src='{{ "image/jpeg" | adfMimeTypeIcon }}' />
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
The pipe takes a MIME type as input and returns the URL of an SVG file that
|
The pipe takes a MIME type as input and returns the URL of an SVG file that
|
||||||
|
@@ -51,6 +51,8 @@ export class MyComponent {
|
|||||||
The `NodeFavoriteDirective` instance can be bound to a template variable through **adfFavorite** reference,
|
The `NodeFavoriteDirective` instance can be bound to a template variable through **adfFavorite** reference,
|
||||||
which provides a method to help further style the element.
|
which provides a method to help further style the element.
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<button
|
<button
|
||||||
mat-menu-item
|
mat-menu-item
|
||||||
@@ -63,6 +65,8 @@ which provides a method to help further style the element.
|
|||||||
</button>
|
</button>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
The directive performs as follows:
|
The directive performs as follows:
|
||||||
|
|
||||||
- if there are no favorite nodes in the selection, then all are marked as favorites
|
- if there are no favorite nodes in the selection, then all are marked as favorites
|
||||||
|
@@ -8,6 +8,8 @@ Formats the tooltip for a Node.
|
|||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<data-column
|
<data-column
|
||||||
key="name"
|
key="name"
|
||||||
@@ -18,6 +20,8 @@ Formats the tooltip for a Node.
|
|||||||
</data-column>
|
</data-column>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
The tooltip is formatted according to the following rules:
|
The tooltip is formatted according to the following rules:
|
||||||
|
@@ -8,12 +8,16 @@ Adds highlighting to words or sections of text that match a search string.
|
|||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```HTML
|
```HTML
|
||||||
<div>
|
<div>
|
||||||
Some rude words have been detected in your summary: {{ summary | highlight:rudeWordList }}
|
Some rude words have been detected in your summary: {{ summary | highlight:rudeWordList }}
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
The pipe's parameter is a string to search for in the text. Any occurrences of the string will
|
The pipe's parameter is a string to search for in the text. Any occurrences of the string will
|
||||||
|
@@ -8,12 +8,16 @@ Converts a recent past date into a number of days ago.
|
|||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```HTML
|
```HTML
|
||||||
<div>
|
<div>
|
||||||
Last modified: {{ date | adfTimeAgo }}
|
Last modified: {{ date | adfTimeAgo }}
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
The pipe finds the difference between the input date and the current date. If it
|
The pipe finds the difference between the input date and the current date. If it
|
||||||
|
@@ -30,8 +30,12 @@ In the `get` and `instant` methods, the `interpolateParams` parameter supplies
|
|||||||
interpolation strings for keys that include them. For example, in the standard
|
interpolation strings for keys that include them. For example, in the standard
|
||||||
`en.json`, the `CORE.PAGINATION.ITEMS_RANGE` key is defined as:
|
`en.json`, the `CORE.PAGINATION.ITEMS_RANGE` key is defined as:
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
"Showing {{ range }} of {{ total }}"
|
"Showing {{ range }} of {{ total }}"
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
The `range` and `total` interpolations are supplied to the `get` method using
|
The `range` and `total` interpolations are supplied to the `get` method using
|
||||||
an object with fields of the same name:
|
an object with fields of the same name:
|
||||||
|
|
||||||
|
@@ -8,12 +8,16 @@ Takes the name fields of a UserProcessModel object and extracts and formats the
|
|||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```HTML
|
```HTML
|
||||||
<div>
|
<div>
|
||||||
Project Leader: {{ user | usernameInitials:"initialsClass" }}
|
Project Leader: {{ user | usernameInitials:"initialsClass" }}
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
The pipe gets the initial characters of the user's first and last names and
|
The pipe gets the initial characters of the user's first and last names and
|
||||||
|
@@ -43,6 +43,8 @@ export class SomeComponent implements OnInit {
|
|||||||
|
|
||||||
In the component template use the people list component:
|
In the component template use the people list component:
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-people-list
|
<adf-people-list
|
||||||
[users]="people"
|
[users]="people"
|
||||||
@@ -64,6 +66,8 @@ In the component template use the people list component:
|
|||||||
</adf-people-list>
|
</adf-people-list>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
Note that the people list component is based on the
|
Note that the people list component is based on the
|
||||||
[Datatable component](../core/datatable.component.md).
|
[Datatable component](../core/datatable.component.md).
|
||||||
|
|
||||||
|
@@ -28,6 +28,8 @@ Searches users/people.
|
|||||||
|
|
||||||
## Details
|
## Details
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-people-search
|
<adf-people-search
|
||||||
(searchPeople)="searchUser($event)"
|
(searchPeople)="searchUser($event)"
|
||||||
@@ -38,3 +40,5 @@ Searches users/people.
|
|||||||
<action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
|
<action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
|
||||||
</adf-people-search>
|
</adf-people-search>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
@@ -59,6 +59,8 @@ export class MyCustomProcessAttachmentComponent {
|
|||||||
|
|
||||||
If we want user to be able to upload attachments for empty lists, We can wrap our component with upload drag area component. In that case, We should also pass a custom _no content template_ as shown below with our component urging the user to drag files to upload whenever the list is empty.
|
If we want user to be able to upload attachments for empty lists, We can wrap our component with upload drag area component. In that case, We should also pass a custom _no content template_ as shown below with our component urging the user to drag files to upload whenever the list is empty.
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-upload-drag-area
|
<adf-upload-drag-area
|
||||||
[parentId]="YOUR_PROCESS_ID"
|
[parentId]="YOUR_PROCESS_ID"
|
||||||
@@ -78,6 +80,8 @@ If we want user to be able to upload attachments for empty lists, We can wrap ou
|
|||||||
</adf-upload-drag-area>
|
</adf-upload-drag-area>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
If the List is empty, the custom no-content template we passed is displayed.
|
If the List is empty, the custom no-content template we passed is displayed.
|
||||||
|
|
||||||

|

|
||||||
|
@@ -73,6 +73,8 @@ You can also use both HTML-based and app.config.json custom schema declaration a
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-process-instance-list
|
<adf-process-instance-list
|
||||||
[appId]="'1'"
|
[appId]="'1'"
|
||||||
@@ -87,6 +89,8 @@ You can also use both HTML-based and app.config.json custom schema declaration a
|
|||||||
</adf-process-instance-list>
|
</adf-process-instance-list>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
### Pagination strategy
|
### Pagination strategy
|
||||||
|
|
||||||
adf-process-instance-list also supports pagination and the same can be used as shown below.
|
adf-process-instance-list also supports pagination and the same can be used as shown below.
|
||||||
|
@@ -46,6 +46,8 @@ to enable the user to upload attachments for empty lists. When you do this, you
|
|||||||
a custom _no content template_ as shown below. The component invites the user to drag files to
|
a custom _no content template_ as shown below. The component invites the user to drag files to
|
||||||
upload whenever the list is empty.
|
upload whenever the list is empty.
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-upload-drag-area
|
<adf-upload-drag-area
|
||||||
[parentId]="YOUR_TASK_ID"
|
[parentId]="YOUR_TASK_ID"
|
||||||
@@ -63,6 +65,8 @@ upload whenever the list is empty.
|
|||||||
</adf-upload-drag-area>
|
</adf-upload-drag-area>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { UploadService } from '@alfresco/adf-core';
|
import { UploadService } from '@alfresco/adf-core';
|
||||||
import { TaskUploadService } from '@alfresco/adf-process-services';
|
import { TaskUploadService } from '@alfresco/adf-process-services';
|
||||||
|
@@ -151,6 +151,8 @@ You can use an HTML-based schema and an `app.config.json` custom schema declarat
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<adf-tasklist
|
<adf-tasklist
|
||||||
[appId]="'1'"
|
[appId]="'1'"
|
||||||
@@ -165,6 +167,8 @@ You can use an HTML-based schema and an `app.config.json` custom schema declarat
|
|||||||
</adf-tasklist>
|
</adf-tasklist>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
### Pagination strategy
|
### Pagination strategy
|
||||||
|
|
||||||
The Tasklist also supports pagination as shown in the example below:
|
The Tasklist also supports pagination as shown in the example below:
|
||||||
|
@@ -101,10 +101,14 @@ export class HomeComponent implements OnInit {
|
|||||||
|
|
||||||
...with very simple corresponding HTML:
|
...with very simple corresponding HTML:
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
{{translatedText}}
|
{{translatedText}}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
In the browser, this is displayed as:
|
In the browser, this is displayed as:
|
||||||
|
|
||||||

|

|
||||||
@@ -139,8 +143,12 @@ corresponding text. For example, the following will display the
|
|||||||
"Start Form" text as above but without any code or variables in the
|
"Start Form" text as above but without any code or variables in the
|
||||||
component's `.ts` file:
|
component's `.ts` file:
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
{{ "FORM.START_FORM.TITLE" | translate }}
|
{{ "FORM.START_FORM.TITLE" | translate }}
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
## Adding your own messages
|
## Adding your own messages
|
||||||
|
|
||||||
The built-in translations certainly won't cover everything you will need for
|
The built-in translations certainly won't cover everything you will need for
|
||||||
@@ -156,6 +164,8 @@ string at a specified position within a message). This is very useful for
|
|||||||
messages whose content can change at runtime. For example, in the built-in
|
messages whose content can change at runtime. For example, in the built-in
|
||||||
`en.json` there is the `CORE.PAGINATION.ITEMS_RANGE` key:
|
`en.json` there is the `CORE.PAGINATION.ITEMS_RANGE` key:
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```json
|
```json
|
||||||
...
|
...
|
||||||
"CORE": {
|
"CORE": {
|
||||||
@@ -168,6 +178,8 @@ messages whose content can change at runtime. For example, in the built-in
|
|||||||
...
|
...
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
The sections in curly braces are _interpolation variables_ that you supply
|
The sections in curly braces are _interpolation variables_ that you supply
|
||||||
at runtime. You can specify them by passing an extra parameter to
|
at runtime. You can specify them by passing an extra parameter to
|
||||||
`TranslationService.get`; this is an object whose properties have the same
|
`TranslationService.get`; this is an object whose properties have the same
|
||||||
@@ -187,8 +199,12 @@ this.trans.get(
|
|||||||
|
|
||||||
You can use interpolations with the `translate` pipe in a similar way:
|
You can use interpolations with the `translate` pipe in a similar way:
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
{{ "CORE.PAGINATION.ITEMS_RANGE" | translate: { range: "1..10", total: "122"} }}
|
{{ "CORE.PAGINATION.ITEMS_RANGE" | translate: { range: "1..10", total: "122"} }}
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
## Selecting the display language
|
## Selecting the display language
|
||||||
|
|
||||||
ADF provides a [Language Menu component](../core/language-menu.component.md) that
|
ADF provides a [Language Menu component](../core/language-menu.component.md) that
|
||||||
|
@@ -72,6 +72,8 @@ So once rendered our component will automatically have access to entire set of n
|
|||||||
|
|
||||||
For demonstration purposes we are going to display several icons if underlying node has version `2.0`, and just a plain text version value for all other versions.
|
For demonstration purposes we are going to display several icons if underlying node has version `2.0`, and just a plain text version value for all other versions.
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div *ngIf="metadata">
|
<div *ngIf="metadata">
|
||||||
<ng-container *ngIf="metadata['cm:versionLabel'] === '2.0'">
|
<ng-container *ngIf="metadata['cm:versionLabel'] === '2.0'">
|
||||||
@@ -85,6 +87,8 @@ For demonstration purposes we are going to display several icons if underlying n
|
|||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
Note: For a list of the icons that can be used with `<mat-icon>` component please refer to this resource: [material.io/icons](https://material.io/icons/)
|
Note: For a list of the icons that can be used with `<mat-icon>` component please refer to this resource: [material.io/icons](https://material.io/icons/)
|
||||||
|
|
||||||
## Testing component
|
## Testing component
|
||||||
@@ -106,6 +110,8 @@ You can see on the screenshot above that only files with version `2.0` got extra
|
|||||||
|
|
||||||
The full source code of the component can be found below:
|
The full source code of the component can be found below:
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { Component, Input } from '@angular/core';
|
import { Component, Input } from '@angular/core';
|
||||||
|
|
||||||
@@ -132,4 +138,6 @@ export class MetadataIconsComponent {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
You can use this idea to build more complex indication experience based on the actual metadata state.
|
You can use this idea to build more complex indication experience based on the actual metadata state.
|
@@ -40,6 +40,8 @@ This value will be used as field type when form gets rendered.
|
|||||||
|
|
||||||
This should be a valid Angular component template that you want to render in `<activiti-form>` component:
|
This should be a valid Angular component template that you want to render in `<activiti-form>` component:
|
||||||
|
|
||||||
|
<!-- {% raw %} -->
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div>
|
<div>
|
||||||
<div>Angular Component</div>
|
<div>Angular Component</div>
|
||||||
@@ -47,6 +49,8 @@ This should be a valid Angular component template that you want to render in `<a
|
|||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<!-- {% endraw %} -->
|
||||||
|
|
||||||
## Form editor template
|
## Form editor template
|
||||||
|
|
||||||
This can be any html layout to be rendered as a component placeholder in Activiti Form Designer.
|
This can be any html layout to be rendered as a component placeholder in Activiti Form Designer.
|
||||||
|
Reference in New Issue
Block a user