docs: update insertContent and add removeContent

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?