js__typescript__pluralsight2/course/src/app/create-report-item.component.html

<h1 mat-dialog-title>Add new item</h1>
<mat-error *ngIf="errorMessage">{{ errorMessage }}</mat-error>
<div mat-dialog-content class="create-report-item-form-content">
    <mat-form-field>
        <input matInput placeholder="Item description" [(ngModel)]="item.description">
    </mat-form-field>

    <mat-form-field>
        <input matInput placeholder="Amount" type="number" [(ngModel)]="item.amount">
    </mat-form-field>

    <mat-form-field>
        <input matInput [matDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="item.date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="expense type" [(ngModel)]="item.type">
            <mat-option *ngFor="let opt of itemTypeOptions" [value]="opt">{{opt}}</mat-option>
        </mat-select>
    </mat-form-field>

    <mat-checkbox [(ngModel)]="item.hasReceipt">Has receipt</mat-checkbox>
</div>
<div mat-dialog-actions>
    <button mat-button color="primary" (click)="addItem(item)">Add</button>
    <button mat-button mat-dialog-close>Cancel</button>
</div>