help(MatDatePicker): Ability to Conditionally Show/Hide mat-datepicker-actions

[penrodlol]

What are you trying to do?

When creating a mat-datepicker component we have the following example:

<mat-datepicker #picker>
  <mat-datepicker-actions *ngIf="prop$ | async">
     ...
  </mat-datepicker-actions>
</mat-datepicker>

Within this datepicker's header, there's a mat-slide-toggle that updates the props$ state to T/F. However, when updated, the mat-datepicker-actions remain visible within the template...

Is there a way to ensure the actions can be shown/removed without having to close and repoen the datepicker popover?

What troubleshooting steps have you tried?

1. Force change detection via ChangeDetectorRef.
2. Utilize the registerActions and removeActions methods on MatDatepicker.

Reproduction

https://stackblitz.com/edit/components-issue-xiz8hd?file=src/app/example-component.ts

Environment

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

[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.}