routerLink inside <mat-tab> angular material

angular angular4-router
Deepak picture Deepak · Dec 25, 2017 · Viewed 34.8k times · Source 
<a routerLink="/add"></a><mat-tab label="Add Identity"></mat-tab>

or

<mat-tab label="Add Identity"> <a routerLink="/add"></a></mat-tab>.

I am new to Angular, Trying to use routing with the above Angular material component.

But it's not appending the URL when I am clicking on the Home tab. Any help on this.

Answer

Hannah C picture Hannah C · Feb 3, 2018

you can actually combine them into one like this:

<a mat-tab-link [routerLink]="/add">Add Identity</a>

you'll also need to make sure you're using <nav mat-tab-nav-bar>, instead of <mat-tab-group>.

documentation here: https://material.angular.io/components/tabs/overview#tabs-and-navigation

Related questions

Angular 4 router and modal dialog

I have Angular 4 SPA application using Angular router. I want to have hyperlink that opens a component in new dialog using Bootstrap 4. I already know how to open modal dialog from a function. But how to open it using hyperlink? &…

Read More
Reload Angular 4+ route with the same URL parameter

I've been doing some research into reloading an Angular 4+ route and it looks as if the preferred method is to instead listen to URL parameter changes within the component and re-initialise the component there instead. The issue I'm having is …

Read More
Angular - Add target to router navigate

What I want to do is to open the target of router navigate in another tab or in a popup. My instruction is this: private router: Router; this.router.navigate(['/page', id]); In routing I have: const routes: Routes = [ { …

Read More