feat(material/datepicker): add support for cancel/apply buttons - #21487
Conversation
crisbeto
added
P2
google-cla
Bot
added
the
cla: yes
| selector: 'mat-datepicker-actions, mat-date-range-picker-actions', | ||
| styleUrls: ['datepicker-actions.css'], | ||
| template: ` | ||
| <ng-template> |
There was a problem hiding this comment.
Is there a way we could avoid doing the ng-content inside ng-template pattern? Doing this, Angular ends up instantiating the content even when it's not rendered. It could just be an ng-template-based API, or maybe just vanilla content projection?
There was a problem hiding this comment.
We could, but I decided not to do it, because projecting a couple of buttons isn't particularly performance-intensive. Also using an ng-template to define the buttons doesn't allow for things like ngIf and ngFor to be used on the same element.
|
LGTM |
jelbourn
left a comment
jelbourn
left a comment
There was a problem hiding this comment.
LGTM
FWIW on the .example thing- my main motivation for doing that is to make it clear which styles come from where (demo vs implementation) when inspecting the DOM in devtools.
Adds support for projecting in "Cancel" and "Apply" buttons in `mat-datepicker` and
`mat-date-range-picker`. Doing so will change the behavior of the datepicker so that the user
has to explicitly accept a value after they've clicked on it. The consumption is as follows:
```
<mat-datepicker>
<mat-datepicker-actions>
<button mat-button matDatepickerCancel>Cancel</button>
<button mat-raised-button color="primary" matDatepickerApply>Apply</button>
</mat-datepicker-actions>
</mat-datepicker>
```
f251604 to
1af4631
Compare
…lar#21487) Adds support for projecting in "Cancel" and "Apply" buttons in `mat-datepicker` and `mat-date-range-picker`. Doing so will change the behavior of the datepicker so that the user has to explicitly accept a value after they've clicked on it. The consumption is as follows: ``` <mat-datepicker> <mat-datepicker-actions> <button mat-button matDatepickerCancel>Cancel</button> <button mat-raised-button color="primary" matDatepickerApply>Apply</button> </mat-datepicker-actions> </mat-datepicker> ```
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
6 participants
Adds support for projecting in "Cancel" and "Apply" buttons in
mat-datepickerandmat-date-range-picker. Doing so will change the behavior of the datepicker so that the user has to explicitly accept a value after they've clicked on it. The consumption is as follows:The result looks like this:
