I got a project developed by Angular. I got a problem implementing routing properly. I defined a button on the welcome page, So when you click on that, You'll be directed to the main page actually. Here's the problem; I got two buttons instead of only one!
<div class="container text-center">
<a class="btn btn-lg btn-warning btn-block" routerLink="persons">List of Persons</a>
</div>
<div class="mt-5 container text-center">
<router-outlet></router-outlet>
</div>
Here's a how the first page looks like
This is the person's HTML page supposed to be shown after clicking on the button.
<h1 class="container">
<p>You currently have {{ favoritesIds.length }} favorites</p>
<app-welcome-message [name]="person[0].name"></app-welcome-message>
</h1>
<div class="row justify-content-center align-items-center ms-4 container">
<div class="col-sm-4 text-center" *ngFor="let p of person">
<app-profile-info
[isFavorite]="favoritesIds.includes(p.id)"
[person]="p"
(selectEvent)="favoriteHandler($event)"></app-profile-info>
</div>
<div class="mt-5">
<app-new-friend-card></app-new-friend-card>
</div>
</div>
Here is app.module.ts
imports: [
BrowserModule,
RouterModule.forRoot([
{path: '', component: FirstPageComponent},
{path: 'persons', component: AppComponent},
{path: 'newfriend', component: NewFriendPageComponent}
])
],
providers: [],
bootstrap: [FirstPageComponent]
I assume your first code snippet is taken from your app.component.html, is that correct? It would definitely help if you could add the file names to your code snippets.
What you should do first of all is to add pathMatch: 'full' as an option to your first route.
imports: [
BrowserModule,
RouterModule.forRoot([
{path: '', pathMatch: 'full', component: FirstPageComponent},
{path: 'persons', component: AppComponent},
{path: 'newfriend', component: NewFriendPageComponent}
])
],
providers: [],
bootstrap: [FirstPageComponent]
Angular routing works by iterating through the list of routes until a matching one is found (by default it is checked if the target route starts with one of the configured ones). Since your first route is empty, every route will start with it, leading to other routes being never loaded.
Nevertheless it's kind of strange that the second route contains component: AppComponent. Usually AppComponent is the root component of your application, where also the <router-outlet> is contained. If this is the case, seeing the duplicate button is correct, since you are first of all rendering your AppComponent, but once you route angular router injects AppComponent again right after your <router-outlet></router-outlet>.
Related
In an angular app I have two bootstrap columns - the left col contains a scrollable div with overflow-y: auto; - the right col is a set of links that are essentially bookmarks that jump to the sections within the left scrollable container.
As far as I can see I'm facing two challenges:
1 - Setting up Angular to recognise I wish to scroll to page section when routing is enabled.
This I've over come by using router options and fragments
const routerOptions: ExtraOptions = {
useHash: false,
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled',
scrollOffset: [0, 64]
};
imports: [
...
RouterModule.forRoot(appRoutes, routerOptions),
...
]
And the link:
<a [routerLink]='"."' fragment="uniquedivid">Link</a>
2 - Getting a fragment / anchor to be scrolled into place when it's inside an overflow
From what I've read on SO and other blogs I can see a varying array of ways to do this but most of them use JQuery (which I want to avoid as I'm using pure Angular) and none of these methods seem to compliment the route system in Angular.
I don't know if this makes a difference but my links come AFTER my overflow-ed div as shown below:
<div class="row">
<div class="col">
<div id="overflow">
<div id="section-1"></div>
<div id="section-2"></div>
<div id="section-3"></div>
</div>
</div>
<div class="col">
<a [routerLink]='"."' fragment="section-1">Section 1</a>
<a [routerLink]='"."' fragment="section-2">Section 1</a>
<a [routerLink]='"."' fragment="section-3">Section 3</a>
</div>
</div>
I feel like I'm along the right lines here there's just something I'm missing, or maybe I'm overcomplicating things and there's a simpler way I'm not aware of?
I'm not sure you got a solution for it, but if I were you, I would have used a well organized npm module that can directly help you organize the breadcrumbs. If I understand the question correctly, you can use angular-crumbs.
You can organize your routing like this :
export const rootRouterConfig: Routes = [
{path: '', redirectTo: 'home', pathMatch: 'full'},
{path: 'home', ..., data: { breadcrumb: 'Home'}},
{path: 'about', ..., data: { breadcrumb: 'About'}},
{path: 'github', ..., data: { breadcrumb: 'GitHub'},
children: [
{path: '', ...},
{path: ':org', ..., data: { breadcrumb: 'Repo List'},
children: [
{path: '', ...},
{path: ':repo', ..., data: { breadcrumb: 'Repo'}}
]
}]
}
];
Then try to add the breadcrumb selector in the component where your routes are destined to (when using bootstrap):
<breadcrumb #parent>
<ol class="breadcrumb">
<ng-template ngFor let-route [ngForOf]="parent.breadcrumbs">
<li *ngIf="!route.terminal" class="breadcrumb-item">
{{ route.displayName }}
</li>
<li *ngIf="route.terminal" class="breadcrumb-item active" aria-current="page">{{ route.displayName }}</li>
</ng-template>
</ol>
</breadcrumb>
There are other ways too, you can check here to implement.
I had a working website, where only the main content changes with url, the others are "static".
I did this with router-outlet, and in app-routing.module.ts I just specified the paths.
After that I wanted to create a sidebar, which is looking the same in every page, but, when a user navigates through link, the sidebar's content (which links/menu items are displayed) should change.
So I thought I should put the sidebar's outlet (the secondary outlet) into the layout, and only create components for when the links/menu items are different.
Code:
<div class="rows">
<div id="row_header">
<app-header></app-header>
</div>
<div id="side_nav">
<div class="side_nav_container">
<router-outlet name="sidebar"></router-outlet>
</div>
</div>
<div id="row_middle">
<app-main-content></app-main-content>
</div>
<div id="row_footer">
<app-footer></app-footer>
</div>
</div>
This is app.component.ts, this is the layout for the website. You can see that there is no default router-outlet, only for the sidebar, because I put the primary outlet in the middle section, in app-main-content.
main-content.component.html:
<!-- This is where all the content goes, even when the user navigates through menu links (NewsPage, Rules, Topics, Login) -->
<router-outlet></router-outlet>
This is my app-routing-module.ts:
const routes: Routes = [
{ path: '', redirectTo: '/topics', pathMatch: 'full'},
{ path: 'topics', component: TopicsPageComponent },
{ path: 'login', component: LoginPageComponent },
{
path: 'topics',
component: SideNavTopicsComponent,
outlet: 'sidebar'
},
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
The primary outlet is working fine when navigating, but the side bar's secondary outlet does nothing.
Can you see what I did wrong?
Maybe the problem is I put the secondary outlet in the app compontent, and only after that there is the primary outlet?
You need to specify all the outlets where you want the navigation to take place in your navigation link.
For example as per below code primary outlet will be routed to login component and sidebar outlet will be routed to topics component.
<a [routerLink]="[{ outlets: { primary: ['login'],sidebar: ['topics'] } }]">Topics</a>
I am trying to fetch a specific customer detail by clicking on a customer id or name, I have made name as a link so that when clicking it will route to a next page with id as a parameter,and display all the details of the specific customer, so can anyone suggest me a easy way to perform this in angular 6 . (link about a demo project will be helpful)
Am assuming many things here but what I understood is you have two different pages - one where you have the customer with an id and based on that id you want to navigate to a different page which contains the customer details.
Let`s say it is customer component. so, HTML would have some button or a link which will be like:
<button type="button" class="btn btn-info desc" (click)="openCard(card._id)">Open</button>
In your customer component you will have an event listener:
public openCard(_id: string) {
this.router.navigate(['/detail', _id]);
}
You will have a routing module which will be responsible for different routings taking place:
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: CardComponent },
{ path: 'detail', component: CardDetailComponent },
{ path: 'detail/:details', component: CardDetailComponent },
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
The last line inside the path is responsible for handling the id part which will be utilized to do the necessary logic inside the customer detail component. This routing module should be imported in your app module.
In the customer detail component.
ngOnInit() {
this.route.params.forEach((params: Params) => {
this.fetchDataService.getData().subscribe( data => {
this.cards = [...data];
this.cardDetails = this.cards.find(card => card._id === params.details);
})
});
}
And then inside card detail template:
<div class="card" *ngIf="cardDetails">
<img class="card-img-top" src="../assets/avatar.png" alt="{{cardDetails.title}}">
<div class="card-body">
<h5 class="card-title">{{cardDetails.title}}</h5>
<p class="card-text">{{cardDetails.description}}</p>
</div>
</div>
You can have a look at this repo which I created some time back if you want more details: GitHub Angular 5 Seed Master
Though this is in angular 5. The code will not be very different for Angular 6.
This also contains using a service to fetch data from mock json.
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
(use above code in component .ts file(on select))
<h2>{{selectedHero.name | uppercase}} Details</h2>
<div>
<span>id: </span>{{selectedHero.id}}
</div>
<div>
<label>name:
<input [(ngModel)]="selectedHero.name" placeholder="name">
</label>
</div>
(use above code in component.html file(selected hero details))
I am working on an exercise project in Angular (latest V).
My App instanciates bootstrap cards dynamically from an Order Array and show them on my "Order-Item-Component through my template.
I added Routing so that I can update my OrderId on the Browser-Link after a click. It is working.
What I want is: If a user clicks on one of my cards - a whole new View Opens with my Order-Detail-Component for that specific Id. My cards should be invisible in that view. Subsequently, the user can go back to the cards-view with 'back' Link.
I don't know how to route so that my cards are going to be replaced by the Detail View.
Where do I have to place my 'router-outlet' for the detail-comp? I know, that I cannot place it in the same View as my Order-Component - because there are both visible in this case.
Here is my app.routing.ts: (The first route for orders is working fine)
import {RouterModule, Routes} from '#angular/router';
import {OrderComponent} from './order/order.component';
import {ORDER_ROUTES} from './order/order.routes';
import {OrderDetailComponent} from './order/order-detail/order-detail.component';
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/orders', pathMatch: 'full'},
{ path: 'orders', component: OrderComponent},
{ path: 'orders/:id', component: OrderDetailComponent
];
export const routing = RouterModule.forRoot(APP_ROUTES);
Here is my Order.Component.html:
<div class="container-fluid"><br>
<h2 id="heading-order"><i class="fa fa-shopping-cart f-left "></i>Open Orders</h2>
<p id="heading-items"> {{ orders.length }} Items </p>
</div>
<app-order-list></app-order-list>
<app-order-completed></app-order-completed>
Thanks in advance.
You might be able structure your app this way:
app.component.html:
<router-outlet></router-outlet>
routing module:
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/orders', pathMatch: 'full'},
{ path: 'orders', component: OrderComponent},
{ path: 'order-details/:id' component: OrderDetailsComponent}
];
order.component.html:
Provide [routerLink]="['/order-details', id] on your card, and pass the parameters to identify cards
Order component can also include <order-completed> in the view, if you need the completed orders to behave the same way, have them link to order details in the same way as the other orders.
To navigate back to the list of order, in your order-details.component.html provide a router link like routerLink="/orders"
You would use <router-outlet> instead of the custom tags <app-order-list></app-order-list>, <app-order-completed></app-order-completed> in your app component.
This way you can create child views:
const APP_ROUTES: Routes = [
{ path: '',
pathMatch: 'full',
component: OrderComponent,
children: [
{ path: 'order-list', component: OrderListComponent},
{ path: 'orders-completed', component: OrderCompletedComponent},
]},
];
And this is how the OrderComponent would look like:
<div class="container-fluid"><br>
<h2 id="heading-order"><i class="fa fa-shopping-cart f-left "></i>Open Orders</h2>
<p id="heading-items"> {{ orders.length }} Items </p>
</div>
<router-outlet></router-outlet>
Then use routerLink="/orders-completed" on a <button> or <a> tag to navigate
Here is the markup of my home page. I wrote several routes, and I need to display the content of the corresponding component instead of the home page when switching to them. And I have it added from the bottom of the home, and the home content continues to be displayed.
<div class="container">
<div class="row">
<app-header></app-header>
</div>
<div class="row">
<app-home></app-home>
<router-outlet></router-outlet>
</div>
<div class="row">
<app-footer></app-footer>
</div>
</div>
This is my app-home:
<app-home-news [homeImages]="homeImages"></app-home-news>
<router-outlet></router-outlet>
This is my routes:
const routes: Routes = [
{ path: 'sign-up', component: SignUpComponent },
{ path: 'sign-in', component: SignInComponent }
];
There is no error, the content simply adds to the home. How to make it appear in his place?
See anything which is outside <router-outlet></router-outlet> will always be there. Like in your case header and footer only should be in main html not home component. Anything you to change on the basis of routing, you should be part of routing configuration.
Make the following changes
<div class="container">
<div class="row">
<app-header></app-header>
</div>
<div class="row">
<!-- removed the home component -->
<router-outlet></router-outlet>
</div>
<div class="row">
<app-footer></app-footer>
</div>
</div>
Add the home component as the part of the routing.
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'sign-up', component: SignUpComponent },
{ path: 'sign-in', component: SignInComponent }
];
Note : I add the component at the root level so I left the path blank but you can as per your path like
{ path: 'home', component: HomeComponent },
You need to be careful about your routes and what router outlets your urls are going to populate. It's not just a case of putting a router-outlet at the bottom of each of your components to display something new...
Assuming I had a very basic AppComponent template:
<h1>Hello</h1>
<router-outlet></router-outlet>
... and some configured routes:
{ path: '', component: HomeComponent }
{ path: 'test', component: TestComponent },
{ path: 'hello', component: HelloComponent}
... which just contained their own names in a p tag (home, test, and hello respectively).
The following would be true for each url:
example.com
Hello
Home
example.com/test
Hello
Test
example.com/hello
Hello
Hello
The route has loaded the component into the router-outlet.
If my components then had router outlets of their own, we're in to child route territory, wherein you start to use urls such as example.com/test/abc, with your routes looking more like:
{
path: 'test',
component: TestComponent,
children: [
{ path: 'abc', component: AbcComponent },
{ path: 'def', component: DefComponent }
]
}
Which would result - assuming the same content rules as above would look like:
example.com/test/abc:
Hello
Test
Abc
example.com/test/def:
Hello
Test
Def
Typically, your AppComponent handles your site-wide header/footer/nav/etc. with a single router-outlet that every other component will be loaded into, which includes your home page itself...
{ path: '', component: HomeComponent }
{ path: 'sign-up', component: SignupComponent }
{ path: 'sign-in', component: SigninComponent }
There may well be further router-outlets in the components (as above), but it seems that what you currently WANT, most likely, is this case rather than the more complex type with nested outlets above that you currently HAVE.