```
+
+
## Details
The tooltip is formatted according to the following rules:
diff --git a/docs/core/text-highlight.pipe.md b/docs/core/text-highlight.pipe.md
index 6e9004909d..0ad14ad646 100644
--- a/docs/core/text-highlight.pipe.md
+++ b/docs/core/text-highlight.pipe.md
@@ -8,12 +8,16 @@ Adds highlighting to words or sections of text that match a search string.
## Basic Usage
+
+
```HTML
Some rude words have been detected in your summary: {{ summary | highlight:rudeWordList }}
```
+
+
## Details
The pipe's parameter is a string to search for in the text. Any occurrences of the string will
diff --git a/docs/core/time-ago.pipe.md b/docs/core/time-ago.pipe.md
index c7766ba3c8..f67dbf0383 100644
--- a/docs/core/time-ago.pipe.md
+++ b/docs/core/time-ago.pipe.md
@@ -8,12 +8,16 @@ Converts a recent past date into a number of days ago.
## Basic Usage
+
+
```HTML
Last modified: {{ date | adfTimeAgo }}
```
+
+
## Details
The pipe finds the difference between the input date and the current date. If it
diff --git a/docs/core/translation.service.md b/docs/core/translation.service.md
index fe6e2660ea..39135181af 100644
--- a/docs/core/translation.service.md
+++ b/docs/core/translation.service.md
@@ -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
`en.json`, the `CORE.PAGINATION.ITEMS_RANGE` key is defined as:
+
+
"Showing {{ range }} of {{ total }}"
+
+
The `range` and `total` interpolations are supplied to the `get` method using
an object with fields of the same name:
diff --git a/docs/core/user-initial.pipe.md b/docs/core/user-initial.pipe.md
index 8d9167ec79..f74559ea3e 100644
--- a/docs/core/user-initial.pipe.md
+++ b/docs/core/user-initial.pipe.md
@@ -8,12 +8,16 @@ Takes the name fields of a UserProcessModel object and extracts and formats the
## Basic Usage
+
+
```HTML
Project Leader: {{ user | usernameInitials:"initialsClass" }}
```
+
+
## Details
The pipe gets the initial characters of the user's first and last names and
diff --git a/docs/process-services/people-list.component.md b/docs/process-services/people-list.component.md
index 60e5ed564c..366fb9650b 100644
--- a/docs/process-services/people-list.component.md
+++ b/docs/process-services/people-list.component.md
@@ -43,6 +43,8 @@ export class SomeComponent implements OnInit {
In the component template use the people list component:
+
+
```html
```
+
+
Note that the people list component is based on the
[Datatable component](../core/datatable.component.md).
diff --git a/docs/process-services/people-search.component.md b/docs/process-services/people-search.component.md
index 03f2300561..86594f3dae 100644
--- a/docs/process-services/people-search.component.md
+++ b/docs/process-services/people-search.component.md
@@ -28,6 +28,8 @@ Searches users/people.
## Details
+
+
```html
{{ 'PEOPLE.ADD_USER' | translate }}
```
+
+
diff --git a/docs/process-services/process-attachment-list.component.md b/docs/process-services/process-attachment-list.component.md
index e047154cc4..24173011c7 100644
--- a/docs/process-services/process-attachment-list.component.md
+++ b/docs/process-services/process-attachment-list.component.md
@@ -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.
+
+
```html
```
+
+
If the List is empty, the custom no-content template we passed is displayed.
diff --git a/docs/process-services/process-list.component.md b/docs/process-services/process-list.component.md
index 3a17877fef..bdeb482bbb 100644
--- a/docs/process-services/process-list.component.md
+++ b/docs/process-services/process-list.component.md
@@ -73,6 +73,8 @@ You can also use both HTML-based and app.config.json custom schema declaration a
}
```
+
+
```html
```
+
+
### Pagination strategy
adf-process-instance-list also supports pagination and the same can be used as shown below.
diff --git a/docs/process-services/task-attachment-list.component.md b/docs/process-services/task-attachment-list.component.md
index c90b2349e6..f1db8014ba 100644
--- a/docs/process-services/task-attachment-list.component.md
+++ b/docs/process-services/task-attachment-list.component.md
@@ -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
upload whenever the list is empty.
+
+
```html
```
+
+
```ts
import { UploadService } from '@alfresco/adf-core';
import { TaskUploadService } from '@alfresco/adf-process-services';
diff --git a/docs/process-services/task-list.component.md b/docs/process-services/task-list.component.md
index ba0c4f72b0..4f15fb2149 100644
--- a/docs/process-services/task-list.component.md
+++ b/docs/process-services/task-list.component.md
@@ -151,6 +151,8 @@ You can use an HTML-based schema and an `app.config.json` custom schema declarat
}
```
+
+
```html
```
+
+
### Pagination strategy
The Tasklist also supports pagination as shown in the example below:
diff --git a/docs/user-guide/internationalization.md b/docs/user-guide/internationalization.md
index 075c0ae19e..5517ad19e7 100644
--- a/docs/user-guide/internationalization.md
+++ b/docs/user-guide/internationalization.md
@@ -101,10 +101,14 @@ export class HomeComponent implements OnInit {
...with very simple corresponding HTML:
+
+
```html
{{translatedText}}
```
+
+
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
component's `.ts` file:
+
+
{{ "FORM.START_FORM.TITLE" | translate }}
+
+
## Adding your own messages
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
`en.json` there is the `CORE.PAGINATION.ITEMS_RANGE` key:
+
+
```json
...
"CORE": {
@@ -168,6 +178,8 @@ messages whose content can change at runtime. For example, in the built-in
...
```
+
+
The sections in curly braces are _interpolation variables_ that you supply
at runtime. You can specify them by passing an extra parameter to
`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:
+
+
{{ "CORE.PAGINATION.ITEMS_RANGE" | translate: { range: "1..10", total: "122"} }}
+
+
## Selecting the display language
ADF provides a [Language Menu component](../core/language-menu.component.md) that
diff --git a/docs/user-guide/metadata-indicators.md b/docs/user-guide/metadata-indicators.md
index 58b3a4d0e8..8720a41e5d 100644
--- a/docs/user-guide/metadata-indicators.md
+++ b/docs/user-guide/metadata-indicators.md
@@ -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.
+
+
```html
@@ -85,6 +87,8 @@ For demonstration purposes we are going to display several icons if underlying n
```
+
+
Note: For a list of the icons that can be used with `` component please refer to this resource: [material.io/icons](https://material.io/icons/)
## 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:
+
+
```ts
import { Component, Input } from '@angular/core';
@@ -132,4 +138,6 @@ export class MetadataIconsComponent {
}
```
+
+
You can use this idea to build more complex indication experience based on the actual metadata state.
\ No newline at end of file
diff --git a/docs/user-guide/stencils.md b/docs/user-guide/stencils.md
index 1feb9264fa..60e9d044f2 100644
--- a/docs/user-guide/stencils.md
+++ b/docs/user-guide/stencils.md
@@ -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 `` component:
+
+
```html