The ng-container tag is only visible at design time and will be completely removed from the rendered HTML source code at runtime. Through ng-container plus SAP Spartacus custom implementation of cxFeatureLevel Directive, you can dynamically control whether a page fragment is displayed according to the configured Feature level.
As shown in the figure below, the HTML page layout in the red highlighted area can only be displayed on the UI when the feature Level configured by SAP Spartacus >= 3.2.
The logic of this dynamic display UI is implemented in cxFeatureLevel Directive.
In the Directive implementation, @Input set is used to define an input. When consumers use Directive and pass in a feature level, the cxFeatureLevel method is triggered, and the createEmbeddedView method provided by the viewContainer injected in the constructor is called to dynamically create the view. The metadata of the view to be created is stored in another injection parameter tenplateRef.
this.config comes from the configuration information stored in the SAP Spartacus project.
Both embeddedTView and embeddedLView are created by the Angular framework based on the metadata of the view to be rendered injected into the Directive constructor, and call renderView as an input parameter to render the page:
From the function name pointed to by templateFn, as shown in the following figure ConfirmationMessageComponent_ng_container_1_Template, you can roughly know that the Directive is ready to render the HTML tags wrapped by the ng-container in the HTML template.
That is as shown in the figure below:
Do a test: Change the features level in app.module.ts to 3.1:
It is found that it does work as we expected. The p tag (messageTitle) in the ng-container controlled by cxFeatureLevel has disappeared:
More original articles by Jerry, all in: "Wang Zixi":
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。