MT-work-fronted/src/app/modules/profile/components/profile-user/profile-user.component.html

<section
  class="profile-user"
  fxLayout="row"
  fxLayoutAlign="space-between center"
>
  <div fxLayout="row" fxLayoutAlign="start center" class="gap-20">
    <img src="../../../../../assets/images/tool_1.png" alt="" title="" />

    <div
      *ngIf="!showEdit; else form"
      fxLayout="row"
      fxLayoutAlign="start center"
      class="gap-10"
    >
      <div>
        <p>George Tarielashvili</p>
        <span>Senior UI/UX Designer</span>
      </div>
    </div>
  </div>
  <div class="profile-user__actions">
    <button (click)="onEdit()" *ngIf="!showEdit">Edit</button>
    <div
      *ngIf="showEdit"
      fxLayout="column"
      fxLayoutAlign="start end"
      class="gap-10"
    >
      <button class="save-changes" (click)="onSubmit()">Save Changes</button>
      <button class="cancel" (click)="showEdit = false">Cancel</button>
    </div>
  </div>
</section>

<ng-template #form>
  <div
    class="gap-20"
    fxLayout="column"
    fxLayoutAlign="center start"
    *ngIf="showEdit"
  >
    <input class="input w-100" type="text" value="George Tarielashvili" />
    <input class="input w-100" type="text" value="Senior UI/UX Designer" />
  </div>
</ng-template>