A simple trick you need for dynamic ContentChildren
Developing OnPush components that operate with content children might be tricky. Let’s consider the following example. We have a tabs component and we want to give user full control of those tabs. So we make a wrapping component and allow defining tabs in its content. We also want to be able to arrange them differently. Maybe we have a separator template, or we hide extra tabs into «More» dropdown.
To do so we must use templates or structural directives. We access them with @ContentChildren query inside our wrapper. Then we instantiate templates the way we need. But what if the list of tabs can change? Take a look at the example below. Logging in adds another tab — «Profile». Try hitting that button and see what happens:
The issue stems from the fact that content belongs to the parent view lifecycle. Even though it is inside our wrapper component and it changed — OnPush change detection of the wrapper…
