profile-user.component.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <section
  2. class="profile-user"
  3. fxLayout="row"
  4. fxLayoutAlign="space-between center"
  5. >
  6. <div fxLayout="row" fxLayoutAlign="start center" class="gap-20">
  7. <img src="../../../../../assets/images/tool_1.png" alt="" title="" />
  8. <div
  9. *ngIf="!showEdit; else form"
  10. fxLayout="row"
  11. fxLayoutAlign="start center"
  12. class="gap-10"
  13. >
  14. <div>
  15. <p>George Tarielashvili</p>
  16. <span>Senior UI/UX Designer</span>
  17. </div>
  18. </div>
  19. </div>
  20. <div class="profile-user__actions">
  21. <button (click)="onEdit()" *ngIf="!showEdit">Edit</button>
  22. <div
  23. *ngIf="showEdit"
  24. fxLayout="column"
  25. fxLayoutAlign="start end"
  26. class="gap-10"
  27. >
  28. <button class="save-changes" (click)="onSubmit()">Save Changes</button>
  29. <button class="cancel" (click)="showEdit = false">Cancel</button>
  30. </div>
  31. </div>
  32. </section>
  33. <ng-template #form>
  34. <div
  35. class="gap-20"
  36. fxLayout="column"
  37. fxLayoutAlign="center start"
  38. *ngIf="showEdit"
  39. >
  40. <input class="input w-100" type="text" value="George Tarielashvili" />
  41. <input class="input w-100" type="text" value="Senior UI/UX Designer" />
  42. </div>
  43. </ng-template>