How to redirect the page on `refresh` without html compile?

Question

I am using the dynamic content all my html page. when user refresh the page, i require to redirect to home page. but error thrown my html page, the page is not redirected at all.

my html:

<div class="btn-sec">
      <button type="submit" (click)="goToArtcilePage()" [disabled]="productedSelected" class="btn">{{appProps['book.label.buttons.next']}}</button>
    </div>

redirecting like in ts :

 constructor(private store: StorageService, 
      private sharedData: SharedDatasService, 
      private location:Location,
      private router:Router) {

      if ((!this.appData || !this.appProps ) && Object.keys(this.sharedData.validationDatas).length === 0) {
        this.router.navigate(['/']);
        return;
      }

    }

but still getting an error as :

ERROR TypeError: Cannot read property 'book.label.buttons.next' of undefined and the page is not redirecting at all.

any suggestion to fix this issue?

Answer 1

use get a property to access the data from HTML

get getAppProps(): string {
  return this.appProps['book.label.buttons.next']
}

<button type="submit" (click)="goToArtcilePage()" [disabled]="productedSelected" class="btn">{{getAppProps}}</button>

Answer 2

You can use

 this.router.navigateByUrl('url', {skipLocationChange: true});

The {skipLocationChange: true}) property will change the route but url will not be changed. So the url always displays home url but internally the state are changed.

Another solution is to use Angular RouteGuards. Angular has canActivate and canDeactivate Routeguards. You can use their advantage for your case.

Answer 3

I think the issue is with {{appProps['book.label.buttons.next']}}. The TypeError occurs as appProps is not defined till the data arrives.

Maybe use the safe Navigation operator ? like so: {{appProps?.book.label.buttons.next'}}.