<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.
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.
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With