How to hide datepicker when radio button is selected?

Question

So, I have datepicker and a radio button. I want to hide the datepicker when the radiobutton is selected.

so this is the datepicker:

     <div formGroupName="groupDateTwo">
            <mat-form-field class="search-field-input md-datepicker-input-container">
              <input
                matInput
                readonly
                required
                [matDatepicker]="picker2"
                placeholder="start datum"
                formControlName="startDate"
                (ngModelChange)="onChange($event)"
              />
              <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
              <mat-datepicker #picker2></mat-datepicker>
            </mat-form-field>
          </div>

and this is when the radio button is selected:

if (optionLabel === 'Registratie') {   


    }

and this is the datefield:

startDate: Date;

So my question is, can you hide the datepicker when the radio button is selected in ts script?

Thank you

Answer 1

Just add one new data-bound property on just above the constructor of your component or class like

showDatePicker: boolean = true;

And in your radio button selection hook, assign true to the above data-bound property.

if (optionLabel === 'Registratie') {   
   this.showDatePicker = false;
}

And finally in your component html, use *ngIf="expression" or [hidden]="expression"

<mat-form-field class="search-field-input md-datepicker-input-container" *ngIf="showDatePicker">
  ...
</mat-form-field>

Answer 2

<ng-template [ngIf]="optionLabel=='Registratie'">
 <mat-form-field class="search-field-input md-datepicker-input-container">
          <input
            matInput
            readonly
            required
            [matDatepicker]="picker2"
            placeholder="start datum"
            formControlName="startDate"
            (ngModelChange)="onChange($event)"
          />
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
  </mat-form-field>
</ng-template>

this means if optionLabel=='Registratie' then it will display the datepicker