title: How to define an optional setting value in the datepicker using Material?
body: <p>I am trying to create a reusable component of the Material datepicker but I can't find a solution to have a optional setting date of the component.</p>
  <p><strong>resusable.datepicker.component.ts</strong></p>
  <pre><code>@Input() currentValue: FormControl = new FormControl&lt;any&gt;(new Date());
  </code></pre>
  <p><strong>resusable.datepicker.component.html</strong></p>
  <pre><code>&lt;mat-form-field appearance=&quot;fill&quot;&gt;
    &lt;input
      name=&quot;{{ name }}&quot;
      matInput
      [matDatepicker]=&quot;picker&quot;
      [value]=&quot;currentValue.value&quot;
    /&gt;
    &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;
    &lt;/mat-datepicker-toggle&gt;
    &lt;mat-datepicker touchUi #picker&gt;&lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p><strong>usage.component.html</strong></p>
  <pre><code>&lt;app-ftd-date-picker
    [currentValue]=&quot;selectedDate&quot;
  &gt;&lt;/app-ftd-date-picker&gt;
  &lt;app-ftd-date-picker
  &gt;&lt;/app-ftd-date-picker&gt;
  </code></pre>
  <p><strong>usage.component.ts</strong></p>
  <pre><code>export class AppComponent {
    selectedDate = new FormControl(new Date(2025, 11, 25));
  }
  </code></pre>
  <p>The problem is that when i use the component without setting the default date, it needs to have this changed:
  <strong>resusable.datepicker.component.ts</strong></p>
  <pre><code>@Input() currentValue: FormControl = new FormControl&lt;any&gt; | undefined;
  </code></pre>
  <p>But i am unable to find a solution. Any suggestions? Thank you.</p>