wh-inline-editor v0.1.2

Wheat House Inline Editor

This library is designed spefically for Angular Material projects with plans to remove the Angular Material specification at a future date. Simple wrapper that gives a visual upgrade helpful for form heavy applications or input heavy grids.

Install

npm install wh-inline-editor

Sample Usage

Basic Wrapper

<wh-inline-editor [model]="testForm.get('name').value" elementReference="name">
  <mat-form-field>
    <input matInput formControlName="name" placeholder="Name" id="name" />
  </mat-form-field>
</wh-inline-editor>

Mat-Select

<wh-inline-editor [model]="form.get('option').value" [matSelect]="select" elementReference="select">
  <mat-form-field>
    <mat-select #select formControlName="option" id="select">
      <mat-option value="A">A</mat-option>
      <mat-option value="B">B</mat-option>
      <mat-option value="C">C</mat-option>
    </mat-select>
  </mat-form-field>
</wh-inline-editor>

Mat-Datepicker + Pipe

<wh-inline-editor [(model)]="model.date" elementReference="datepickerInput" 
                  [datepicker]="picker" [pipe]="datePipe" pipeArgs="dd/MM/yyyy">
  <mat-form-field>
    <input matInput [matDatepicker]="picker" id="datepickerInput" [(ngModel)]="templateDrivenFormsModel.date" 
           placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker id="picker"></mat-datepicker>
  </mat-form-field>
</wh-inline-editor>

Input Parameters

License

MIT