How split functionality in observer angular

July 14, 2023

I have some component with two methods. One of them calls authService:

onClickSubmit(data: any) {
    this.trigger = false;
    this.authService.login(data.userName, data.password);
}

drop_trigger() {
    this.trigger = false;
}

AuthService creates post resquest to backend.

login(username: string, password: string) {
      const url = this.AUTH_URL
      const headers = new HttpHeaders().set('accept', 'application/json');
      let requestBody = new FormData();
      requestBody.append('username', username);
      requestBody.append('password', password);
      const resp = this.http.post<LoginUserResponse>(
         url, requestBody, {headers}
      ).subscribe(
         data => {
            this.setSession(data);
         }
      );

This method sets session after recieve response from backend.
I need some functionality into my component (for example to call component.drop_trigger), that calls after setSession and was in component. How can i do this?

>Solution :

best approach is to subscribe it in the component and then call the setSession after get response.

In service:

login(username: string, password: string) {
      const url = this.AUTH_URL
      const headers = new HttpHeaders().set('accept', 'application/json');
      let requestBody = new FormData();
      requestBody.append('username', username);
      requestBody.append('password', password);
      return this.http.post<LoginUserResponse>(
         url, requestBody, {headers}
      ).pipe(tap(data => this.setSession(data)));
}

Component:

onClickSubmit(data: any) {
    this.trigger = false;
    this.authService.login(data.userName, data.password)
      .subscribe(
         data => {
            this.drop_trigger();
         }
      );
}