Whenever i click on this link, it result a blank outlet.
This worked properly Before I add 'contact_content':['contact']} to the link.
menubar.component.html (KaltimMenubarComponent)
<ul>
<a routerLink="/kaltim" routerLinkActive="active">
<li>
<img src="assets/news.svg" alt="news"><span>B e r i t a</span>
</li>
</a>
<a [routerLink]="['/kaltim', { outlets: {'kaltim_content':['about']} }]" routerLinkActive="active">
<li>
<img src="assets/about us.svg" alt="about us"><span>T e n t a n g<br>K a m i</span>
</li>
</a>
<a [routerLink]="['/kaltim', { outlets: {'kaltim_content':['contact'], 'contact_content':['contact']} }]" routerLinkActive="active">
<li>
<img src="assets/contact.svg" alt="contact"><span>K o n t a k</span>
</li>
</a>
</ul>
<a routerLink="" routerLinkActive="active" class="start_page">
<img src="assets/start.svg" alt="start">H A L A M A N<br>U T A M A
</a>
contact.component.html (KaltimContactComponent)
<router-outlet name="contact_content"></router-outlet>
app-routing.module.ts
const routes: Routes = [
{ path: '', component: StartComponent, pathMatch: 'full'},
{ path: 'kalteng', component: KaltengComponent, children: [
{ path: 'contact', component: KaltengContactComponent, outlet: 'kalteng_content' },
{ path: 'contact', component: ContactFormComponent, outlet: 'contact_content' },
{ path: 'about', component: KaltengAboutComponent, outlet: 'kalteng_content', pathMatch: 'full' },
{ path: '', component: KaltengMenubarComponent, outlet: 'kalteng_menubar'},
{ path: '', component: KaltengHomeComponent, outlet: 'kalteng_content', pathMatch: 'full'},
] },
{ path: 'kaltim', component: KaltimComponent, children: [
{ path: 'contact', component: KaltimContactComponent, outlet: 'kaltim_content' },
{ path: 'contact', component: ContactFormComponent, outlet: 'contact_content' },
{ path: 'about', component: KaltimAboutComponent, outlet: 'kaltim_content' },
{ path: '', component: KaltimMenubarComponent, outlet: 'kaltim_menubar'},
{ path: '', component: KaltimHomeComponent, outlet: 'kaltim_content', pathMatch: 'full'},
] },
{ path: '', redirectTo: 'start', pathMatch: 'full'},
{ path: '**', component: PageNotFoundComponent }
];
start.component.html (StartComponent)
<a routerLink="/kaltim" routerLinkActive="active" class="main"></a>
<a routerLink="/kalteng" routerLinkActive="active" class="main"></a>
kaltim.component.html (KaltimComponent)
<main>
<router-outlet name="kaltim_menubar"></router-outlet>
<router-outlet name="kaltim_content"></router-outlet>
</main>
contact-form.component.html (ContactFormComponent)
<!-- Usual Forms -->
<label>...</label>
<input>...</input>
Should've put <app-contact-form> (ContactFormComponent's selector) inside contact.component.html rather than uses the routing for that.
Related
i have Component IndexSettings with childs Component, I need when they go to the child component so that the asset class works, but it disappears, can you know what is the reason? thanks for the help
Index Settings Component Routes
children: [
{
path: 'settings',
component: SettingsIndexComponent,
children: [
{ path: '', redirectTo: 'company-details', pathMatch: 'full' },
{
path: 'company-details',
component: CompanyDetailsComponent,
},
{
path: 'team',
component: TeamComponent,
},
{
path: 'password',
component: PasswordComponent,
},
{
path: 'plans-pricing',
component: PlansPricingComponent,
},
{
path: 'payments-billing',
component: PaymentsBillingComponent,
},
{
path: 'documents',
component: DocumentsComponent,
},
{
path: 'notifications',
component: NotificationsComponent,
},
],
},
Html routeLinkActive
<a
[routerLink]="['/dashboard/settings']" [routerLinkActive]="['sidebar-active']" [routerLinkActiveOptions]="{exact: true}"
class="list-group-item border-0 d-inline-block ps-4 custom-nav-item mt-2">
<i class="fa-light fa-sliders-simple custom-nav-item"></i>
<span class="ps-2 custom-nav-item">Settings</span>
</a>
Screenshot
Hey guys, so i am trying to learn Angular by building a simple application that should show the list of categories and create a new category but i am facing a problem, when i click on a link the search bar doesn't change it stays on the home page..
This is the app.component.html:
<ul class = "navbar-nav">
<li class = "nav-item">
<a routerLink="/categories" class="nav-link" ariaCurrentWhenActive="page" >Liste des catégories</a>
</li>
<li class = "nav-item">
<a routerLink="/create-categories" class="nav-link" ariaCurrentWhenActive="page" >Ajout catégorie</a>
</li>
</ul>
</nav>
<div class = "container">
<router-outlet></router-outlet>
</div>
and this is the app-routing-module.ts:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { CategoriesDetailsComponent } from './intefaces/categories-details/categories-details.component';
import { CategoriesListComponent } from './intefaces/categories-list/categories-list.component';
import { CreateCategoriesComponent } from './intefaces/create-categories/create-categories.component';
import { UpdateCategoriesComponent } from './intefaces/update-categories/update-categories.component';
const routes: Routes = [
{path: 'categories', component: CategoriesListComponent},
{path: 'create-categories', component: CreateCategoriesComponent},
{path: '', redirectTo: 'categories', pathMatch: 'full'},
{path: 'update-categories/:id', component: UpdateCategoriesComponent},
{path: 'categories-details/:id', component: CategoriesDetailsComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
change this
<a routerLink="/categories" class="nav-link" ariaCurrentWhenActive="page" >Liste des catégories</a>
const routes: Routes = [
{path: 'categories', component: CategoriesListComponent},
{path: 'create-categories', component: CreateCategoriesComponent},
{path: '', redirectTo: 'categories', pathMatch: 'full'},
{path: 'update-categories/:id', component: UpdateCategoriesComponent},
{path: 'categories-details/:id', component: CategoriesDetailsComponent}
];
for this
<a routerLink="categories" class="nav-link" ariaCurrentWhenActive="page" >Liste des catégories</a>
const routes: Routes = [
{path: '', redirectTo: 'categories', pathMatch: 'full'},
{path: 'categories', component: CategoriesListComponent},
{path: 'create-categories', component: CreateCategoriesComponent},
{path: 'update-categories/:id', component: UpdateCategoriesComponent},
{path: 'categories-details/:id', component: CategoriesDetailsComponent}
];
I'm trying to setup up nested routes for an admin parent menu. Below admin I have two child routes - Security Settings and Configuration.
When I click on the Configuration menu item, my page is redirected to AdminComponent and renders Admin works. However, if I click on Site Configuration, it does NOT redirect to my SiteConfigComponent as I expect it to; it just redirects to AdminComponent again.
i.e. Here's the siteconfig route snippet which is also shown again below.
<a mat-button routerLink="/admin/siteconfig">
Site Configuration
</a>
HTML:
<a mat-button routerLink="/home" routerLinkActive="horizontal-active-link" [routerLinkActiveOptions]="{exact:true}">Home</a>
<a mat-button routerLink="/preferences" routerLinkActive="horizontal-active-link" [routerLinkActiveOptions]="{exact:true}">Preferences</a>
<a mat-button [matMenuTriggerFor]="appMenu">Admin
<mat-icon class="caret">arrow_drop_down</mat-icon>
</a>
<mat-menu #appMenu="matMenu" [overlapTrigger]="false" class="mega-menu app-dropdown">
<div fxLayout="column wrap">
<div fxFlex class="p-1">
<a mat-menu-item routerLink="/admin" routerLinkActive="horizontal-active-link" [routerLinkActiveOptions]="{exact:true}">
<b>Configuration</b>
</a>
<mat-divider></mat-divider>
<button mat-menu-item>Security Settings</button>
<a mat-button routerLink="/admin/siteconfig" routerLinkActive="horizontal-active-link">
Site Configuration
</a>
</div>
</div>
</mat-menu>
export const routes: Routes = [
{
path: '',
component: PagesComponent, children: [
{ path: '', component:HomeComponent, canActivate: [AuthGuard]},
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard]},
{ path: 'admin', component: AdminComponent,
children: [
{ path: '', component: AdminComponent },
{ path: 'management/users', component: UsersManagementComponent, canActivate: [AuthGuard] },
{ path: 'management/roles', component: RolesManagementComponent, canActivate: [AuthGuard] },
{ path: 'siteconfig', component: SiteConfigComponent, canActivate: [AuthGuard]}
],
canLoad: [AuthGuard]
}
]
},
{ path: 'login', component: LoginComponent},
{ path: '**', component: NotFoundComponent }
];
And app.component.html (loaded by index.html) is :
<div id="app" class="100h app" [ngClass]="appSession.settings.Theme">
<router-outlet></router-outlet>
</div>
Again, if I click on Site Config it should go to the SiteConfigComonent.
Advice appreciated...
I am having issues navigating to a grand child route. The default route for the paths for the grand child works. When I am trying to navigate to the 'text' route, it doesn't recognize the route.
I have the following routes setup:
{
path: '',
pathMatch: 'full',
component: EmailListComponent,
children:[
{
path: '',
component: EmptyComponent
}
]
},
{
path: 'editor',
pathMatch: 'full',
component: EmailListComponent,
children: [
{
path: '',
component: MessageEditorComponent,
children: [
{
path: 'text',
component: TextActionBarComponent,
},
{
path: '',
component: NoActionBarComponent,
}
]
},
]
}
I am trying to navigation this route using:
this.router.navigate(['/editor/text'], {});
I have also tried
this.router.navigate(['text'], {});
and
this.router.navigate(['/text'], {});
My Link
<a [routerLink]="['/login']">
<i class="glyphicon glyphicon-user"></i> Login
</a>
My Routes
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'register', component: UserRegisterComponent },
{ path: 'auctions', component: AuctionListComponent },
{ path: 'auction/:id', canActivate: [ AuctionDetailGuard ], component: AuctionDetailComponent },
{ path: 'supplier/:id', component: SupplierDetailComponent }
];
the routerlinks that navigates to auctions, auction/:id and supplier/:id works as intended, but login and register does not, when i click either one of them i get navigated to the correct component, the URL however changes to localhost:xxxx/login for a split second before it goes back to localhost:xxxx/previousUrl
Here is the other routerlink, that works as intended
<a [routerLink]="['/auction', auction.id]">
{{category.name }} - {{auction.name}}
</a>
When you have child routes, it's better to use the children: [].
This is how you use it:
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'register', component: UserRegisterComponent },
{ path: 'auctions', component: AuctionListComponent, children: [
{ path: ':id', canActivate: [ AuctionDetailGuard ], component: AuctionDetailComponent },
{ path: ':id/edit', component: AuctionDetailEditComponent }
]},
{ path: 'supplier/:id', component: SupplierDetailComponent }
];
// This is what you can place on the item
<a [routerLink]="[idOfItem]">Link to Item</a>
// And this method you call in your component.ts file
// Add relativeTo to make it relative to the current route
// so you'll add the "edit" after the called ID.
this.router.navigate(['edit'], { relativeTo: this.route });
Can you please try login and register in the following way:
<a routerLink="/login">
<i class="glyphicon glyphicon-user"></i> Login
</a>