Components: [Form field] matPrefix/Suffix don't work if nested in a ng-container

[IlCallo]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

matPrefix/Suffix directive should work even when inside a ng-container

What is the current behavior?

The div with class mat-form-field-prefix/suffix is not created

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-ugvzbw

What is the use-case or motivation for changing an existing behavior?

In my case, I must conditionally show different types of form fields based on a switch structural directive.
For the "date" type I must print 3 elements (input, datepicket toggle and datepicker itself).
Given those premises, I had to group them using a ng-container.
The bug will show off every time someone uses a ng-container to conditionally show some content in a mat-field and one of those elements have a matPrefix or matSuffix directive.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.0.6
Material 6.3.2

[IlCallo]

I checked the underlying code.
Here you can see that prefix and suffix (and everything else) is retrieved via @ContentChildren without {descendants: true} option.

@ContentChildren(Pane, {descendants: true}) arbitraryNestedPanes: QueryList<Pane>

documentation

I think that @ContentChildren should bypass ng-container tags by default, but this is an angular compiler issue rather than angular material I guess.
As a workaround, adding {descendants: true} could work, can anyone confirm this?
Will there be any side-effects accepting nested @ContentChildren?

[crisbeto]

The side-effect of using descendants is that it could pick up some deeply nested children that weren't supposed to be picked up. That being said, we don't support nesting mat-form-field anyway so it shouldn't matter.

[IlCallo]

So... Shall I open an issue on angular/angular repo for ng-container behaviour with @ContentChildren or is this "working as intended"?
If it's the first one, can the one I proposed be a solution/temporary fix?

If not, I'll keep searching for a way to fix it on my side, at least.
Some trick like always adding it and using display: none to hide it when not necessary or something like that

[crisbeto]

I think that this is working as intended. Angular only projects the direct descendants of an element.

[jelbourn]

Yeah, this is just the way that Angular behaves. Closing this as working-as-expected.

[IlCallo]

I understand, even if it seems strange because ng-container and ng-template are described as transparent elements which shouldn't alter the behaviour of the underlying template if not for the structural directives you use them for.

I temporarly fixed the problem taking the datepicker and the toggle outside the ng-template and ng-container and applying

<mat-datepicker-toggle matPrefix [for]="datePicker" [style.display]="field.type != 'date' ? 'none' : ''"></mat-datepicker-toggle>
<mat-datepicker #datePicker></mat-datepicker>

but this feel hacky and instantiate two more component for each field I'm displaying (which can be many).

I'll open an issue on Angular and see if it gains attention.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}