<div class="app-card-title mb-3">
   <anglo-title-component title="Timepicker"></anglo-title-component>
</div>
<div class="grid-wrapper time-picker-wrap" fxLayout="row wrap">
   <div class="app-card" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
      <mat-card>
         <div class="card-title p-2">
            <h3>{{'Time Picker - In Dialog And Menu'|translate}}</h3>
         </div>
         <div class="card-content p-2">
            <p class="mb-2">Due to the flexibility of pickers, you can really dial in the experience exactly how you want it.</p>
            <mat-form-field>
               <input matInput placeholder="Picker in menu" [ngxTimepicker]="menuTime" readonly>
            </mat-form-field>
            <ngx-material-timepicker #menuTime></ngx-material-timepicker>
         </div>
      </mat-card>
   </div>
   <div class="app-card" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
      <mat-card>
         <div class="card-title p-2">
            <h3>{{'Time Picker - Toggle Button'|translate}}</h3>
         </div>
         <div class="card-content p-2">
            <p class="mb-2">Due to the flexibility of pickers, you can really dial in the experience exactly how you want it.</p>
            <div fxLayout="row" fxLayoutAlign="start center">
               <div class="mr-2">
                  <ngx-material-timepicker-toggle [for]="toggleTimepicker"></ngx-material-timepicker-toggle>
                  <ngx-material-timepicker #toggleTimepicker></ngx-material-timepicker>
               </div>
               <mat-form-field>
                  <input matInput placeholder="Picker" [ngxTimepicker]="toggleTimepicker" [disableClick]="true" readonly>
               </mat-form-field>
            </div>
         </div>
      </mat-card>
   </div>
</div>