Angular 9: resolver and service on the same component

Question

I have a service from which I get the list of the students from my backend with this simple function

students-service.ts

  getStudents(): Observable<Student[]> {
    return this.httpClient.get<Student[]>(this.studentsUrl, this.baseService.httpOptions);
  }

I've set a resolver to load students before the page is rendered to the user

students-resolver-service.ts

export class StudentsResolverService implements Resolve<Student[]>{

  constructor(private studentsService: StudentsService) { }

      resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Student[] | Observable<Student[]> {
        return this.studentsService.getStudents().pipe(
          catchError(error => {
            return empty();
          })
        )
      }
    }

routing.ts

{ path: '', component: HomeComponent, 
    children: [
      { path: 'students',
        loadChildren: () => import('../modules/students/students.module').then(m => m.StudentsModule),
        resolve: { students: StudentsResolverService }
    },

This is my students-component.ts

export class StudentsComponent implements OnInit {

  students: Student[];
  private _showNewStudentForm: boolean = false;

  constructor(
    private studentsService: StudentsService,
    private activatedRoute: ActivatedRoute
    ) { }

  ngOnInit(): void {
      this.activatedRoute.data.subscribe((data: { students: Student[] }) => {
      this.students = data.students;
      });
  }

  fetchStudents() {
    this.studentsService.getStudents().subscribe(
      (response: Student[]) => {
        this.students = response;
        this.students.forEach(student => console.log(student));
      },
      error => console.log(error)
    )
  }

  public get showNewStudentForm(): boolean {
    return this._showNewStudentForm;
  }

  public set showNewStudentForm(value: boolean) {
    this._showNewStudentForm = value;
  }

  toggleStudentForm() {
    this.showNewStudentForm = !this.showNewStudentForm;
  }

  toggleStudentFormHandler(emittedValue: any) {
    this.fetchStudents();
    this.toggleStudentForm();
  }

}

On the students-component, there is a popup form for the creation of a new student. Once that form is submitted, it disappears from the component. I'd like to refresh the students list from my backend in order to immediately show to the user the brand new created student. Unfortunately, the resolver doesn't fetch the students list again, because the route doesn't refresh after the form submission. So here comes the issue. To overtake that, I've written a simple fetchStudents() method, which actually does the exactly same thing as the resolver, but it's called every time the form is submitted. I do not like this approach, because now my component has a double dependence from students-service: one provided by the resolver and one by itself. Is there a way to make this work only by the mean of the resolver? And if not, is it bad to have both a resolver and a service (from which the resolver fetch the same data initially) in the same component?

NOTE: for brevity, I've omitted to post the form component. What it does is, when is submitted, triggering the toggleStudentFormHandler method, which in turn calls the fetchStudents method to retrieve the new students list

Angular 9: resolver and service on the same component

0 Answers0