Merge pull request #3494 from abpframework/docs/insertion

Added DomInsertionService and ContentStrategy documentations

docs/en/UI/Angular/Content-Security-Strategy.md

@@ -8,12 +8,20 @@
 ## API
 
 
-### constructor(public nonce?: string)
+### constructor
+
+```js
+constructor(public nonce?: string)
+```
 
 - `nonce` enables whitelisting inline script or styles in order to avoid using `unsafe-inline` in [script-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script) and [style-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#Unsafe_inline_styles) directives.
 
 
-### applyCSP(element: HTMLScriptElement | HTMLStyleElement): void
+### applyCSP
+
+```js
+applyCSP(element: HTMLScriptElement | HTMLStyleElement): void
+```
 
 This method maps the aforementioned properties to the given `element`.
 
@@ -39,18 +47,28 @@ This method maps the aforementioned properties to the given `element`.
 Predefined content security strategies are accessible via `CONTENT_SECURITY_STRATEGY` constant.
 
 
-### Loose(nonce: string)
+### Loose
+
+```js
+CONTENT_SECURITY_STRATEGY.Loose(nonce: string)
+```
 
 `nonce` will be set.
 
 
-### None()
+### None
+
+```js
+CONTENT_SECURITY_STRATEGY.None()
+```
 
 Nothing will be done.
 
 
 
 
-## What's Next?
+## See Also
+
+- [DomInsertionService](./Dom-Insertion-Service.md)
+- [ContentStrategy](./Content-Strategy.md)
 
-TODO: Place new ContentStrategy link here.

docs/en/UI/Angular/Content-Strategy.md

@@ -0,0 +1,95 @@
+# ContentStrategy
+
+`ContentStrategy` is an abstract class exposed by @abp/ng.core package. It helps you create inline scripts or styles.
+
+## API
+
+
+### constructor
+
+```js
+constructor(
+  public content: string,
+  protected domStrategy?: DomStrategy,
+  protected contentSecurityStrategy?: ContentSecurityStrategy
+)
+```
+
+- `content` is set to `<script>` and `<style>` elements as `textContent` property.
+- `domStrategy` is the `DomStrategy` that will be used when inserting the created element. (_default: AppendToHead_)
+- `contentSecurityStrategy` is the `ContentSecurityStrategy` that will be used on the created element before inserting it. (_default: None_)
+
+Please refer to [DomStrategy](./Dom-Strategy.md) and [ContentSecurityStrategy](./Content-Security-Strategy.md) documentation for their usage.
+
+
+### createElement
+
+```js
+createElement(): HTMLScriptElement | HTMLStyleElement
+```
+
+This method creates and returns a `<script>` or `<style>` element with `content` set as `textContent`.
+
+
+### insertElement
+
+```js
+insertElement(): void
+```
+
+This method creates and inserts a `<script>` or `<style>` element.
+
+
+## ScriptContentStrategy
+
+`ScriptContentStrategy` is a class that extends `ContentStrategy`. It lets you **insert a `<script>` element to the DOM**.
+
+## StyleContentStrategy
+
+`StyleContentStrategy` is a class that extends `ContentStrategy`. It lets you **insert a `<style>` element to the DOM**.
+
+
+## Predefined Content Strategies
+
+Predefined content strategies are accessible via `CONTENT_STRATEGY` constant.
+
+
+### AppendScriptToBody
+
+```js
+CONTENT_STRATEGY.AppendScriptToBody(content: string)
+```
+
+Creates a `<script>` element with the given content and places it at the **end** of `<body>` tag in the document.
+
+
+### AppendScriptToHead
+
+```js
+CONTENT_STRATEGY.AppendScriptToHead(content: string)
+```
+
+Creates a `<script>` element with the given content and places it at the **end** of `<head>` tag in the document.
+
+
+### AppendStyleToHead
+
+```js
+CONTENT_STRATEGY.AppendStyleToHead(content: string)
+```
+
+Creates a `<style>` element with the given content and places it at the **end** of `<head>` tag in the document.
+
+
+### PrependStyleToHead
+
+```js
+CONTENT_STRATEGY.PrependStyleToHead(content: string)
+```
+
+Creates a `<style>` element with the given content and places it at the **beginning** of `<head>` tag in the document.
+
+
+## See Also
+
+- [DomInsertionService](./Dom-Insertion-Service.md)

docs/en/UI/Angular/Cross-Origin-Strategy.md

@@ -6,13 +6,24 @@
 ## API
 
 
-### constructor(public crossorigin: 'anonymous' | 'use-credentials', public integrity?: string)
+### constructor
+
+```js
+constructor(
+  public crossorigin: 'anonymous' | 'use-credentials',
+  public integrity?: string
+)
+```
 
 - `crossorigin` is mapped to [the HTML attribute with the same name](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).
 - `integrity` is a hash for validating a remote resource. Its use is explained [here](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
 
 
-### setCrossOrigin(element: HTMLElement): void
+### setCrossOrigin
+
+```js
+setCrossOrigin(element: HTMLElement): void
+```
 
 This method maps the aforementioned properties to the given `element`.
 
@@ -24,12 +35,20 @@ This method maps the aforementioned properties to the given `element`.
 Predefined cross-origin strategies are accessible via `CROSS_ORIGIN_STRATEGY` constant.
 
 
-### Anonymous(integrity?: string)
+### Anonymous
+
+```js
+CROSS_ORIGIN_STRATEGY.Anonymous(integrity?: string)
+```
 
 `crossorigin` will be set as `"anonymous"` and `integrity` is optional.
 
 
-### UseCredentials(integrity?: string)
+### UseCredentials
+
+```js
+CROSS_ORIGIN_STRATEGY.UseCredentials(integrity?: string)
+```
 
 `crossorigin` will be set as `"use-credentials"` and `integrity` is optional.
 

docs/en/UI/Angular/Dom-Insertion-Service.md

@@ -0,0 +1,91 @@
+# How to Insert Scripts and Styles
+
+You can use the `DomInsertionService` in @abp/ng.core package in order to insert scripts and styles in an easy and explicit way.
+
+
+## Getting Started
+
+You do not have to provide the `DomInsertionService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services.
+
+```js
+import { DomInsertionService } from '@abp/ng.core';
+
+@Component({
+  /* class metadata here */
+})
+class DemoComponent {
+  constructor(private domInsertionService: DomInsertionService) {}
+}
+```
+
+## Usage
+
+You can use the `insertContent` method of `DomInsertionService` to create a `<script>` or `<style>` element with given content in the DOM at the desired position.
+
+
+### How to Insert Scripts
+
+The first parameter of `insertContent` method expects a `ContentStrategy`. If you pass a `ScriptContentStrategy` instance, the `DomInsertionService` will create a `<script>` element with given `content` and place it in the designated DOM position.
+
+```js
+import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
+
+@Component({
+  /* class metadata here */
+})
+class DemoComponent {
+  constructor(private domInsertionService: DomInsertionService) {}
+
+  ngOnInit() {
+    this.domInsertionService.insertContent(
+      CONTENT_STRATEGY.AppendScriptToBody('alert()')
+    );
+  }
+}
+```
+
+In the example above, `<script>alert()</script>` element will place at the **end** of `<body>`.
+
+Please refer to [ContentStrategy](./Content-Strategy.md) to see all available content strategies and how you can build your own content strategy.
+
+
+### How to Insert Styles
+
+If you pass a `StyleContentStrategy` instance as the first parameter of `insertContent` method, the `DomInsertionService` will create a `<style>` element with given `content` and place it in the designated DOM position.
+
+```js
+import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
+
+@Component({
+  /* class metadata here */
+})
+class DemoComponent {
+  constructor(private domInsertionService: DomInsertionService) {}
+
+  ngOnInit() {
+    this.domInsertionService.insertContent(
+      CONTENT_STRATEGY.AppendStyleToHead('body {margin: 0;}')
+    );
+  }
+}
+```
+
+In the example above, `<style>body {margin: 0;}</style>` element will place at the **end** of `<head>`.
+
+Please refer to [ContentStrategy](./Content-Strategy.md) to see all available content strategies and how you can build your own content strategy.
+
+
+## API
+
+### insertContent
+
+```js
+insertContent(strategy: ContentStrategy): void
+```
+
+`strategy` parameter is the primary focus here and is explained above.
+
+
+## What's Next?
+
+- [TrackByService](./Track-By-Service.md)

docs/en/UI/Angular/Dom-Strategy.md

@@ -6,16 +6,26 @@
 ## API
 
 
-### constructor(public target?: HTMLElement, public position?: InsertPosition)
+### constructor
+
+```js
+constructor(
+  public target?: HTMLElement,
+  public position?: InsertPosition
+)
+```
 
 - `target` is an HTMLElement (_default: document.head_).
 - `position` defines where the created element will be placed. All possible values of `position` can be found [here](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement) (_default: 'beforeend'_).
 
 
-### insertElement(element: HTMLElement): void
+### insertElement
 
-This method inserts given `element` to `target` based on the `position`.
+```js
+insertElement(element: HTMLElement): void
+```
 
+This method inserts given `element` to `target` based on the `position`.
 
 
 
@@ -24,35 +34,56 @@ This method inserts given `element` to `target` based on the `position`.
 Predefined dom strategies are accessible via `DOM_STRATEGY` constant.
 
 
-### AppendToBody()
+### AppendToBody
+
+```js
+DOM_STRATEGY.AppendToBody()
+```
 
 `insertElement` will place the given `element` at the end of `<body>`.
 
 
-### AppendToHead()
+### AppendToHead
+
+```js
+DOM_STRATEGY.AppendToHead()
+```
 
 `insertElement` will place the given `element` at the end of `<head>`.
 
 
-### PrependToHead()
+### PrependToHead
+
+```js
+DOM_STRATEGY.PrependToHead()
+```
 
 `insertElement` will place the given `element` at the beginning of `<head>`.
 
 
-### AfterElement(target: HTMLElement)
+### AfterElement
+
+```js
+DOM_STRATEGY.AfterElement(target: HTMLElement)
+```
 
 `insertElement` will place the given `element` after (as a sibling to) the `target`.
 
 
-### BeforeElement(target: HTMLElement)
+### BeforeElement
+
+```js
+DOM_STRATEGY.BeforeElement(target: HTMLElement)
+```
 
 `insertElement` will place the given `element` before (as a sibling to) the `target`.
 
 
 
 
-## What's Next?
+## See Also
 
+- [DomInsertionService](./Dom-Insertion-Service.md)
+- [LazyLoadService](./Lazy-Load-Service.md)
 - [LoadingStrategy](./Loading-Strategy.md)
-
+- [ContentStrategy](./Content-Strategy.md)
-TODO: Place new InsertionStrategy link here.

docs/en/UI/Angular/Lazy-Load-Service.md

@@ -185,13 +185,21 @@ In this example, the second file needs the first one to be loaded beforehand. Rx
 
 
 
-### loaded: Set<string>
+### loaded
+
+```js
+loaded: Set<string>
+```
 
 All previously loaded paths are available via this property. It is a simple [JavaScript Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set).
 
 
 
-### load(strategy: LoadingStrategy, retryTimes?: number, retryDelay?: number): Observable<Event>
+### load
+
+```js
+load(strategy: LoadingStrategy, retryTimes?: number, retryDelay?: number): Observable<Event>
+```
 
 - `strategy` parameter is the primary focus here and is explained above.
 - `retryTimes` defines how many times the loading will be tried again before fail (_default: 2_).
@@ -202,4 +210,4 @@ All previously loaded paths are available via this property. It is a simple [Jav
 
 ## What's Next?
 
-- [TrackByService](./Track-By-Service.md)
+- [DomInsertionService](./Dom-Insertion-Service.md)

docs/en/UI/Angular/Loading-Strategy.md

@@ -7,8 +7,15 @@
 
 ## API
 
+### constructor
 
-### constructor(public path: string, protected domStrategy?: DomStrategy, protected crossOriginStrategy?: CrossOriginStrategy)
+```js
+constructor(
+  public path: string,
+  protected domStrategy?: DomStrategy,
+  protected crossOriginStrategy?: CrossOriginStrategy
+)
+```
 
 - `path` is set to `<script>` elements as `src` and `<link>` elements as `href` attribute.
 - `domStrategy` is the `DomStrategy` that will be used when inserting the created element. (_default: AppendToHead_)
@@ -17,12 +24,20 @@
 Please refer to [DomStrategy](./Dom-Strategy.md) and [CrossOriginStrategy](./Cross-Origin-Strategy.md) documentation for their usage.
 
 
-### createElement(): HTMLScriptElement | HTMLLinkElement
+### createElement
+
+```js
+createElement(): HTMLScriptElement | HTMLLinkElement
+```
 
 This method creates and returns a `<script>` or `<link>` element with `path` set as `src` or `href`.
 
 
-### createStream(): Observable<Event>
+### createStream
+
+```js
+createStream(): Observable<Event>
+```
 
 This method creates and returns an observable stream that emits on success and throws on error.
 
@@ -45,33 +60,51 @@ This method creates and returns an observable stream that emits on success and t
 Predefined content security strategies are accessible via `LOADING_STRATEGY` constant.
 
 
-### AppendAnonymousScriptToHead(src: string, integrity?: string)
+### AppendAnonymousScriptToHead
+
+```js
+LOADING_STRATEGY.AppendAnonymousScriptToHead(src: string, integrity?: string)
+```
 
 Sets given paremeters and `crossorigin="anonymous"` as attributes of created `<script>` element and places it at the **end** of `<head>` tag in the document.
 
 
-### PrependAnonymousScriptToHead(src: string, integrity?: string)
+### PrependAnonymousScriptToHead
+
+```js
+LOADING_STRATEGY.PrependAnonymousScriptToHead(src: string, integrity?: string)
+```
 
 Sets given paremeters and `crossorigin="anonymous"` as attributes of created `<script>` element and places it at the **beginning** of `<head>` tag in the document.
 
 
-### AppendAnonymousScriptToBody(src: string, integrity?: string)
+### AppendAnonymousScriptToBody
+
+```js
+LOADING_STRATEGY.AppendAnonymousScriptToBody(src: string, integrity?: string)
+```
 
 Sets given paremeters and `crossorigin="anonymous"` as attributes of created `<script>` element and places it at the **end** of `<body>` tag in the document.
 
 
-### AppendAnonymousStyleToHead(href: string, integrity?: string)
+### AppendAnonymousStyleToHead
 
-Sets given paremeters and `crossorigin="anonymous"` as attributes of created `<style>` element and places it at the **end** of `<head>` tag in the document.
+```js
+LOADING_STRATEGY.AppendAnonymousStyleToHead(href: string, integrity?: string)
+```
 
+Sets given paremeters and `crossorigin="anonymous"` as attributes of created `<style>` element and places it at the **end** of `<head>` tag in the document.
 
-### PrependAnonymousStyleToHead(href: string, integrity?: string)
 
-Sets given paremeters and `crossorigin="anonymous"` as attributes of created `<style>` element and places it at the **beginning** of `<head>` tag in the document.
+### PrependAnonymousStyleToHead
 
+```js
+LOADING_STRATEGY.PrependAnonymousStyleToHead(href: string, integrity?: string)
+```
 
+Sets given paremeters and `crossorigin="anonymous"` as attributes of created `<style>` element and places it at the **beginning** of `<head>` tag in the document.
 
 
-## What's Next?
+## See Also
 
 - [LazyLoadService](./Lazy-Load-Service.md)

docs/en/UI/Common/Utils/Linked-List.md

@@ -30,7 +30,11 @@ There are several methods to create new nodes in a linked list and all of them a
 
 
 
-#### addHead(value: T): ListNode\<T\>
+#### addHead(value)
+
+```js
+addHead(value: T): ListNode\<T\>
+```
 
 Adds a node with given value as the first node in list:
 
@@ -50,7 +54,11 @@ list.addHead('c');
 
 
 
-#### addManyHead(values: T\[\]): ListNode\<T\>\[\]
+#### addManyHead(values)
+
+```js
+addManyHead(values: T\[\]): ListNode\<T\>\[\]
+```
 
 Adds multiple nodes with given values as the first nodes in list:
 
@@ -66,7 +74,11 @@ list.addManyHead(['x', 'y', 'z']);
 
 
 
-#### addTail(value: T): ListNode\<T\>
+#### addTail(value)
+
+```js
+addTail(value: T): ListNode\<T\>
+```
 
 Adds a node with given value as the last node in list:
 
@@ -86,7 +98,11 @@ list.addTail('c');
 
 
 
-#### addManyTail(values: T\[\]): ListNode\<T\>\[\]
+#### addManyTail(values)
+
+```js
+addManyTail(values: T\[\]): ListNode\<T\>\[\]
+```
 
 Adds multiple nodes with given values as the last nodes in list:
 
@@ -102,7 +118,11 @@ list.addManyTail(['x', 'y', 'z']);
 
 
 
-#### addAfter(value: T, previousValue: T, compareFn = compare): ListNode\<T\>
+#### addAfter(value, previousValue, compareFn)
+
+```js
+addAfter(value: T, previousValue: T, compareFn = compare): ListNode\<T\>
+```
 
 Adds a node with given value after the first node that has the previous value:
 
@@ -145,7 +165,11 @@ list.addAfter(
 
 
 
-#### addManyAfter(values: T\[\], previousValue: T, compareFn = compare): ListNode\<T\>\[\]
+#### addManyAfter(values, previousValue, compareFn)
+
+```js
+addManyAfter(values: T\[\], previousValue: T, compareFn = compare): ListNode\<T\>\[\]
+```
 
 Adds multiple nodes with given values after the first node that has the previous value:
 
@@ -183,7 +207,11 @@ list.addManyAfter(
 
 
 
-#### addBefore(value: T, nextValue: T, compareFn = compare): ListNode\<T\>
+#### addBefore(value, nextValue, compareFn)
+
+```js
+addBefore(value: T, nextValue: T, compareFn = compare): ListNode\<T\>
+```
 
 Adds a node with given value before the first node that has the next value:
 
@@ -226,7 +254,11 @@ list.addBefore(
 
 
 
-#### addManyBefore(values: T\[\], nextValue: T, compareFn = compare): ListNode\<T\>\[\]
+#### addManyBefore(values, nextValue, compareFn)
+
+```js
+addManyBefore(values: T\[\], nextValue: T, compareFn = compare): ListNode\<T\>\[\]
+```
 
 Adds multiple nodes with given values before the first node that has the next value:
 
@@ -264,7 +296,11 @@ list.addManyBefore(
 
 
 
-#### addByIndex(value: T, position: number): ListNode\<T\>
+#### addByIndex(value, position)
+
+```js
+addByIndex(value: T, position: number): ListNode\<T\>
+```
 
 Adds a node with given value at the specified position in the list:
 
@@ -298,7 +334,11 @@ list.addByIndex('x', -1);
 
 
 
-#### addManyByIndex(values: T\[\], position: number): ListNode\<T\>\[\]
+#### addManyByIndex(values, position)
+
+```js
+addManyByIndex(values: T\[\], position: number): ListNode\<T\>\[\]
+```
 
 Adds multiple nodes with given values at the specified position in the list:
 
@@ -328,7 +368,11 @@ list.addManyByIndex(['x', 'y'], -1);
 
 
 
-#### add(value: T).head(): ListNode\<T\>
+#### add(value).head()
+
+```js
+add(value: T).head(): ListNode\<T\>
+```
 
 Adds a node with given value as the first node in list:
 
@@ -352,7 +396,11 @@ list.add('c').head();
 
 
 
-#### add(value: T).tail(): ListNode\<T\>
+#### add(value).tail()
+
+```js
+add(value: T).tail(): ListNode\<T\>
+```
 
 Adds a node with given value as the last node in list:
 
@@ -376,7 +424,11 @@ list.add('c').tail();
 
 
 
-#### add(value: T).after(previousValue: T, compareFn = compare): ListNode\<T\>
+#### add(value).after(previousValue, compareFn)
+
+```js
+add(value: T).after(previousValue: T, compareFn = compare): ListNode\<T\>
+```
 
 Adds a node with given value after the first node that has the previous value:
 
@@ -419,7 +471,11 @@ list
 
 
 
-#### add(value: T).before(nextValue: T, compareFn = compare): ListNode\<T\>
+#### add(value).before(nextValue, compareFn)
+
+```js
+add(value: T).before(nextValue: T, compareFn = compare): ListNode\<T\>
+```
 
 Adds a node with given value before the first node that has the next value:
 
@@ -462,7 +518,11 @@ list
 
 
 
-#### add(value: T).byIndex(position: number): ListNode\<T\>
+#### add(value).byIndex(position)
+
+```js
+add(value: T).byIndex(position: number): ListNode\<T\>
+```
 
 Adds a node with given value at the specified position in the list:
 
@@ -500,7 +560,11 @@ list.add('x').byIndex(-1);
 
 
 
-#### addMany(values: T\[\]).head(): ListNode\<T\>\[\]
+#### addMany(values).head()
+
+```js
+addMany(values: T\[\]).head(): ListNode\<T\>\[\]
+```
 
 Adds multiple nodes with given values as the first nodes in list:
 
@@ -520,7 +584,11 @@ list.addMany(['x', 'y', 'z']).head();
 
 
 
-#### addMany(values: T\[\]).tail(): ListNode\<T\>\[\]
+#### addMany(values).tail()
+
+```js
+addMany(values: T\[\]).tail(): ListNode\<T\>\[\]
+```
 
 Adds multiple nodes with given values as the last nodes in list:
 
@@ -540,7 +608,11 @@ list.addMany(['x', 'y', 'z']).tail();
 
 
 
-#### addMany(values: T\[\]).after(previousValue: T, compareFn = compare): ListNode\<T\>\[\]
+#### addMany(values).after(previousValue, compareFn)
+
+```js
+addMany(values: T\[\]).after(previousValue: T, compareFn = compare): ListNode\<T\>\[\]
+```
 
 Adds multiple nodes with given values after the first node that has the previous value:
 
@@ -578,7 +650,11 @@ list
 
 
 
-#### addMany(values: T\[\]).before(nextValue: T, compareFn = compare): ListNode\<T\>\[\]
+#### addMany(values).before(nextValue, compareFn)
+
+```js
+addMany(values: T\[\]).before(nextValue: T, compareFn = compare): ListNode\<T\>\[\]
+```
 
 Adds multiple nodes with given values before the first node that has the next value:
 
@@ -616,7 +692,11 @@ list
 
 
 
-#### addMany(values: T\[\]).byIndex(position: number): ListNode\<T\>\[\]
+#### addMany(values).byIndex(position)
+
+```js
+addMany(values: T\[\]).byIndex(position: number): ListNode\<T\>\[\]
+```
 
 Adds multiple nodes with given values at the specified position in the list:
 
@@ -656,7 +736,11 @@ There are a few methods to remove nodes from a linked list and all of them are s
 
 
 
-#### dropHead(): ListNode\<T\> | undefined
+#### dropHead()
+
+```js
+dropHead(): ListNode\<T\> | undefined
+```
 
 Removes the first node from the list:
 
@@ -672,7 +756,11 @@ list.dropHead();
 
 
 
-#### dropManyHead(count: number): ListNode\<T\>\[\]
+#### dropManyHead(count)
+
+```js
+dropManyHead(count: number): ListNode\<T\>\[\]
+```
 
 Removes the first nodes from the list based on given count:
 
@@ -688,7 +776,11 @@ list.dropManyHead(2);
 
 
 
-#### dropTail(): ListNode\<T\> | undefined
+#### dropTail()
+
+```js
+dropTail(): ListNode\<T\> | undefined
+```
 
 Removes the last node from the list:
 
@@ -704,7 +796,11 @@ list.dropTail();
 
 
 
-#### dropManyTail(count: number): ListNode\<T\>\[\]
+#### dropManyTail(count)
+
+```js
+dropManyTail(count: number): ListNode\<T\>\[\]
+```
 
 Removes the last nodes from the list based on given count:
 
@@ -720,7 +816,11 @@ list.dropManyTail(2);
 
 
 
-#### dropByIndex(position: number): ListNode\<T\> | undefined
+#### dropByIndex(position)
+
+```js
+dropByIndex(position: number): ListNode\<T\> | undefined
+```
 
 Removes the node with the specified position from the list:
 
@@ -750,7 +850,11 @@ list.dropByIndex(-2);
 
 
 
-#### dropManyByIndex(count: number, position: number): ListNode\<T\>\[\]
+#### dropManyByIndex(count, position)
+
+```js
+dropManyByIndex(count: number, position: number): ListNode\<T\>\[\]
+```
 
 Removes the nodes starting from the specified position from the list based on given count:
 
@@ -780,7 +884,11 @@ list.dropManyByIndex(2, -2);
 
 
 
-#### dropByValue(value: T, compareFn = compare): ListNode\<T\> | undefined
+#### dropByValue(value, compareFn)
+
+```js
+dropByValue(value: T, compareFn = compare): ListNode\<T\> | undefined
+```
 
 Removes the first node with given value from the list:
 
@@ -814,7 +922,11 @@ list.dropByValue(0, (value, searchedValue) => value.x === searchedValue);
 
 
 
-#### dropByValueAll(value: T, compareFn = compare): ListNode\<T\>\[\]
+#### dropByValueAll(value, compareFn)
+
+```js
+dropByValueAll(value: T, compareFn = compare): ListNode\<T\>\[\]
+```
 
 Removes all nodes with given value from the list:
 
@@ -848,7 +960,11 @@ list.dropByValue(0, (value, searchedValue) => value.x === searchedValue);
 
 
 
-#### drop().head(): ListNode\<T\> | undefined
+#### drop().head()
+
+```js
+drop().head(): ListNode\<T\> | undefined
+```
 
 Removes the first node in list:
 
@@ -868,7 +984,11 @@ list.drop().head();
 
 
 
-#### drop().tail(): ListNode\<T\> | undefined
+#### drop().tail()
+
+```js
+drop().tail(): ListNode\<T\> | undefined
+```
 
 Removes the last node in list:
 
@@ -888,7 +1008,11 @@ list.drop().tail();
 
 
 
-#### drop().byIndex(position: number): ListNode\<T\> | undefined
+#### drop().byIndex(position)
+
+```js
+drop().byIndex(position: number): ListNode\<T\> | undefined
+```
 
 Removes the node with the specified position from the list:
 
@@ -922,7 +1046,11 @@ list.drop().byIndex(-2);
 
 
 
-#### drop().byValue(value: T, compareFn = compare): ListNode\<T\> | undefined
+#### drop().byValue(value, compareFn)
+
+```js
+drop().byValue(value: T, compareFn = compare): ListNode\<T\> | undefined
+```
 
 Removes the first node with given value from the list:
 
@@ -960,7 +1088,11 @@ list
 
 
 
-#### drop().byValueAll(value: T, compareFn = compare): ListNode\<T\>\[\]
+#### drop().byValueAll(value, compareFn)
+
+```js
+drop().byValueAll(value: T, compareFn = compare): ListNode\<T\>\[\]
+```
 
 Removes all nodes with given value from the list:
 
@@ -998,7 +1130,11 @@ list
 
 
 
-#### dropMany(count: number).head(): ListNode\<T\>\[\]
+#### dropMany(count).head()
+
+```js
+dropMany(count: number).head(): ListNode\<T\>\[\]
+```
 
 Removes the first nodes from the list based on given count:
 
@@ -1018,7 +1154,11 @@ list.dropMany(2).head();
 
 
 
-#### dropMany(count: number).tail(): ListNode\<T\>\[\]
+#### dropMany(count).tail()
+
+```js
+dropMany(count: number).tail(): ListNode\<T\>\[\]
+```
 
 Removes the last nodes from the list based on given count:
 
@@ -1038,7 +1178,11 @@ list.dropMany(2).tail();
 
 
 
-#### dropMany(count: number).byIndex(position: number): ListNode\<T\>\[\]
+#### dropMany(count).byIndex(position)
+
+```js
+dropMany(count: number).byIndex(position: number): ListNode\<T\>\[\]
+```
 
 Removes the nodes starting from the specified position from the list based on given count:
 
@@ -1078,7 +1222,11 @@ There are a few methods to find specific nodes in a linked list.
 
 
 
-#### find(predicate: ListIteratorFunction\<T\>): ListNode\<T\> | undefined
+#### find(predicate)
+
+```js
+find(predicate: ListIteratorFunction\<T\>): ListNode\<T\> | undefined
+```
 
 Finds the first node from the list that matches the given predicate:
 
@@ -1098,7 +1246,11 @@ found.next.value === "b"
 
 
 
-#### findIndex(predicate: ListIteratorFunction\<T\>): number
+#### findIndex(predicate)
+
+```js
+findIndex(predicate: ListIteratorFunction\<T\>): number
+```
 
 Finds the position of the first node from the list that matches the given predicate:
 
@@ -1122,7 +1274,11 @@ i3 === -1
 
 
 
-#### get(position: number): ListNode\<T\> | undefined
+#### get(position)
+
+```js
+get(position: number): ListNode\<T\> | undefined
+```
 
 Finds and returns the node with specific position in the list:
 
@@ -1142,7 +1298,11 @@ found.next.value === "c"
 
 
 
-#### indexOf(value: T, compareFn = compare): number
+#### indexOf(value, compareFn)
+
+```js
+indexOf(value: T, compareFn = compare): number
+```
 
 Finds the position of the first node from the list that has the given value:
 
@@ -1200,7 +1360,11 @@ There are a few ways to iterate over or display a linked list.
 
 
 
-#### forEach(callback: ListIteratorFunction\<T\>): void
+#### forEach(callback)
+
+```js
+forEach(callback: ListIteratorFunction\<T\>): void
+```
 
 Runs a callback function on all nodes in a linked list from head to tail:
 
@@ -1238,7 +1402,11 @@ for(const node of list) {
 
 
 
-#### toArray(): T\[\]
+#### toArray()
+
+```js
+toArray(): T\[\]
+```
 
 Converts a linked list to an array of values:
 
@@ -1256,7 +1424,11 @@ arr === ['a', 'b', 'c']
 
 
 
-#### toNodeArray(): T\[\]
+#### toNodeArray()
+
+```js
+toNodeArray(): T\[\]
+```
 
 Converts a linked list to an array of nodes:
 
@@ -1276,7 +1448,11 @@ arr[2].value === 'a'
 
 
 
-#### toString(): string
+#### toString()
+
+```js
+toString(): string
+```
 
 Converts a linked list to a string representation of nodes and their relations:
 

docs/en/docs-nav.json

@@ -349,6 +349,10 @@
               "text": "Lazy Loading Scripts & Styles",
               "path": "UI/Angular/Lazy-Load-Service.md"
             },
+            {
+              "text": "DomInsertionService",
+              "path": "UI/Angular/Dom-Insertion-Service.md"
+            },
             {
               "text": "TrackByService",
               "path": "UI/Angular/Track-By-Service.md"