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>
Related
I want to create a whole new web application using ngx-admin theme.
I have created a new component named "OPERATION". But, I'm not able to get the routing for it.
Need help in routing..
Thanks in advance...
first you need to import your component and you need to add your component route to the routes in the app-routing.module.ts.
below is the routes in ngx admin app-routing.module.ts.
const routes: Routes = [
{
path: 'pages',
loadChildren: () => import('./pages/pages.module')
.then(m => m.PagesModule),
},
{
path: 'auth',
component: NbAuthComponent,
children: [
{
path: '',
component: NbLoginComponent,
},
{
path: 'login',
component: NbLoginComponent,
},
{
path: 'register',
component: NbRegisterComponent,
},
{
path: 'logout',
component: NbLogoutComponent,
},
{
path: 'request-password',
component: NbRequestPasswordComponent,
},
{
path: 'reset-password',
component: NbResetPasswordComponent,
},
],
},
{ path: '', redirectTo: 'pages', pathMatch: 'full' },
{ path: '**', redirectTo: 'pages' },
];
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'], {});
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.
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>
I am trying to set URLs to my items got via json.
So I have a structure like that:
<div class="releases-component">
<div *ngFor="let release of releases" [routerLink]="['/releases', { id:release.id }]">
<img src="{{release.image}}" alt="Image release">
<h3>{{release.name}}</h3>
<span>{{release.year}}</span>
</div>
</div>
And I've got json of type:
[
{
"id":"release-1",
"name": "Release1 name",
"image": "./cover1.jpg",
"year": "2014"
},
{
"id":"release-2",
"name": "Release2 name",
"image": "./release2.jpg",
"year": "2015"
}
]
My router:
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'releases', component: ReleasesComponent },
{ path: 'distro', component: DistroComponent },
{ path: 'contacts', component: ContactsComponent }
];
The problem is that when I click on any *ngFor generated div I get url like
http://localhost:3000/releases;id=release-1
And I want it to look like
http://localhost:3000/releases/release-1
Didn't manage to find a working solution in Angular2 to me.
There are few small syntax mistakes in the code above, here is the code with the fixes.
Structure:
<div class="releases-component">
<div *ngFor="let release of releases" [routerLink]="['/releases',release.id ]">
<img src="{{release.image}}" alt="Image release">
<h3>{{release.name}}</h3>
<span>{{release.year}}</span>
</div>
</div>
Router:
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'releases/:id', component: ReleasesComponent },
{ path: 'distro', component: DistroComponent },
{ path: 'contacts', component: ContactsComponent }
];
Here is a one page similar working example plunkr code: http://plnkr.co/edit/UyNkK9?p=preview,
you can see the url changes on this plunkr url,
http://run.plnkr.co/plunks/UyNkK9/
Here is how the url will look after you click on releases, http://run.plnkr.co/plunks/UyNkK9/releases/release-1
html:
<div class="releases-component">
<div *ngFor="let release of releases"
(click)=onSelect(release)>
<img src="{{release.image}}" alt="Image release">
<h3>{{release.name}}</h3>
<span>{{release.year}}</span>
</div
</div>
routes:
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'releases/:id', component: ReleasesComponent },
{ path: 'distro', component: DistroComponent },
{ path: 'contacts', component: ContactsComponent }
];
component:
import {Router} from '#angular/router';
...
...
constructor(private router: Router) {}
onSelect(release): any {
this.router.navigate(['/release', release.id]);
}