Our great sponsors
-
optional-content-projection
Optional Content projection in Angular using ng-content and or ng-template
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
I was torn between using ng-content or ng-template to solve the problem. To make an informed decision I created a POC implementing both options to see if one is superior to the other. In contrast to the requirements, the created POC allows for replacing multiple contents (like a header and a footer) to verify that the solution could be extended in the future (if needs arise). The next sections describe the alternatives I could come up with.
By the same mechanism as in the first approach, the custom or default content will be rendered by SlotRendererComponent. The reason why this solution is not working is due to @ContentChildren not being able to query nested ng-contents. Setting { descendants: true } also did not work for me. I found an issue describing the problem for the AngularDart repository so maybe it is related (or I am doing something wrong here ;) ).