profile.component.html

<mat-card *ngIf="user | async as User">
  <mat-toolbar color="accent">
    Your Profile
  </mat-toolbar>
  <div layout="column" layout-align="center center">
    <img
      [style.margin-top.px]="'10'"
      [style.margin-bottom.px]="'10'"
      class="profilePhoto"
      src="{{
        User.ProfilePhoto === '' ? '/assets/profile.png' : User.ProfilePhoto
      }}"
    />
    <button
      mat-raised-button
      color="accent"
      (click)="profilePhotoInput.click()"
    >
      Upload a new profile photo
      <mat-icon>file_upload</mat-icon>
    </button>
    <input
      class="file-input"
      type="file"
      #profilePhotoInput
      (change)="uploadProfilePhoto($event.target.files, User.Id)"
    />
  </div>

  <mat-toolbar [style.background]="'white'">
    <span flex>{{ User.FirstName }} {{ User.LastName }}</span>
    <button
      mat-icon-button
      color="primary"
      *ngIf="profileForm.disabled"
      (click)="profileForm.enable()"
    >
      <mat-icon>edit</mat-icon>
    </button>
    <button
      mat-icon-button
      color="warn"
      *ngIf="profileForm.enabled"
      (click)="profileForm.disable()"
    >
      <mat-icon>highlight_off</mat-icon>
    </button>
  </mat-toolbar>
  <div class="md-padding" layout="column">
    <form
      [formGroup]="profileForm"
      layout="column"
      (submit)="updateName(User.Id)"
    >
      <div layout="column" layout-gt-sm="row">
        <mat-form-field appearance="outline" flex>
          <mat-label>First Name</mat-label>
          <input matInput type="text" formControlName="firstName" required />
          <mat-error *ngIf="profileForm.get('firstName').hasError('required')">
            Please enter a first name
          </mat-error>
        </mat-form-field>
        <mat-form-field appearance="outline" flex>
          <mat-label>Last Name</mat-label>
          <input matInput type="text" formControlName="lastName" required />
          <mat-error *ngIf="profileForm.get('lastName').hasError('required')">
            Please enter a last name
          </mat-error>
        </mat-form-field>
      </div>

      <button mat-raised-button color="primary" *ngIf="profileForm.enabled">
        Update Profile
      </button>
    </form>

    <button
      [style.margin-top.px]="'10'"
      [style.margin-bottom.px]="'10'"
      mat-raised-button
      color="accent"
      (click)="changePassword(User.Email)"
    >
      Send Password Reset Email
    </button>
  </div>
</mat-card>

profile.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  Validators
} from '@angular/forms';
import { IUser } from 'firebasenoteapptypes';
import { Observable, Subscription } from 'rxjs';
import { AuthService, UserService } from 'src/app/services';
import Swal from 'sweetalert2';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnDestroy {
  user: Observable<IUser>;
  profileForm: FormGroup;

  subscription = new Subscription();

  constructor(
    private userService: UserService,
    private fb: FormBuilder,
    private auth: AuthService
  ) {
    this.user = this.userService.user;

    this.profileForm = this.fb.group({
      firstName: new FormControl('', [Validators.required]),
      lastName: new FormControl('', [Validators.required])
    });

    this.profileForm.disable();

    this.subscription.add(
      this.userService.user.subscribe(u => {
        this.profileForm.get('firstName').setValue(u.FirstName);
        this.profileForm.get('lastName').setValue(u.LastName);
      })
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  updateName(id: string) {
    this.userService.update({
      Id: id,
      FirstName: this.profileForm.get('firstName').value,
      LastName: this.profileForm.get('lastName').value
    });

    this.profileForm.disable();
  }

  uploadProfilePhoto(files: FileList, userId: string) {
    if (files.length > 1) {
      Swal.fire(
        'Too many files',
        'You can only upload a single file',
        'warning'
      );
    } else {
      const file = files.item(0);

      if (!file.type.includes('image')) {
        return Swal.fire({
          title: 'Unsupported File Format',
          text: 'We only support image files for profile photos.',
          type: 'warning'
        });
      }

      this.userService.uploadProfilePhoto(userId, files.item(0));
    }
  }

  changePassword(email: string) {
    this.auth.changePassword(email);
  }

  deleteAccount(id: string) {
    Swal.fire({
      title: 'Are you sure?',
      text: 'This will permananetly delete your account and all notes',
      type: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes',
      cancelButtonText: 'No'
    }).then(result => {
      if (result.value) {
        this.userService.delete(id);
      }
    });
  }
}