Angular 4 function that calls route

Question

I have routing set up through a menu in my Angular web-app. The menu has routerLinks set up like the home link below:

<a routerLink="home">
            <button md-menu-item>
                <md-icon class="material-icons"> home </md-icon>
                <span> Home </span>
            </button>
        </a>

The app.router contains:

export const router: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full'},
    { path: 'home', component: HomeComponent },
];

I want to have a button in a component that redirects to an enquiry form that is not available in the normal menu, but placing an link on a button in the component does not seem to work. Why is this?

The ideal thing for me to do would be to place a function in an html element in the component that called the route - is this possible?

Answer 1

If I understand this correctly, yes it is of course possible.

Just add Router to your component constructor:

constructor(private router: Router) {}

and then you can call navigate function from Router class in your function which will be called after click on button, for example:

this.router.navigate(['home']);

Another possibility is to place [routerLink] in html tag:

<a [routerLink]="['/home']">Go To Home</a>

Check this:

https://angular.io/guide/router

https://angular.io/api/router/Router