mean-guide-frontend/src/app/posts/post-create/post-create.component.html

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1.

<mat-card>
  <mat-spinner *ngIf="isLoading"></mat-spinner>
  <form [formGroup]="form" (submit)="onSavePost()" *ngIf="!isLoading">
    <mat-form-field>
      <input formControlName="title" matInput type="text" name="title" placeholder="Post title"/>
      <mat-error *ngIf="form.get('title').invalid">Please enter a valid title.</mat-error>
    </mat-form-field>
    <div>
      <button mat-stroked-button type="button" (click)="filePicker.click()">Pick Image</button>
      <input type="file" #filePicker (change)="onImagePicked($event)">
    </div>
    <div class="image-preview" *ngIf="imagePreview && imagePreview !== '' && form.get('image').valid">
      <img [src]="imagePreview" [alt]="form.value.title">
    </div>
    <mat-form-field>
      <textarea rows="6" formControlName="content" name="content" matInput placeholder="Post content"></textarea>
      <mat-error *ngIf="form.get('content').invalid">Please enter a valid content.</mat-error>
    </mat-form-field>
    <button color="primary" mat-raised-button type="submit">
      Save Post
    </button>
  </form>
</mat-card>