0

I would like to add a material date picker conditionally but without duplicating my input tag.

For example, if i have this :

.ts : 

isDatePickerInputList: boolean[] = [false, true]

The easy way would be to have 2 input in a *ngFor : the first input would be a normal input and the second one an input linked with a matDatePicker

But i don't want this solution because it would mean duplicating my input tag

.html :

<ng-container *ngFor="let isDatePickerInput of isDatePickerInputList">

   <ng-container *ngIf="isDatePickerInput">
      <input [matDatepicker]="picker" matInput>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
   </ng-container>

   <ng-container *ngIf="!isDatePickerInput">
      <input matInput>
   </ng-container>

</ng-container>

I want something like that (but of course that is not working actually) : 

<ng-container *ngFor="let isDatePickerInput of isDatePickerInputList">

   <input [matDatepicker]="isDatePickerInput ? 'picker' : ''" matInput>
   <ng-container *ngIf="isDatePickerInput">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
   </ng-container>
</ng-container>
Gauthier T.
  • 556
  • 1
  • 4
  • 16

1 Answers1

0
<ng-container *ngFor="let isDatePickerInput of isDatePickerInputList">
    <ng-container *ngIf="isDatePickerInput"> text {{isDatePickerInput!.picker}} 
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
</ng-container>
</ng-container>

Didnt try but sure not working i thought maybe here you find something usefull: angular template syntax

Qiqke
  • 486
  • 5
  • 19