I am wanting to use Material Tab's (https://material.angular.io/components/tabs/api#MatTabLink) within my Ionic 4 project, now, the requirements are that I need to house multiple views in a tab and the first thought was that I can use a new ion-router-outlet or router-outlet within my parent component.
Bare in mind that I do already have one router outlet for the main app.
I am lazy loading the main chat routes in my app-routing.module.ts, this page is responsible for loading the tabs.
{ path: 'chat', loadChildren: './chat/chat.module#ChatPageModule', canActivate: [ AuthGuard ]}
Now, in my chat.module.ts I have the following routes:
{ path: '', component: ChatPage },
{ path: 'active', component: ActivePage },
{ path: 'messages', component: MessagesPage },
{ path: 'teams', component: TeamsPage }
ChatPage component is my parent tab view page. The others I am wanting to be in a tab.
The HTML for displaying these tabs is in chat.page.html and looks like this:
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of routeLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{ link.label }}
</a>
</nav>
<router-outlet></router-outlet>
I have also tried <ion-router-outlet></ion-router-outlet> but this throws up more issues.
The main issue here is that the routes look as though they are loading up in the main router outlet rather than the child one, I have tried adding the name attribute to the mark up but my IDE states that it's not valid and doesn't seem to work.
Ok, I have figured it out, and I am going to look stupid for not trying this before but the issue was that in order to use this child router-outlet the routes I wanted in tabs need to child routes.
{ path: '', component: ChatPage, children: [
{ path: 'active', component: ActivePage },
{ path: 'messages', component: MessagesPage },
{ path: 'teams', component: TeamsPage }
] },
Related
I have side nav with nested routes.my in click on the first button inside navbar it goto the doctors/doctors-list and router link active work perfectly. but I have other children routers like doctors/creat, doctors/update:id when I am going to those routes my router link is not activated as expected. my app structure is when the user first clicks on the doctor button it doctors/doctors-list
when user select doctor from the list route will be changed to the 'doctors/update:id'.how to slove this issue
<a routerLink="doctors/doctors-list" routerLinkActive="active"></a>
my routes config
{
path: 'doctors',
component: DoctorsHomeComponent,
children: [
{
path: 'doctors-list',
component: DoctorsComponent,
},
{
path: 'doctors/creat',
component: DoctorsPageComponent,
},
{
path: 'update-doctor/:id',
component: DoctorsPageComponent,
}
]
}
Have you try this
#Component
import { Router } from '#angular/router';``
constructor(public router: Router) {}
isdoctorsActive(exact) {
return this.router.isActive('doctors/', exact);
}
#html
<a routerLink="doctors/doctors-list" [ngClass]="{'active': isdoctorsActive(false)}"></a>
Have you added the following tag in your doctor components html page
<router-outlet></router-outlet>
You need to use lazy routing here -
In your app-routing.module.ts you can load doctor module like below code
const routes: Routes = [
{
path: '',
component: LandingComponent,
},
{
path: 'doctors',
loadChildren: 'doctor.module#DoctorModule'
}
];
Once it loads doctor module then it loads the component which it founds in the URL
Below code will be in your doctor-routing.module.ts
const routes: Routes = [
{ path: 'doctors-list', component: DoctorsComponent},
{ path: 'create', component: DoctorsPageComponent},
{ path: 'create/:id', component: DoctorsPageComponent}
];
Above routes you can use like this -
It loads doctors component
<a routerLink="doctors/doctors-list" routerLinkActive="active"></a>
It loads doctors page component in create mode
<a routerLink="doctors/create" routerLinkActive="active"></a>
It loads doctors page component in edit mode
<a routerLink="['doctors/create', id]" routerLinkActive="active"></a>
I have a app in which I have a header and a sidebar. It looks like this:
#app.component.html
<mat-drawer-container class="sidenav-container">
<app-side-nav></app-side-nav>
<mat-drawer-content>
<app-header></app-header>
<main>
<router-outlet></router-outlet>
</main>
</mat-drawer-content>
</mat-drawer-container>
And routing configuration is:
const routes: Routes = [
{ path: 'identity', loadChildren: './identity-registry/identity-registry.module#IdentityRegistryModule' }
];
Now upon clicking on identity the identity module will load a nested nav menu within it. The identity module has 3 component (IdentityRegistryComponent,MyIdentityComponent, UsersComponent) and it has its own routing configuration.
const routes: Routes = [
{
path: '',
component: IdentityRegistryComponent
},
{
path: 'my-identity',
component: MyIdentityComponent
},
{
path: 'users',
component: UsersComponent
}
];
and the nested route looks like this:
###IdentityRegistryComponent
<nav mat-tab-nav-bar>
<a mat-tab-link [routerLink]="['./my-identity']">My Identity</a>
<a mat-tab-link [routerLink]="['./users']">Users</a>
</nav>
<router-outlet></router-outlet>
But unfortunately, whenever I click on identity, its load the IdentityRegistryComponent properly. But click on my-identity, disappear the nested routes and load the respective component only. But it should not be like that. The nested loop should be there and upon clicking on my-identity, it should load the respective component on router-outlet. I do not know how to make it working?
Besides, is there anyway that, if i click on identity from the nav, it will load the IdentityRegistryComponent and by default MyIdentityComponent will be loaded in a nested routes zone?
for better understanding, i have add the git link:
testApp
If you want to use the router outlet for this module, you need to specify the component for this 'child'.
const routes: Routes = [{
path: 'identity',
component: AppComponent,
loadChildren: './identity-registry/identity-registry.module#IdentityRegistryModule'
}];
If you want all your routes to use the same component you can also define it like so:
const routes: Routes = [{
path: '',
component: AppComponent,
children: [{
path: 'identity',
component: NestedNavComponent, // Add a component here for nested router-outlets
loadChildren: './identity-registry/identity-registry.module#IdentityRegistryModule'
},{
path: 'another-route',
loadChildren: './another-route/another-route.module#AnotherRouteModule'
}]
}];
Update (See the nested component reference I added):
Routes work hierarchical and that includes router-outlets in nested routes. The application is built in layers for child routes. If you consider that, you can define your child routes the same way as you designed your ui logic.
So the idea is that I'm navigating to an admin page, & then want to load various components within that page using a side nav only on that page.
So I'm pretty sure an aux route is the best case for this, tell me if I'm wrong.
{ path: 'userAccounts', component: UserManagementComponent, canActivate: [LoggedInGuard]},
{ path: 'admin', component: AccountCreationPageComponent, outlet:'admin' },
<div class="navigation_items" *ngFor="let x of data"
[routerLink]="[ { outlets: { 'admin':['admin']}}]">{{x.id}}</div>
<router-outlet name="admin"></router-outlet>
Basically I'm assuming my syntax is wrong somewhere, or I haven't quite understood how Aux routes work, as this wont display the admin path
Any help would be appreciated.
It would appear that the child route had to be nested within the parent route so
{
path: 'userAccounts', component: UserManagementComponent, canActivate: [LoggedInGuard], children: [
{ path: 'admin', component: AccountCreationPageComponent, outlet: 'admin' }
]
}
Did the trick.
I'm trying to figure out the cleanest way to set up my Angular routing.
I have a parent route, and inside as a child, I'd like to repeat the same component multiple times (a list of all the locations). Each of the location (child) component occurrences will look the same, just with different data that I will need to pass in. (I'll do this with *ngFor).
Here's what I'm thinking so far:
<router-outlet>//for the parent
<router-outlet name="aux">
<ul *ngFor="let location in service.locations"
</router-outlet>
//where I list out all the locations^
</router-outlet>
on my app-routing.module.ts file:
const routes: Routes = [
{ path: 'main', component: MainComponent }, //lists all locations
{ path: 'locations/:id', component: LocationsComponent }, //view 1
location
{ path: '', pathMatch: 'full', redirectTo: '/main},
];
(I want to have both parent and child appear on initial load. Should I modify that?^)
Now this is the part I don't understand as much, I need to set my route configs. Is this close? And does it goin my app-routing.module.ts file as well?
#RouteConfig([
{path:'/', name: 'MainPath', component: MainComponent,
useAsDefault: true},
{aux:'/auxRoute', name: 'AuxPath', component: SecondComponent}
])
Thanks! Please let me know if you need clarification.
I have a route defined like this:
My app.component.html has 2 outlets:
<router-outlet></router-outlet>
<router-outlet name="modal"></router-outlet>
My route:
const routes: Routes = [
{ path: 'contents/:id', component: ContentComponent, children: [
{ path: 'edit', component: ContentFormComponent, outlet: 'modal' }
]},
];
The route (example) /contents/324231 loads fine with the ContentComponent.
What I need to do is that the route /contents/324231/edit loads the ContentFormComponent inside the 'modal' outlet.
I tried to follow the examples, building a link:
<a [routerLink]="[ {outlets: { modal: 'edit' } } ]" >edit</a>
It gives the href: /contents/1/(modal:edit)
When I click in the link, the url changes to this but the component is not loaded (neither the constructor or ngOnInit method are called).
Any thoughts?