docs: update insertContent and add removeContent

5 years ago · 58a98fe012
parent 3348bf716e
commit 58a98fe012
1 changed files with 48 additions and 5 deletions
--- a/docs/en/UI/Angular/Dom-Insertion-Service.md
+++ b/docs/en/UI/Angular/Dom-Insertion-Service.md
@ -35,17 +35,19 @@ class DemoComponent {
  constructor(private domInsertionService: DomInsertionService) {}

  ngOnInit() {
-    this.domInsertionService.insertContent(
+    const scriptElement = this.domInsertionService.insertContent(
      CONTENT_STRATEGY.AppendScriptToBody('alert()')
    );
  }
 }
 ```

-In the example above, `<script>alert()</script>` element will place at the **end** of `<body>`.
+In the example above, `<script>alert()</script>` element will place at the **end** of `<body>` and `scriptElement` will be an `HTMLScriptElement`.

 Please refer to [ContentStrategy](./Content-Strategy.md) to see all available content strategies and how you can build your own content strategy.

+> Important Note: `DomInsertionService` does not insert the same content twice. In order to add a content again, you first should remove the old content using `removeContent` method.
+
 ### 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.
@ -60,27 +62,68 @@ class DemoComponent {
  constructor(private domInsertionService: DomInsertionService) {}

  ngOnInit() {
-    this.domInsertionService.insertContent(
+    const styleElement = 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>`.
+In the example above, `<style>body {margin: 0;}</style>` element will place at the **end** of `<head>` and `styleElement` will be an `HTMLStyleElement`.

 Please refer to [ContentStrategy](./Content-Strategy.md) to see all available content strategies and how you can build your own content strategy.

+> Important Note: `DomInsertionService` does not insert the same content twice. In order to add a content again, you first should remove the old content using `removeContent` method.
+
+### How to Remove Inserted Scripts & Styles
+
+If you pass the inserted `HTMLScriptElement` or `HTMLStyleElement` element as the first parameter of `removeContent` method, the `DomInsertionService` will remove the given element.
+
+```js
+import { DomInsertionService, CONTENT_STRATEGY } from '@abp/ng.core';
+
+@Component({
+  /* class metadata here */
+})
+class DemoComponent {
+  private styleElement: HTMLStyleElement;
+
+  constructor(private domInsertionService: DomInsertionService) {}
+
+  ngOnInit() {
+    this.styleElement = this.domInsertionService.insertContent(
+      CONTENT_STRATEGY.AppendStyleToHead('body {margin: 0;}')
+    );
+  }
+
+  ngOnDestroy() {
+    this.domInsertionService.removeContent(this.styleElement);
+  }
+}
+```
+
+In the example above, `<style>body {margin: 0;}</style>` element **will be removed** from `<head>` when the component is destroyed.
+
 ## API

 ### insertContent

 ```js
-insertContent(contentStrategy: ContentStrategy): void
+insertContent<T extends HTMLScriptElement | HTMLStyleElement>(
+  contentStrategy: ContentStrategy<T>,
+): T
 ```

 - `contentStrategy` parameter is the primary focus here and is explained above.
+- returns `HTMLScriptElement` or `HTMLStyleElement` based on given strategy.
+
+### removeContent
+
+```js
+removeContent(element: HTMLScriptElement | HTMLStyleElement): void
+```

+- `element` parameter is the inserted `HTMLScriptElement` or `HTMLStyleElement` element, which was returned by `insertContent` method.

 ## What's Next?