From cba9c89ff9e54c35fa258de52c033df7d5285714 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 7 Apr 2020 11:47:35 +0300 Subject: [PATCH] docs: add Dom-Insertion-Service.md --- docs/en/UI/Angular/Dom-Insertion-Service.md | 102 ++++++++++++++++++++ docs/en/UI/Angular/Lazy-Load-Service.md | 2 +- docs/en/docs-nav.json | 4 + 3 files changed, 107 insertions(+), 1 deletion(-) create mode 100644 docs/en/UI/Angular/Dom-Insertion-Service.md diff --git a/docs/en/UI/Angular/Dom-Insertion-Service.md b/docs/en/UI/Angular/Dom-Insertion-Service.md new file mode 100644 index 0000000000..ed5a3b065d --- /dev/null +++ b/docs/en/UI/Angular/Dom-Insertion-Service.md @@ -0,0 +1,102 @@ +# 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 `` element will place at the **end** of ``. + +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 `` element will place at the **end** of ``. + +Please refer to [ContentStrategy](./Content-Strategy.md) to see all available content strategies and how you can build your own content strategy. + + +## API + + +### inserted + +```js +inserted: Set +``` + +All previously inserted contents are stored via this property as hashes. It is a simple [JavaScript Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). + + + +### 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) diff --git a/docs/en/UI/Angular/Lazy-Load-Service.md b/docs/en/UI/Angular/Lazy-Load-Service.md index 43ee7bc6b8..a03381869e 100644 --- a/docs/en/UI/Angular/Lazy-Load-Service.md +++ b/docs/en/UI/Angular/Lazy-Load-Service.md @@ -210,4 +210,4 @@ load(strategy: LoadingStrategy, retryTimes?: number, retryDelay?: number): Obser ## What's Next? -- [TrackByService](./Track-By-Service.md) +- [DomInsertionService](./Dom-Insertion-Service.md) diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index 8034913c4c..471e215e3a 100644 --- a/docs/en/docs-nav.json +++ b/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"