Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

routerLink inside <mat-tab> angular material

<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.

like image 775
Deepak Avatar asked Dec 25 '17 06:12

Deepak


People also ask

What does routerLink do in Angular?

RouterLink is a built-in Angular Directive that lets you link to specific routes in your app. In the SPA(single-page application), you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page.

Can we add routerLink to button?

Using Router linksAfter Angular v4 we can directly add a routerLink attribute on the anchor tag or button. Consider the following template, where routerLink attribute added to the anchor tag. The routerLink directive on the anchor tags give the router control over those elements.

Is routerLink a directive?

In Angular, RouterLink is a directive for navigating to a different route declaratively. Router. navigate and Router. navigateByURL are two methods available to the Router class to navigate imperatively in your component classes.

What is Mat tab link?

The mat-tab-link is the selector of MatTabLink directive. mat-tab-nav-bar: It is used for anchored navigation with animated ink bar. It has the properties such as 'backgroundColor', 'color', 'disablePagination', 'disableRipple'. The 'disablePagination', 'disableRipple' are Boolean.


1 Answers

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

like image 92
Hannah C Avatar answered Oct 17 '22 10:10

Hannah C