0

I have a Component that has 2 "view states" (vertical and horizontal).
in order to show\load the users preference i am checking a value of a static boolean property (AppService.IsVerticalView) that is located in a service.
this is the home component:

@Component({
    host: { '(document:scroll)': 'onScroll($event)' },
    selector: 'txt-zone',
    templateUrl:AppService.IsVerticalView  == false ? 'app/txtzone/Txtzone.component.html' : 'app/txtzone/Txtzone_vertical.component.html' ,
    styleUrls: [AppService.IsVerticalView   == false ? 'app/txtzone/TxtZone.css' : 'app/txtzone/txtZone_Vertical.css'],
})

I am changing AppService.IsVerticalView value from another component class and loading the page of home component again.
here is the function from the other component:

SwapToVerticalView(): void
{
    if (AppService.IsVerticalView == true) {
        // change to horizonal
        AppService.IsVerticalView = false;
        // show you can return to vertical
        this.currentViewShape = "Vertical View";
    }
    else
    {
        // change to vertical
        AppService.IsVerticalView = true;
        // show you can return to horizonal
        this.currentViewShape = "Horizontal View";
    }

    // refresh the view
    if (this._charsService.AppMode == ApplicationMode.LineBreaker)
    {
        // reload again
        this.router.navigate(['home']);

    }
}

The problem is that the component is not "fully" reloading again when re-negativing to the page, how can i reload the page again in order to activate the conditions on templateUrl and styleUrls home component?

I have searched a lot but did not found any useful solution, also maybe there is other way to achieve that and my approach is wrong, if there is, please share.

Jonathan Applebaum
  • 5,738
  • 4
  • 33
  • 52
  • How do you know component is not reloading fully? – Dheeraj Kumar Sep 11 '18 at 11:08
  • what is AppService and is this code compiles? – Hardik Patel Sep 11 '18 at 11:19
  • @HardikPatel `AppService` is a service that imported to each component in the application, it contains static\shared properties, the code compiles successfully and the value of `IsVerticalView` is changing as expected. – Jonathan Applebaum Sep 11 '18 at 11:23
  • Alternate way to achieve the same is to use . But then you need to merge both HTML files and for styles you need to handle using media queries. – Hardik Patel Sep 11 '18 at 11:27
  • @HardikPatel, that exactly what i wanted to avoid because the states GUI are so different, the code will be a mess and hard to maintain...also, they need to share the same .ts file, If I have no other choice I'll have to do it that way – Jonathan Applebaum Sep 11 '18 at 11:39
  • You could try using component inheritance, e.g. parent component has vertical view and child component as horizontal view. You then use the right component based on user preference – David Sep 11 '18 at 12:08
  • You can try to force reload the component on navigation: https://stackoverflow.com/a/48280010/9277073 – Daniel Habenicht Sep 11 '18 at 15:22

0 Answers0