Load html page as content of tab in Angular typescript-CodePudding

I would like to add a html page as content of a tab in Angular. I've tried to do this with the mat-tab-nav-bar and a mat-tab-link, but it sends me to a new page instead of showing the contents as body of the current tab.

current code:

<p>This is a page to test your Java skills</p>
<nav mat-tab-nav-bar backgroundColor="primary" color="primary">
  <a mat-tab-link
     routerLinkActive="active"
     [routerLink]="['/questions']"> Questions
  </a>
</nav>

<div><router-outlet></router-outlet></div>

What should I do to show the html page as content of the current tab?

CodePudding user response：

this is the routing config

import {RouterModule, Routes} from "@angular/router";
import {HomeComponent} from "./home/home.component";
import {QuestionlistComponent} from "./questions/question-overview/questionlist.component";
import {QuestionDetailComponent} from "./questions/question-detail/question-detail.component";
import {NewQuestionFormComponent} from "./questions/new-question-form/new-question-form.component";

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'questions', component: QuestionlistComponent},
  {path: 'questions/:id', component: QuestionDetailComponent},
  {path: 'post-question', component: NewQuestionFormComponent}
]

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }```

CodePudding user response：

If the component that has the mat-tab is the Home.component you should to have:

const routes: Routes = [
  {path: '', component: HomeComponent,children:[
     {path: 'questions', component: QuestionlistComponent},
     {path: 'questions/:id', component: QuestionDetailComponent},
     {path: 'post-question', component: NewQuestionFormComponent}
  ]}
]

NOTE: You can put the mat-tab in the main-component and use your routes

CodePudding user response：

@Tommy Valentino

<p>This is a page to test your Java skills</p>
<nav mat-tab-nav-bar backgroundColor="primary" color="primary">
  <a mat-tab-link
     routerLinkActive="active"
     [routerLink]="'post-questions'"> Post Questions
  </a>
  <a mat-tab-link
     routerLinkActive="active"
     [routerLink]="'questions'"> Questions
  </a>
</nav>

<div>
  <router-outlet></router-outlet>
</div>

Try to change routerLink from: [routerLink]="'/questions'" to routerLink="questions"

Also make sure that your to component is correct. const routes: Route[] = [ { path: 'questions', component: QuestionsComponent }];

here is an article: https://nirajsonawane.github.io/2018/10/27/Angular-Material-Tabs-with-Router/

here is example of implementation: https://github.com/nirajsonawane/angular-material-tab-router

Stackblitz. https://stackblitz.com/edit/angular-mat-tab-nav-aw488p?file=main.ts,app/tab-nav-bar-basic-example.html