Interlude — content projection woes

Disclaimer: This is a pretty messy way to pass content down through several components. For instance, having a reference to the questionnaire in the QValidator component is way easier (and won’t interfere, as the validator is really a questionnaire only control).

My survey view is working properly — the question data is rendered correctly and the validator error messages show up when the questions are not valid. But since my error message is not tied to my questions data, I might want to make it customizable (for example, if the questions were all in German, currently my error messages will still be in English).

I add an input to my questionnaire component, accepting an object with error messages for each type of question (conveniently, only 2). I then pass the input down to the question components:

and project it inside of the question components’ templates using ng-content select="[qError]" :

Inside of the validator, I want to handle the projected content with another content projection:

The content projection is handled with a select argument, in case we want to pass multiple content blocks down to the validator (which we will!).

In my survey view, I pass down custom error messages to my q-questionnaire via the errorMsg input:

When I run the app, no errors are thrown, but my validators do not show any error messages. The error icons are still visible, so the q-validator component is properly rendered for invalid questions.

If I debug my app, I can see that the error messages are properly passed to the q-questionnaire component (the instance of q-questionnaire.errorMsgs return the proper messages, in German). The question components are also getting a reference to the questionnaire ( q-single.questionnaire is not null ) and they are properly getting the errorMsgs (as they are public ). If I change my q-multi.component.html to the following, I can even see the error message on my last question: