How to disable button if empty datepicker using Angular

Question

My problem is how can I disable button if the value of datepicker is empty. I tried checking using ngIf and get the value of that datepicker if it is empty, then disable the button, but it does not work. What I want to achieve is when the datepicker is empty button cannot be clickable or [disabled]. Thank you for your answer and help

Here is the code in my component.html

<div class="row pr-30">
  <div class="col-md-9 d-flex align-items-center">
    <span class="d-flex fw-500 mt--20">
                                    Filters:
                                </span>
    <div class="col-md-4">
      <form>
        <mat-form-field appearance="fill">
          <mat-label> From and To </mat-label>
          <mat-date-range-input [formGroup]="expiry_date" [rangePicker]="picker3">
            <input matStartDate formControlName="start" placeholder="Start date" (dateChange)="filter_date()">
            <input matEndDate formControlName="end" placeholder="End date" (dateChange)="filter_date()">
          </mat-date-range-input>
          <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
          <mat-date-range-picker #picker3></mat-date-range-picker>
          <mat-error *ngIf="expiry_date.controls.start.hasError('matStartDateInvalid')">
            Invalid start date</mat-error>
          <mat-error *ngIf="expiry_date.controls.end.hasError('matEndDateInvalid')">
            Invalid end date
          </mat-error>
        </mat-form-field>
      </form>
    </div>
  </div>
</div>

Here is the button for the download

            <div class="col-md-6 d-flex justify-content-end pr-0">
                        <div class="btn-group dropleft ">
                            <div class="btn-download" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <div class="d-flex align-items-center">
                                    <div class="row">
                                        <div class="col-md-2 d-flex align-items-center justify-content-start">
                                            <em class="material-icons arrow">
                                                expand_more
                                            </em>
                                        </div>
                                        <div class="col-md-10 d-flex align-items-center justify-content-center">
                                            <span>
                                                Download Reports
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="dropdown-menu">
                                <ul class="nav">
                                    <li class="nav-item pr-5 pl-5" style="background-color: white; border-radius: 5px;">
                                        <button class="nav-link download_buttons mt-10" (click)="export_to_pdf()" id="download_pdf">
                                            <img height="30" alt="pdf icon"
                                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAFN0lEQVR4nO2bT2gcVRzHP29mdrN/u0kWW2m7ra1QUlqhARW8VFCp4k1aFZFaBA1F9GJERawWBC/Fk0WMHsTmoEJF6KUeqrU9ix4KIhWtMWkKQgLb3bjJ7s6Mh9lN9t/svnkzs/nTfC7Jvn37m/f9vd97v9+82YVNNtnkTkaofnBibCJRjEbHbZvnhWAvEAlwXLLMIpgsZJPvnT79TFnFgKHyoTMnz20tGtXvgVGh7MJA2I7NW+m5BYC3VQx4dsCZk+e2aob5I4gDqeEkxfkFAF774GHPF9eNOJoRB8CqljCrpbb2Rhr7ANz6p8D5z38Bm+MoOkDz0tkRb/0AHEhlU+x6+nGVawLNIk0J8WaLeKHp7NqXq7/crjoOaQesiLcPprIpdh07gpGMKV20VbwlId5qEW9E016G74qUhY0qHhkrG1k8vSwFIV6PDTl/16B46JIF/IsX6LFBtNggArFccKwl8bhZDGTm40NosUEARCwDetSzeD0+HKp46BABE2MTCafIEQfTd6XJHT2CkRjwbNgszSPsmvhyEbNc9CReiyTRBjJomg6m6fn6srS5tRiNjoMYTQ0ne4pfuPkvAMl0ex/diDthXykpidcTWecNIwF6eFV2WwTUanuK8wv89um3Ukb2H9ra9Lppw1vKew57bSCz8qbQIJIAsQTVRTlVHmhzQO3GRopkeoCR0W08+Mg9y21+d3trKe+EvZFwxNuWI9yseJAlT6csEAH/tb2v3d40gUVn5kMUD4p3g50IPM+bFSfsQxQPAeWW0IqcENZ8K74dsFYrPFmUl8CN6/P8dOE6xfxSkONR5qNXv7C7vS8QMxZi7I2zJy42tiu7/cqFP9aMeBls7J0Ca6K1XSkCdCNOIe+sz8UTz/kcWn+IffkVQK613XMEuK3t9YonB2w08eDBAa27/UZBag9wS3UyvDASYWeq2c/Fis21OYurN6uYdud+ZRP+Llhcnqkyt2h3tQcwXbSY/N170dQzAvyIBzoONhURPHS3zuEdhmu/qA77BjVO7I+yJSpc+/mlawR0K3K88uHPKykzl9I4PhLhvqzG5ZnO/dJRwZO7De7NaDyaM/juz0rHfn5xdafXCs8L00ULcCLBjULZ5uJUFYC9W8KrEl0thyXeC7fLztof0MO7RlfXWiGJz9XWcbHStXrtC657QNAz/8797cdm1+asQOypZgDo4oAww74xDa420lmgEa+pENR27Xr6W+pwKBxUFnB1gOz9fFhsqaVBgL/y6kulF64OWC3xrXtFqWpzaSa8pSJ9O2wpiq/nfJl+uYYqb8l0Zv7STJVC2W7qFyRSDuh0jCWL7O4cdD9ZepZY7md4G4OuDmiqBWJDCN1Y1QPMMJArhGLOk14tmoLyf8DqV3BB0bMQArDKBUd8pURdfDoTp5Av1c/a1gvTrQ09Y9lZ87WZt1d24MeOjZLOrKvjsWlhMdba2DULND+0aA77PSPbePndJ3yNKIi64uNTVwAYP/ui0lc2XSMg7Cc2/aooe+Gq7k4QD10VhiNetaIMi8Aej8uwlma+Tt8qmrUoHiQi4OuzVxEaPPvKYeW2Y2MPLIs//9mvCE1w9KVDy/38tPmlpwNmp+Z8tzXO/K3p2239/LT5ZeMU9Yr0jIAde7JKbWa1xPbdmbZ+Qbf5pa16qn/T4vUzTykb7eeGF3glKIS4BXDzRvualqGf4men8sv/qtpo/6aoYBKbN7/55Kqqzb4j4JzqZ9scUBhOnErPLdi1HyIp/xanT8wimLydTb6/2gPZZJNN1if/A3wF2OjY6OylAAAAAElFTkSuQmCC" />
                                            <span class=" ml-5 fs-12">Download to PDF</span>
                                        </button>
                                        <hr>
                                        <button class="nav-link download_buttons mb-10" (click)="export_to_xlsx()" id="download_xlsx">
                                            <img height="30" alt="pdf XLSX"
                                                src="data:image/png;base64,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" />
                                            <span class=" ml-5 fs-12">Download to XLSX</span>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

Answer 1

I haven't used Angular Material, but as an example, I would use a reactive form, make the date input required, and link the disabled state of the download button to the form:

HTML

<form [formGroup]="GeneralForm" (ngSubmit)="onSubmitGeneral(GeneralForm)">
    <input type="text" formControlName="controllerIPaddress">
    <br />
    <button [disabled]="!GeneralForm.valid" type="submit">Submit</button>
</form>

TS

public GeneralForm: FormGroup = this.formBuilder.group({
    controllerIPaddress: ["", [Validators.required],
    readerIPaddress: ["", [Validators.required],
});