как получить входное значение в html-компоненте из класса службы, чтобы обновить переменную, которую имеет эта служба

Добрый день, разработчики, я пытаюсь найти способ получить значение, которое входящий тег html имеет из моего класса обслуживания в том же классе angular. Этот ввод прикреплен к ngForm, таким образом, связан с компонентом интерфейса модели для проверки этой формы Я попытался импортировать тот же компонент интерфейса модели в класс обслуживания, чтобы получить к нему доступ, но не работает. Это услуга:

***variable type model interface***

formSignup: signUpForm = {
    nameUser: '',
}=========>model interface component also imported to service in order to access whichever values user insert in it

***method where in the variable gets updated accesisng the model interface***

 async signUpUser(emailUser: string, passwordUser: string) {
    some code.....

  await responseOk.user.updateProfile({
     displayName:this.formSignup.nameUser});===>this is the value i want to update dynamically from the 
                                                 input value

    more code......
}

Вот мои компоненты html, model и component.ts, связанные с моей проблемой:

HTML
    <form #submitSign='ngForm' (submit)="signUp(submitSign.value)">
      <input type="text" [(ngModel)]="formSignup.nameUser" name="nameUser" class="form-control" 
      id="nameUser"  placeholder="Name " #nameUser="ngModel"
   </form>

MODEL INTERFACE

export interface signUpForm{
  nameUser?:string,
}

COMPONENT.TS

formSignup: signUpForm = {
    nameUser:'',
    emailUser: '',
    passwordUser: '',
    confirmPasswordUser: '',
    imageUser: '',
  };


  constructor(
    private signUserUp: service){}

  ngOnInit(): void {}

  signUp(value: signUpForm) {
    this.signUserUp
      .signUpUser(value.emailUser, value.passwordUser)
      .then((response) => {

         some code.......
      })
      .catch((error) => error.messages);
}

Есть идеи, как это улучшить? Заранее спасибо !!!