CODEWITHSUNDEEP
angularangular-materialangular-router
AlleXyS
AlleXyS

Reputation: 2598

A way to update Url with Angular Material Tabs

Angular 6 using Angular Material, display a list, using tabs to go on item details "page".

Route

My route is simple: 

{
    path: '', component: CurrenciesComponent
}

and I tried something like this:

{
    path: 'currencies',
    canActivate: [AuthGuard],
    component: CurrenciesComponent,
    children: [
        { path: 'currencies/:id', component: CurrenciesDetailComponent }
    ]
}

I searched to find a solution, but nothing to solve it. Maybe this is not possible using Material Tabs?

Upvotes: 2

Views: 6836

Answers (1)

G. Tranter
G. Tranter

Reputation: 17908

To use the tabs pattern with routes, use the mat-tab-nav-bar and mat-tab-link directives. There is not a lot of documentation about this: https://material.angular.io/components/tabs/overview#tabs-and-navigation.

Upvotes: 5

Related Questions