bug(COMPONENT): Datepicker huge visual change with little code of angular v17

[andrei-agdo]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hello folks!

In my personal studies and updates, a specific update of my component broke the datepicker with a simple update, the new template control flow of Angular v17. It's simple but strange
Is so simple that can be simulate with a basic tutorial.

Normal tutorial:

Little and no logic update

Just the "@ if(true)" broken all visual of datepicker.

I know I can just "don't do the if inside mat-form-field" etc, but I think is a too simple code to broken too much, and theoretically the angular's control flow can't broke the css

Reproduction

StackBlitz link: https://stackblitz.com/edit/ncg3w3?file=src%2Fexample%2Fdatepicker-overview-example.html

Expected Behavior

Don't broke the css with @ if directives

Actual Behavior

When I put a control flow inside mat-form-field the css be broke

Environment

• Angular: v17
• CDK/Material: v17
• Browser(s): Chrome, Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[andrei-agdo]

I don't know if helps, but if put individually each line the same "if", with same condition, works well..

[crisbeto]

This is due to the fact that the framework only does content projection through the control boundaries if the control flow node only has one root node. There's an upcoming change that will log a compiler warning for cases like this one: angular/angular#53190. Closing the issue since we can't do anything about it in Material.

[andrei-agdo]

@crisbeto Thank you very much for your attention and response.
I just wanted to help Framwork grow and I saw that I have heroes taking care of this every day.
Thank you again

[angular-automatic-lock-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.}