brewman/overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.html

<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
  <mat-card fxFlex>
    <mat-card-title-group>
      <mat-card-title>Rate Contract</mat-card-title>
    </mat-card-title-group>
    <mat-card-content>
      <form [formGroup]="form" fxLayout="column">
        <div
          fxLayout="row"
          fxLayoutAlign="space-around start"
          fxLayout.lt-md="column"
          fxLayoutGap="20px"
          fxLayoutGap.lt-md="0px"
        >
          <mat-form-field fxFlex="40">
            <input
              matInput
              [matDatepicker]="date"
              placeholder="Date"
              formControlName="date"
              autocomplete="off"
              #dateElement
            />
            <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
            <mat-datepicker #date></mat-datepicker>
          </mat-form-field>
          <mat-form-field fxFlex="60">
            <input
              type="text"
              matInput
              placeholder="Account"
              #accountElement
              [matAutocomplete]="autoA"
              formControlName="account"
              autocomplete="off"
            />
            <mat-autocomplete
              #autoA="matAutocomplete"
              autoActiveFirstOption
              [displayWith]="displayFn"
              (optionSelected)="accountSelected($event)"
            >
              <mat-option *ngFor="let account of accounts | async" [value]="account">{{
                account.name
              }}</mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </div>
        <div
          fxLayout="row"
          fxLayout.lt-md="column"
          fxLayoutGap="20px"
          fxLayoutGap.lt-md="0px"
          fxLayoutAlign="space-around start"
        >
          <mat-form-field fxFlex>
            <input
              matInput
              [matDatepicker]="validFrom"
              placeholder="Valid From"
              formControlName="validFrom"
              autocomplete="off"
            />
            <mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
            <mat-datepicker #validFrom></mat-datepicker>
          </mat-form-field>
          <mat-form-field fxFlex>
            <input
              matInput
              [matDatepicker]="validTill"
              placeholder="Valid Till"
              formControlName="validTill"
              autocomplete="off"
            />
            <mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
            <mat-datepicker #validTill></mat-datepicker>
          </mat-form-field>
        </div>
        <div
          formGroupName="addRow"
          fxLayout="row"
          fxLayoutAlign="space-around start"
          fxLayout.lt-md="column"
          fxLayoutGap="20px"
          fxLayoutGap.lt-md="0px"
        >
          <mat-form-field fxFlex="60">
            <input
              type="text"
              matInput
              placeholder="Product"
              #productElement
              [matAutocomplete]="autoP"
              formControlName="product"
              autocomplete="off"
            />
            <mat-autocomplete
              #autoP="matAutocomplete"
              autoActiveFirstOption
              [displayWith]="displayFn"
              (optionSelected)="productSelected($event)"
            >
              <mat-option *ngFor="let product of products | async" [value]="product">{{
                product.name
              }}</mat-option>
            </mat-autocomplete>
          </mat-form-field>
          <mat-form-field fxFlex="20">
            <mat-label>Price</mat-label>
            <input
              type="text"
              matInput
              placeholder="Price"
              formControlName="price"
              autocomplete="off"
            />
          </mat-form-field>
          <button mat-raised-button color="primary" (click)="addRow()" fxFlex="20">Add</button>
        </div>
        <mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
          <!-- Product Column -->
          <ng-container matColumnDef="product">
            <mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
            <mat-cell *matCellDef="let row">{{ row.product.name }}</mat-cell>
          </ng-container>

          <!-- Price Column -->
          <ng-container matColumnDef="price">
            <mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
            <mat-cell *matCellDef="let row" class="right">{{
              row.price | currency: 'INR'
            }}</mat-cell>
          </ng-container>

          <!-- Action Column -->
          <ng-container matColumnDef="action">
            <mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
            <mat-cell *matCellDef="let row" class="center">
              <button mat-icon-button tabindex="-1" color="warn" (click)="deleteRow(row)">
                <mat-icon>delete</mat-icon>
              </button>
            </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
        </mat-table>
        <mat-form-field>
          <mat-label>Narration</mat-label>
          <textarea
            matInput
            matAutosizeMinRows="5"
            placeholder="Narration"
            formControlName="narration"
          ></textarea>
        </mat-form-field>
      </form>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button color="primary" (click)="save()">Save</button>
      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
    </mat-card-actions>
  </mat-card>
</div>