angulartypescriptembedtypeform

Accessing angular service from within @typeform/embed createWidget onSubmit callback


I embedded a Typeform in an Angular component using the vanilla SDK successfully.

However when I try to access an Angular service from within the onSubmit callback function I get the following error.

ERROR TypeError: Cannot read properties of undefined (reading '_authService')

Here's the code:

export class OnboardComponent implements AfterViewInit {

  @ViewChild('formContainer') formContainer:any;

  constructor(private _userService:UserService, private _authService: AuthService) { 
  }
  
  ngAfterViewInit(): void {
    createWidget("<<Form ID>>", { 
      enableSandbox: true,
      container: this.formContainer.nativeElement,
      onSubmit: this.formFilled,
    });
  }

  formFilled() {
    this._authService.currentUser$.subscribe(user => {
      this._userService.setUserOnboarded(user);
    });
  }
}

Any ideas of how to fix this?


Solution

  • Try to keep context with bind:

    ngAfterViewInit(): void {
        createWidget("<<Form ID>>", { 
          enableSandbox: true,
          container: this.formContainer.nativeElement,
          onSubmit: this.formFilled.bind(this),
        });
      }