diff --git a/docs/en/UI/Angular/Dom-Insertion-Service.md b/docs/en/UI/Angular/Dom-Insertion-Service.md index 5d7714d948..5159ae2c35 100644 --- a/docs/en/UI/Angular/Dom-Insertion-Service.md +++ b/docs/en/UI/Angular/Dom-Insertion-Service.md @@ -2,7 +2,6 @@ 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. @@ -20,8 +19,7 @@ class DemoComponent { ## Usage -You can use the `insertContent` method of `DomInsertionService` to create a `` element will place at the **end 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 t Please refer to [ContentStrategy](./Content-Strategy.md) to see all available content strategies and how you can build your own content strategy. +### How to Project Components & Templates + +If you pass a `ProjectionStrategy` as the first parameter of `projectContent` method, the `DomInsertionService` will resolve the projected component or template and place it at the designated target, such as containers or document body. If provided, it will also pass the component or the template a context. + +```js +const componentRef = this.domInsertionService.projectContent( + PROJECTION_STRATEGY.AppendComponentToBody(SomeOverlayComponent) +); +``` + +In the example above, `SomeOverlayComponent` component will placed at the **end** of `
` and a `ComponentRef` will be returned. + +> You should keep the returned `ComponentRef` instance, as it is a reference to the projected component and you will need that reference to destroy the projected view and the component instance. + +```js +const componentRef = this.domInsertionService.projectContent( + PROJECTION_STRATEGY.ProjectComponentToContainer( + SomeOverlayComponent, + viewContainerRefOfTarget, + { someProp: "SOME_VALUE" } + ) +); +``` + +In this example, the `viewContainerRefOfTarget`, which is a `ViewContainerRef` instance, will be cleared and `SomeOverlayComponent` component will placed inside it. Moreover, the given context will be applied, so `someProp` of the component will be set to `SOME_VALUE`. + +Please refer to [ProjectionStrategy](./Projection-Strategy.md) to see all available projection strategies and how you can build your own projection strategy. ## API ### insertContent ```js -insertContent(strategy: ContentStrategy): void +injectContent(injector: Injector): ComponentRef