ProjectionStrategy

ProjectionStrategy is an abstract class exposed by @abp/ng.core package. There are three projection strategies extending it: ComponentProjectionStrategy, RootComponentProjectionStrategy, and TemplateProjectionStrategy. Implementing the same methods and properties, all of these strategies help you define how your content projection will work.

ComponentProjectionStrategy

ComponentProjectionStrategy is a class that extends ProjectionStrategy. It lets you project a component into a container.

constructor

constructor(
  component: T,
  private containerStrategy: ContainerStrategy,
  private contextStrategy?: ContextStrategy,
)
JavaScript
  • component is class of the component you would like to project.
  • containerStrategy is the ContainerStrategy that will be used when projecting the component.
  • contextStrategy is the ContextStrategy that will be used on the projected component. (default: None)

Please refer to ContainerStrategy and ContextStrategy documentation for their usage.

injectContent

injectContent(injector: Injector): ComponentRef<T>
JavaScript

This method prepares the container, resolves the component, sets its context, and projects it to the container. It returns a ComponentRef instance, which you should keep in order to clear projected components later on.

RootComponentProjectionStrategy

RootComponentProjectionStrategy is a class that extends ProjectionStrategy. It lets you project a component into the document, such as appending it to <body>.

constructor

constructor(
  component: T,
  private contextStrategy?: ContextStrategy,
  private domStrategy?: DomStrategy,
)
JavaScript
  • component is class of the component you would like to project.
  • contextStrategy is the ContextStrategy that will be used on the projected component. (default: None)
  • domStrategy is the DomStrategy that will be used when inserting component. (default: AppendToBody)

Please refer to ContextStrategy and DomStrategy documentation for their usage.

injectContent

injectContent(injector: Injector): ComponentRef<T>
JavaScript

This method resolves the component, sets its context, and projects it to the document. It returns a ComponentRef instance, which you should keep in order to clear projected components later on.

TemplateProjectionStrategy

TemplateProjectionStrategy is a class that extends ProjectionStrategy. It lets you project a template into a container.

constructor

constructor(
  template: T,
  private containerStrategy: ContainerStrategy,
  private contextStrategy?: ContextStrategy,
)
JavaScript
  • template is TemplateRef you would like to project.
  • containerStrategy is the ContainerStrategy that will be used when projecting the component.
  • contextStrategy is the ContextStrategy that will be used on the projected component. (default: None)

Please refer to ContainerStrategy and ContextStrategy documentation for their usage.

injectContent

injectContent(): EmbeddedViewRef<T>
JavaScript

This method prepares the container, and projects the template together with the defined context to it. It returns an EmbeddedViewRef, which you should keep in order to clear projected templates later on.

Predefined Projection Strategies

Predefined projection strategies are accessible via PROJECTION_STRATEGY constant.

AppendComponentToBody

PROJECTION_STRATEGY.AppendComponentToBody(
  component: T,
  contextStrategy?: ComponentContextStrategy<T>,
)
JavaScript

Sets given context to the component and places it at the end of <body> tag in the document.

AppendComponentToContainer

PROJECTION_STRATEGY.AppendComponentToContainer(
  component: T,
  containerRef: ViewContainerRef,
  contextStrategy?: ComponentContextStrategy<T>,
)
JavaScript

Sets given context to the component and places it at the end of the container.

AppendTemplateToContainer

PROJECTION_STRATEGY.AppendTemplateToContainer(
  templateRef: T,
  containerRef: ViewContainerRef,
  contextStrategy?: ComponentContextStrategy<T>,
)
JavaScript

Sets given context to the template and places it at the end of the container.

PrependComponentToContainer

PROJECTION_STRATEGY.PrependComponentToContainer(
  component: T,
  containerRef: ViewContainerRef,
  contextStrategy?: ComponentContextStrategy<T>,
)
JavaScript

Sets given context to the component and places it at the beginning of the container.

PrependTemplateToContainer

PROJECTION_STRATEGY.PrependTemplateToContainer(
  templateRef: T,
  containerRef: ViewContainerRef,
  contextStrategy?: ComponentContextStrategy<T>,
)
JavaScript

Sets given context to the template and places it at the beginning of the container.

ProjectComponentToContainer

PROJECTION_STRATEGY.ProjectComponentToContainer(
  component: T,
  containerRef: ViewContainerRef,
  contextStrategy?: ComponentContextStrategy<T>,
)
JavaScript

Clears the container, sets given context to the component, and places it in the cleared the container.

ProjectTemplateToContainer

PROJECTION_STRATEGY.ProjectTemplateToContainer(
  templateRef: T,
  containerRef: ViewContainerRef,
  contextStrategy?: ComponentContextStrategy<T>,
)
JavaScript

Clears the container, sets given context to the template, and places it in the cleared the container.

See Also

Contributors

Avatar hikalkan
Last updated: July 31, 2024 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

Real World Problems and Solutions with AI

27 Feb, 17:00
Online
Watch the Event
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book