test gist 1

test.html

<h3>
  Create Project 
</h3>
        
<p *ngIf="errorMessage">{{errorMessage}}</p>
<p *ngIf="successMessage">{{successMessage}}</p>

<!-- <p>{{model.mainImage | async}}</p> -->
<div class="full-center">
       
  <mat-card class="login-card small-card">
     <form 
     #createForm="ngForm" (ngSubmit)="onSubmit(createForm.value)">
      <div class="small-card-container">

          <p>{{model.mainImage}}</p>
          <upload (urlChange)="uploadDone($event)" [data]="inputToChild"></upload>

          <mat-form-field>
            <input matInput placeholder="Description" id="description" required
            [(ngModel)]="model.description" name="description"
            #description="ngModel">
          </mat-form-field>
        
          <mat-form-field>
              <input matInput placeholder="Name" id="name" required
              [(ngModel)]="model.name" name="name"
              #name="ngModel">
          </mat-form-field>

          
          <editor required
          [(ngModel)]="model.body" name="body"
          #body="ngModel" [init]="{plugins: 'link'}"></editor>
          
      <p>{{errorMessage}}</p>
     <button  mat-raised-button color="primary" type="submit">
        Submit
      </button>
          <!-- <p>
              Click here to sign-up if you don't have an account
          </p>  -->
        </div>
      </form>
    </mat-card> 


    <preview [model]="model"></preview>
    
    </div>