feat(material/timepicker): add option template

close #31209

Author: lekhmanrus

src/material/timepicker/timepicker.spec.ts

@@ -1,4 +1,12 @@
-import {Component, Injector, Provider, signal, ViewChild, ViewEncapsulation} from '@angular/core';
+import {
+  Component,
+  inject,
+  Injector,
+  Provider,
+  signal,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
 import {DateAdapter, MATERIAL_ANIMATIONS, provideNativeDateAdapter} from '../core';
 import {
@@ -652,6 +660,24 @@ describe('MatTimepicker', () => {
       fixture.detectChanges();
       expect(fixture.componentInstance.timepicker.interval()).toBe(null);
     });
+
+    it('should be able to apply custom options template', () => {
+      const fixture = TestBed.createComponent(TimepickerOptionTemplate);
+      fixture.detectChanges();
+
+      getInput(fixture).click();
+      fixture.detectChanges();
+      expect(getOptions().map(o => o.textContent.trim())).toEqual([
+        '12:00 AM (off-hours)',
+        '3:00 AM (off-hours)',
+        '6:00 AM (off-hours)',
+        '9:00 AM (working hours)',
+        '12:00 PM (working hours)',
+        '3:00 PM (working hours)',
+        '6:00 PM (off-hours)',
+        '9:00 PM (off-hours)',
+      ]);
+    });
   });
 
   describe('mat-form-field integration', () => {
@@ -1512,3 +1538,28 @@ class TimepickerWithoutInput {
   encapsulation: ViewEncapsulation.ShadowDom,
 })
 class TimepickerInShadowDom {}
+
+@Component({
+  template: `
+    <input [matTimepicker]="picker" />
+    <mat-timepicker #picker interval="3h">
+      <ng-template let-option>
+        {{ option.label }}
+        {{ (dateAdapter.compareTime(option.value, workStartTime) > 0 && dateAdapter.compareTime(option.value, workEndTime) < 0) ? '(working hours)' : '(off-hours)' }}
+      </ng-template>
+    </mat-timepicker>
+  `,
+  imports: [MatTimepicker, MatTimepickerInput],
+})
+class TimepickerOptionTemplate {
+  readonly dateAdapter = inject<DateAdapter<Date>>(DateAdapter);
+  readonly workStartTime: Date;
+  readonly workEndTime: Date;
+
+  constructor() {
+    this.workStartTime = new Date();
+    this.workStartTime.setHours(8, 30, 0);
+    this.workEndTime = new Date();
+    this.workEndTime.setHours(17, 0, 0);
+  }
+}