Возвращение данных в реактивную форму в Angular 7

Я поставил перед собой задачу войти в систему, получить существующие данные пользователя, а затем предоставить пользователю возможность редактировать их. У меня есть реактивная форма Angular 7, например:

userdetails.page.ts

    constructor(private formBuilder: FormBuilder,
    private currentuser: UserService,
    private router: Router ) {

     }

     ngOnInit() {
    // first we need to make sure the current user data is up to date.
      this.currentuser.getUserServer();
      //
        console.info('currentUser = ' + this.currentuser.data);


      this.userDetailsForm = this.formBuilder.group({
        id: [this.currentuser.data.Id],
        email: [this.currentuser.data.Email],  // [Validators.required, Validators.email]],
        username: [this.currentuser.data.UserName],
        dateofbirth: [this.currentuser.data.DateOfBirth],
        title: [this.currentuser.data.Title],
        firstname: [this.currentuser.data.FirstName],
        middlename: [this.currentuser.data.MiddleName],
        lastname: [this.currentuser.data.LastName],
        displayname: [this.currentuser.data.DisplayName],
        fullname: [this.currentuser.data.FullName],
        detailscomplete: [this.currentuser.data.Id],
        password: [this.currentuser.data.Password], // [Validators.required, Validators.minLength(6)]]
      });

  }

Я пытаюсь разделить вещи, поэтому у меня есть пользовательский сервис и сервис API. (Но я не уверен, что служба API строго необходима - или она должна быть просто частью вызова пользовательской службы?) Служба API (используемая функция):

API.service.ts

  Get(endpoint: string) {
        const fullurl = this.ServerUrl + endpoint;
        return this.http.get(fullurl, {
          headers: {'Content-Type': 'application/json'}
        });

  }

Что, как я понимаю, возвращает наблюдаемое, и именно здесь я немного застреваю. Объект JSON с сервера также содержит некоторые нерелевантные объекты, а также те, которые мне нужны, поэтому я пытаюсь получить только те элементы, которые мне нужны. Средняя функция имеет следующее:

user.service.ts

public data:  UserData;

getUserServer() {
  this.api.Get(this.api.GetUserDetailsEndPoint).subscribe(res => {
    console.info('Id from server = ' + res['Id']);
    this.data = {
    Id:           res['Id'],
    Email:        res['Email'],
    UserName:     res['UserName'],
    DateOfBirth:  res['DateOfBirth'],
    Title:        res['title'],
    FirstName:    res['FirstName'],
    MiddleName:   res['MddleName'],
    LastName:     res['LastName'],
    DisplayName:  res['DisplayName'],
    FullName:     res['FullName'],
    DetailsComplete: res['DetailsComplete'],
    Password:     res['Password']
    };
    console.info('This Data.Id = ' + this.data.Id)
  });
}

Это работает до момента получения данных, и регистрация идентификатора представляет правильную информацию, и другие тоже есть. (Последняя строка выше.) Однако я чувствую, что мне нужно превратить this.data в наблюдаемую, чтобы вернуться к форме, где я, вероятно, должен подписаться на нее.

Я попытался определить это как observable<UserData>, а также observable<IUserData> (это интерфейс, а не класс), но это нарушает назначение элементов. Я чувствую, что я довольно близок, но упускаю что-то основное.

Это правильный подход? Как я могу получить возвращенные данные на самом деле в форме? Затем, я думаю, возвращение на сервер будет происходить в том же духе.