Skip to content

feat(datepicker): allow for mat-datepicker-toggle icon to be customized - #9487

Merged
jelbourn merged 1 commit into
angular:masterfrom
crisbeto:datepicker-toggle-custom-icon
Jan 24, 2018
Merged

feat(datepicker): allow for mat-datepicker-toggle icon to be customized#9487
jelbourn merged 1 commit into
angular:masterfrom
crisbeto:datepicker-toggle-custom-icon

Conversation

@crisbeto

Copy link
Copy Markdown
Member

Allows for the consumer to set a different icon for the mat-datepicker-icon via the matDatepickerToggleIcon directive. The reasoning for the change is that not all consumers might be using the Material icons or they may want to set something different (e.g. a chevron).

@googlebotgooglebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jan 19, 2018
Comment threadsrc/lib/datepicker/datepicker.md Outdated
<img matDatepickerToggleIcon src="my-custom-icon.png">
</mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>
```

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you turn this into an embedded example?

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

@Directive({
selector: '[matDatepickerToggleIcon]'
})
export class MatDatepickerToggleIcon {}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need a special directive? what if we just treat any projected content as a custom icon?

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could, but it gets a little dirtier when you try to figure out whether to hide the default icon. We'd have to loop through all the children of the content element and count the amount of element nodes (skipping comments, text nodes etc.) on every change detection.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, I thought there was an easier way to check if any content was projected, but it looks like you're right

Allows for the consumer to set a different icon for the `mat-datepicker-icon` via the `matDatepickerToggleIcon` directive. The reasoning for the change is that not all consumers might be using the Material icons or they may want to set something different (e.g. a chevron).
@crisbeto
crisbetoforce-pushed the datepicker-toggle-custom-icon branch from f18185b to bff5e19CompareJanuary 20, 2018 08:14
@mmalerbammalerba added pr: lgtm action: merge The PR is ready for merge by the caretaker target: minor This PR is targeted for the next minor release and removed pr: needs review labels Jan 20, 2018
@jelbourn
jelbourn merged commit 01867ad into angular:masterJan 24, 2018
@angular-automatic-lock-bot

Copy link
Copy Markdown

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.

@angular-automatic-lock-botangular-automatic-lock-botBot locked and limited conversation to collaborators Sep 8, 2019
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: mergeThe PR is ready for merge by the caretakercla: yesPR author has agreed to Google's Contributor License Agreementtarget: minorThis PR is targeted for the next minor release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@crisbeto@mmalerba@jelbourn@googlebot