Navigate to different html page without a button. - html

Question

I would like to know how to navigate to a different page based on a value in html/Angular 2. If the value is true, then a specific page will load. I already have buttons that use routerLink to navigate to different pages - I would like to replicate that functionality but instead of using a button, pages will load whenever a specific value is true.
Here is my main app html page:
<p-toolbar>
<div class="ui-toolbar-group-left">
<button pButton type="button" label="Home" routerLink="/"></button>
</div>
<div class="ui-toolbar-group-right">
<button pButton type="button" label="About" routerLink="/about"></button>
<button pButton type="button" label="Page1" routerLink="/page1"></button>
<button pButton type="button" label="Page2" routerLink="/page2"></button>
<i class="fa fa-bars"></i>
</div>
</p-toolbar>
<br />
<!--Implement page routing here...-->
<div *ngIf="valueCheckComplete">
<div *ngIf="showPage1"></div>
<div *ngIf="showPage2"></div>
</div>
In the bottom portion you can see where the value checks are occurring. How would I load a page if for example showPage1 were true? All of the functionality that handles these values is already implemented in my TypeScript file, I just need to know how to navigate to a different page based on a value, not a button click.

Answer 1

Figured it out. Instead of routing to the page in my html page, I used a Router object in my typescript file.
constructor(private router: Router, ...){
// set boolean here
}
goToPage()
{
if(this.showTuner)
this.router.navigate(['/tuner']);
else if(this.showProcessor)
this.router.navigate(['/processor']);
}