Refreshing the route in Angular 6 using a partial component

Question

Refreshing the route in Angular 6 using a partial component

I am developing an app that offers courses in both English and French. My goal is to create a language dropdown header component that will be visible across all pages of the program. When a user selects a different language from the dropdown, I want the following actions to take place:

The frontend should call the backend to update the user's language preference so that the next time they visit, they will see the courses in their chosen language.
Regardless of the current page, the route should change to the course-list page and load the courses according to the updated language preference.

Currently, this functionality only works after refreshing the page and not immediately. It worked when I included the language button in every component.

EDIT: The language switch is functioning on all pages except for the course-list page, possibly because we are already within this component and don't trigger the `getCoursesByLanguage` function (when navigating from other components, I use router.navigate to the course-list component which triggers `getCoursesByLanguage`). How can I make it work on the course-list page?

This is the relevant code:

app.component.html

<div class='container-fluid' id='main'>
      <lg-header></lg-header>
      <router-outlet></router-outlet>
</div>

header.component.html

<div style="float:right; padding-right:30px">
  <button id="button-logout" mat-button (click)="toggleLanguage()">
    <img width="27" height="17" style="margin-right: 10px;" src="./assets/images/{{flag}}_Flag.png"/>
    <span>{{languageName}}</span>
  </button>
</div>

header.component.ts

import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
import { ActivatedRoute, Router, Routes } from '@angular/router';
import { LocalStorage } from '@ngx-pwa/local-storage';

import { IUser, IUserCourses } from '../users/user';
import { UserProgressService } from '../users/user-progress.service';

@Component({
  selector: 'lg-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.sass']
})
export class HeaderComponent implements OnInit {
  // variables for laungage
  language: number;
  languageName: string;
  flag: string;

  constructor(private route: ActivatedRoute,
              private router: Router,
              private userProgressService: UserProgressService) {
                userProgressService.connectUser();
                this.getUpdatedLanguageAndFlag();
              }

  // get from service updated data from backend and localStorage
  getUpdatedLanguageAndFlag() {
    this.language = this.userProgressService.getLanguage();
    this.flag = this.userProgressService.getFlag();
    this.languageName = this.userProgressService.getLanguageName();
  }

  ngOnInit() { }

  // change laungage
  toggleLanguage(){
    this.userProgressService.changeAppLanguage();
    this.getUpdatedLanguageAndFlag();
    if (this.router.url == '/courses') {
      // I need to trigger here getCourseListByLanguage in course-list from here
    }
    else
      this.router.navigate(["/courses"]);
  }
}

user-progress.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, groupBy } from 'rxjs/operators';
import { LocalStorage } from '@ngx-pwa/local-storage';

import { UserService } from './user.service';
import { IUser, IUserCourses } from './user';

@Injectable({
  providedIn: 'root'
})

export class UserProgressService {
      private user: IUser;
      private errorMessage: string;
      private language: number;
      private flag: string;
      private languageName: string;

      constructor(private userService: UserService) { }

      // get user from local store
      connectUser() {
        this.user = JSON.parse(localStorage.getItem('user'));
        this.language =+ localStorage.getItem('language');
        this.flag = localStorage.getItem('flag');
        this.languageName = localStorage.getItem('languageName');
      }

      ...

angular typescript routes local-storage partial

Answer 1

Answer №1

It seems like a timing issue is causing the problem.

Typically, it is recommended to subscribe in the user interface as close to the event that requires the subscription result.

You can try moving the subscribe function here (pseudo code):

