KanbanCloneAngular/src/app/pages/project-edit/project-edit.component.html

<div class="edit-project">
  <div class="card">
    <h1>Edit project</h1>

    <div class="error" *ngIf="errorMessage()">{{ errorMessage() }}</div>

    <ng-container *ngIf="isLoading(); else formContent">
      <p class="loading">Loading project...</p>
    </ng-container>

    <ng-template #formContent>
      <form (ngSubmit)="onSubmit()" #projectForm="ngForm">
        <div class="form-group">
          <label for="name">Project name</label>
          <input
            id="name"
            type="text"
            name="name"
            [(ngModel)]="name"
            placeholder="Enter a project name"
            required
          />
        </div>

        <div class="form-group">
          <label for="description">Description</label>
          <textarea
            id="description"
            name="description"
            [(ngModel)]="description"
            rows="4"
            placeholder="Enter a project description"
            required
          ></textarea>
        </div>

        <div class="actions">
          <button type="button" class="btn-secondary" (click)="onCancel()">Cancel</button>
          <button
            type="submit"
            class="btn-primary"
            [disabled]="isSaving() || !projectForm.form.valid"
          >
            <span *ngIf="isSaving(); else saveText">Saving...</span>
            <ng-template #saveText><span>Save changes</span></ng-template>
          </button>
        </div>
      </form>
    </ng-template>
  </div>
</div>