  toggleLanguage(){
    this.userProgressService.changeAppLanguage().subscribe(x => {
      this.getUpdatedLanguageAndFlag();
      this.router.navigate(["/courses"]);
    };
  }

By placing the two functions within the subscribe block, you ensure they are only executed once the language is actually changed.

PLEASE NOTE: In order for this to work correctly, your .changeAppLanguage() method must return an observable. Therefore, the code needs to be adjusted accordingly (pseudo code):

  changeAppLanguage(): Observable<any> {
    if ( this.language == 0 )
        this.language = 1;

    else
        this.language = 0;

    this.setFlagLanName();
    return this.userService.updateLanguage(this.user.id, this.language);
  }

MOST IMPORTANTLY: This code has not been syntax checked due to lack of provided stackblitz with the code.

The main concept to remember is that services should not directly subscribe. Instead, they should return an Observable. The component code should handle the subscription. Any actions that need to take place after the subscription emits a value should be placed inside that subscribe block.

This approach will help ensure that your processes happen in the correct order.

Answer 2

It seems like a timing issue is causing the problem.

Typically, it is recommended to subscribe in the user interface as close to the event that requires the subscription result.

You can try moving the subscribe function here (pseudo code):

  toggleLanguage(){
    this.userProgressService.changeAppLanguage().subscribe(x => {
      this.getUpdatedLanguageAndFlag();
      this.router.navigate(["/courses"]);
    };
  }

By placing the two functions within the subscribe block, you ensure they are only executed once the language is actually changed.

PLEASE NOTE: In order for this to work correctly, your .changeAppLanguage() method must return an observable. Therefore, the code needs to be adjusted accordingly (pseudo code):

  changeAppLanguage(): Observable<any> {
    if ( this.language == 0 )
        this.language = 1;

    else
        this.language = 0;

    this.setFlagLanName();
    return this.userService.updateLanguage(this.user.id, this.language);
  }

MOST IMPORTANTLY: This code has not been syntax checked due to lack of provided stackblitz with the code.

The main concept to remember is that services should not directly subscribe. Instead, they should return an Observable. The component code should handle the subscription. Any actions that need to take place after the subscription emits a value should be placed inside that subscribe block.

This approach will help ensure that your processes happen in the correct order.

Answer 3

Answer №2

You have code here that retrieves all the courses:

  ngOnInit() {
    this.getCourseList();
  }

After retrieving them, you filter them immediately:

  // Obtain list of courses from service
  getCourseList() {
    this.courseService.getCourses()
      .subscribe(
        courses => {
          this.courses = courses;
          this.getCourseListByLanguage();
        },
        errorMessage => this.errorMessage = <any>Error
      );
  }

  getCourseListByLanguage() {
    this.getUpdatedLanguageAndFlag();
    this.coursesByLanguage = this.courses.filter( course => course.language == this.language);
  }

Now your courses are filtered for a specific language: English1, English2, English3, etc.

Later on, you call toggleLanguage and re-filter the courses.

  toggleLanguage(){
    this.userProgressService.changeAppLanguage();
    this.getCourseListByLanguage();
  }

But at that point, courses is already filtered, so you can't re-filter them to another language.

To solve this issue, you should keep a separate list of all courses apart from the filtered ones.

Something like this:

  courses: ICourse[] = [];
  allCourses: ICourse[] = [];

Then populate it here:

  getCourseList() {
    this.courseService.getCourses()
      .subscribe(
        courses => {
          this.allCourses = courses;    // Populate all courses here
          this.getCourseListByLanguage();
        },
        errorMessage => this.errorMessage = <any>Error
      );
  }

Filter into the courses variable afterwards.

  getCourseListByLanguage() {
    this.getUpdatedLanguageAndFlag();
    this.coursesByLanguage = this.allCourses.filter( course => course.language == this.language);
  }

Now you're always filtering the complete list of all courses into only those for the specific language in the courses property.

Does this solution work?

Answer 4

You have code here that retrieves all the courses:

  ngOnInit() {
    this.getCourseList();
  }

After retrieving them, you filter them immediately:

  // Obtain list of courses from service
  getCourseList() {
    this.courseService.getCourses()
      .subscribe(
        courses => {
          this.courses = courses;
          this.getCourseListByLanguage();
        },
        errorMessage => this.errorMessage = <any>Error
      );
  }

  getCourseListByLanguage() {
    this.getUpdatedLanguageAndFlag();
    this.coursesByLanguage = this.courses.filter( course => course.language == this.language);
  }

Now your courses are filtered for a specific language: English1, English2, English3, etc.

Later on, you call toggleLanguage and re-filter the courses.

  toggleLanguage(){
    this.userProgressService.changeAppLanguage();
    this.getCourseListByLanguage();
  }

But at that point, courses is already filtered, so you can't re-filter them to another language.

To solve this issue, you should keep a separate list of all courses apart from the filtered ones.

Something like this:

  courses: ICourse[] = [];
  allCourses: ICourse[] = [];

Then populate it here:

  getCourseList() {
    this.courseService.getCourses()
      .subscribe(
        courses => {
          this.allCourses = courses;    // Populate all courses here
          this.getCourseListByLanguage();
        },
        errorMessage => this.errorMessage = <any>Error
      );
  }

Filter into the courses variable afterwards.

  getCourseListByLanguage() {
    this.getUpdatedLanguageAndFlag();
    this.coursesByLanguage = this.allCourses.filter( course => course.language == this.language);
  }

Now you're always filtering the complete list of all courses into only those for the specific language in the courses property.

Does this solution work?

Refreshing the route in Angular 6 using a partial component

Answer №1

Answer №2

Similar questions

What is the best way to send variables to a proxy server URL?

Utilizing a Service to Render Components in Angular 6

Encountering issues with app functionality following update to Ionic RC4 version

Utilize an external JavaScript function within a React and TypeScript document

The library's service under NG6 is not currently defined

Is it possible to transmit an argument to a function without using parentheses?

Encountering a delay in receiving server data causing errors in Angular 2

change in the value of a nested formArray within a parent formArray

Having trouble showcasing local images on an S3-hosted Angular 2 app

Angular routerLink causes ngOnInit to be triggered only once

What is the best way to integrate environment-specific configuration options into an AngularJS and Typescript project?

The MVC Routing feature in my .NET Core React application seems to be struggling to recognize my Controller

Expanding ngFor in Angular 2

The React effect hooks do not re-run when the dependencies are modified

Experimenting with Date Object in Jest using Typescript and i18next

The Angular language service is experiencing difficulties in VS Code when it comes to newly created components using the CLI

Having trouble getting the Angular 2 quickstart demo to function properly?

The identity of the property cannot be located within undefined

The supplied parameters do not correspond with any valid call target signature for the HTTP delete operation

Blocking JavaScript execution and the message queue