Angular: Multiple router outlets
0
I am trying to add multiple router outlets in my application without any luck. Below is my code
app.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {LoginComponent} from './login/login.component';
import {DashboardComponent} from './dashboard/dashboard.component';
import { AuthenticationGuardService } from './service/AuthenticationGuardService';
import { HomeComponent } from './home/home.component';
import { SearchComponent } from './search/search.component';
const routes:Routes = [
{ path: 'login', component: LoginComponent},
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'dashboard', component: DashboardComponent, outlet: 'viewport' /*, canActivate: [AuthenticationGuardService]*/ },
{ path: 'search', component: SearchComponent, outlet: 'viewport'}
];
@NgModule({
exports: [ RouterModule ],
imports: [RouterModule.forRoot(routes)]
})
export class AppRoutingModule {}
home.component.ts
<ul class="menu-list">
<li (click)="navigate($event, 'dashboard')" class="data-menu-option-selected">DASHBOARD</li>
<li (click)="navigate($event, 'search')">SEARCH</li>
<li (click)="navigate($event, 'reports')">PDIF REPORTS</li>
<li (click)="navigate($event, 'apps')">PENNDOT APPS</li>
</ul>
....
....
<div class="viewport-body">
<router-outlet name="viewport"></router-outlet>
</div>
....
....
home.component.ts
private navigate(event, path):void {
if(this.previousSelection != null) {
this.previousSelection.removeAttribute('class');
}
event.target.setAttribute('class', 'data-menu-option-selected');
this.previousSelection = event.target;
// this.router.navigate([{outlets: {primary: 'home', viewport: path}}]);
this.router.navigate([{ outlets: { viewport: [ path ] }}]);
// this.router.navigateByUrl('/home(viewport:dashboard)');
}
I am using angular 5.2.11 and routing module version is 5.2.11.
When I click on the list item the url changes from http://localhost:4200/home to http://localhost:4200/home(viewport:dashboard) but nothing is displayed in the named router outlet.
I do not see any errors in the console as well.
Can anyone tell me what am I missing?
EDIT:
I am trying to develop a screen like below. When user clicks on any list item on the left side, the corresponding item should open in the right section.
angular angular-router
asked Nov 19 '18 at 12:35
Krishna ChaitanyaKrishna Chaitanya
90811544
add a comment |
0
I am trying to add multiple router outlets in my application without any luck. Below is my code
app.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {LoginComponent} from './login/login.component';
import {DashboardComponent} from './dashboard/dashboard.component';
import { AuthenticationGuardService } from './service/AuthenticationGuardService';
import { HomeComponent } from './home/home.component';
import { SearchComponent } from './search/search.component';
const routes:Routes = [
{ path: 'login', component: LoginComponent},
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'dashboard', component: DashboardComponent, outlet: 'viewport' /*, canActivate: [AuthenticationGuardService]*/ },
{ path: 'search', component: SearchComponent, outlet: 'viewport'}
];
@NgModule({
exports: [ RouterModule ],
imports: [RouterModule.forRoot(routes)]
})
export class AppRoutingModule {}
home.component.ts
<ul class="menu-list">
<li (click)="navigate($event, 'dashboard')" class="data-menu-option-selected">DASHBOARD</li>
<li (click)="navigate($event, 'search')">SEARCH</li>
<li (click)="navigate($event, 'reports')">PDIF REPORTS</li>
<li (click)="navigate($event, 'apps')">PENNDOT APPS</li>
</ul>
....
....
<div class="viewport-body">
<router-outlet name="viewport"></router-outlet>
</div>
....
....
home.component.ts
private navigate(event, path):void {
if(this.previousSelection != null) {
this.previousSelection.removeAttribute('class');
}
event.target.setAttribute('class', 'data-menu-option-selected');
this.previousSelection = event.target;
// this.router.navigate([{outlets: {primary: 'home', viewport: path}}]);
this.router.navigate([{ outlets: { viewport: [ path ] }}]);
// this.router.navigateByUrl('/home(viewport:dashboard)');
}
I am using angular 5.2.11 and routing module version is 5.2.11.
When I click on the list item the url changes from http://localhost:4200/home to http://localhost:4200/home(viewport:dashboard) but nothing is displayed in the named router outlet.
I do not see any errors in the console as well.
Can anyone tell me what am I missing?
EDIT:
I am trying to develop a screen like below. When user clicks on any list item on the left side, the corresponding item should open in the right section.
angular angular-router
asked Nov 19 '18 at 12:35
Krishna ChaitanyaKrishna Chaitanya
90811544
Hi krishana can you please tell me what you trying to do here
– harkesh kumar
Nov 19 '18 at 12:37
@harkeshkumar Updated my post
– Krishna Chaitanya
Nov 19 '18 at 12:41
if you want to create like that you have read sidenav in angular material and that your might be slove material.angular.io/components/sidenav/examples
– harkesh kumar
Nov 19 '18 at 12:45
or if you want to know how you can do this then open conversation with me i tell you
– harkesh kumar
Nov 19 '18 at 12:46
add a comment |
0
0
0
I am trying to add multiple router outlets in my application without any luck. Below is my code
app.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {LoginComponent} from './login/login.component';
import {DashboardComponent} from './dashboard/dashboard.component';
import { AuthenticationGuardService } from './service/AuthenticationGuardService';
import { HomeComponent } from './home/home.component';
import { SearchComponent } from './search/search.component';
const routes:Routes = [
{ path: 'login', component: LoginComponent},
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'dashboard', component: DashboardComponent, outlet: 'viewport' /*, canActivate: [AuthenticationGuardService]*/ },
{ path: 'search', component: SearchComponent, outlet: 'viewport'}
];
@NgModule({
exports: [ RouterModule ],
imports: [RouterModule.forRoot(routes)]
})
export class AppRoutingModule {}
home.component.ts
<ul class="menu-list">
<li (click)="navigate($event, 'dashboard')" class="data-menu-option-selected">DASHBOARD</li>
<li (click)="navigate($event, 'search')">SEARCH</li>
<li (click)="navigate($event, 'reports')">PDIF REPORTS</li>
<li (click)="navigate($event, 'apps')">PENNDOT APPS</li>
</ul>
....
....
<div class="viewport-body">
<router-outlet name="viewport"></router-outlet>
</div>
....
....
home.component.ts
private navigate(event, path):void {
if(this.previousSelection != null) {
this.previousSelection.removeAttribute('class');
}
event.target.setAttribute('class', 'data-menu-option-selected');
this.previousSelection = event.target;
// this.router.navigate([{outlets: {primary: 'home', viewport: path}}]);
this.router.navigate([{ outlets: { viewport: [ path ] }}]);
// this.router.navigateByUrl('/home(viewport:dashboard)');
}
I am using angular 5.2.11 and routing module version is 5.2.11.
When I click on the list item the url changes from http://localhost:4200/home to http://localhost:4200/home(viewport:dashboard) but nothing is displayed in the named router outlet.
I do not see any errors in the console as well.
Can anyone tell me what am I missing?
EDIT:
I am trying to develop a screen like below. When user clicks on any list item on the left side, the corresponding item should open in the right section.
angular angular-router
asked Nov 19 '18 at 12:35
Krishna ChaitanyaKrishna Chaitanya
90811544
I am trying to add multiple router outlets in my application without any luck. Below is my code
app.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {LoginComponent} from './login/login.component';
import {DashboardComponent} from './dashboard/dashboard.component';
import { AuthenticationGuardService } from './service/AuthenticationGuardService';
import { HomeComponent } from './home/home.component';
import { SearchComponent } from './search/search.component';
const routes:Routes = [
{ path: 'login', component: LoginComponent},
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'dashboard', component: DashboardComponent, outlet: 'viewport' /*, canActivate: [AuthenticationGuardService]*/ },
{ path: 'search', component: SearchComponent, outlet: 'viewport'}
];
@NgModule({
exports: [ RouterModule ],
imports: [RouterModule.forRoot(routes)]
})
export class AppRoutingModule {}
home.component.ts
<ul class="menu-list">
<li (click)="navigate($event, 'dashboard')" class="data-menu-option-selected">DASHBOARD</li>
<li (click)="navigate($event, 'search')">SEARCH</li>
<li (click)="navigate($event, 'reports')">PDIF REPORTS</li>
<li (click)="navigate($event, 'apps')">PENNDOT APPS</li>
</ul>
....
....
<div class="viewport-body">
<router-outlet name="viewport"></router-outlet>
</div>
....
....
home.component.ts
private navigate(event, path):void {
if(this.previousSelection != null) {
this.previousSelection.removeAttribute('class');
}
event.target.setAttribute('class', 'data-menu-option-selected');
this.previousSelection = event.target;
// this.router.navigate([{outlets: {primary: 'home', viewport: path}}]);
this.router.navigate([{ outlets: { viewport: [ path ] }}]);
// this.router.navigateByUrl('/home(viewport:dashboard)');
}
I am using angular 5.2.11 and routing module version is 5.2.11.
When I click on the list item the url changes from http://localhost:4200/home to http://localhost:4200/home(viewport:dashboard) but nothing is displayed in the named router outlet.
I do not see any errors in the console as well.
Can anyone tell me what am I missing?
EDIT:
I am trying to develop a screen like below. When user clicks on any list item on the left side, the corresponding item should open in the right section.
angular angular-router
angular angular-router
asked Nov 19 '18 at 12:35
Krishna ChaitanyaKrishna Chaitanya
90811544
asked Nov 19 '18 at 12:35
Krishna ChaitanyaKrishna Chaitanya
90811544
edited Nov 19 '18 at 12:41
Krishna Chaitanya
asked Nov 19 '18 at 12:35
Krishna ChaitanyaKrishna Chaitanya
90811544
asked Nov 19 '18 at 12:35
Krishna ChaitanyaKrishna Chaitanya
90811544
asked Nov 19 '18 at 12:35
Krishna ChaitanyaKrishna Chaitanya
90811544
90811544
Hi krishana can you please tell me what you trying to do here
– harkesh kumar
Nov 19 '18 at 12:37
@harkeshkumar Updated my post
– Krishna Chaitanya
Nov 19 '18 at 12:41
if you want to create like that you have read sidenav in angular material and that your might be slove material.angular.io/components/sidenav/examples
– harkesh kumar
Nov 19 '18 at 12:45
or if you want to know how you can do this then open conversation with me i tell you
– harkesh kumar
Nov 19 '18 at 12:46
add a comment |
Hi krishana can you please tell me what you trying to do here
– harkesh kumar
Nov 19 '18 at 12:37
@harkeshkumar Updated my post
– Krishna Chaitanya
Nov 19 '18 at 12:41
if you want to create like that you have read sidenav in angular material and that your might be slove material.angular.io/components/sidenav/examples
– harkesh kumar
Nov 19 '18 at 12:45
or if you want to know how you can do this then open conversation with me i tell you
– harkesh kumar
Nov 19 '18 at 12:46
Hi krishana can you please tell me what you trying to do here
– harkesh kumar
Nov 19 '18 at 12:37
Hi krishana can you please tell me what you trying to do here
– harkesh kumar
Nov 19 '18 at 12:37
@harkeshkumar Updated my post
– Krishna Chaitanya
Nov 19 '18 at 12:41
@harkeshkumar Updated my post
– Krishna Chaitanya
Nov 19 '18 at 12:41
if you want to create like that you have read sidenav in angular material and that your might be slove material.angular.io/components/sidenav/examples
– harkesh kumar
Nov 19 '18 at 12:45
if you want to create like that you have read sidenav in angular material and that your might be slove material.angular.io/components/sidenav/examples
– harkesh kumar
Nov 19 '18 at 12:45
or if you want to know how you can do this then open conversation with me i tell you
– harkesh kumar
Nov 19 '18 at 12:46
or if you want to know how you can do this then open conversation with me i tell you
– harkesh kumar
Nov 19 '18 at 12:46
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374801%2fangular-multiple-router-outlets%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374801%2fangular-multiple-router-outlets%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hi krishana can you please tell me what you trying to do here
– harkesh kumar
Nov 19 '18 at 12:37
@harkeshkumar Updated my post
– Krishna Chaitanya
Nov 19 '18 at 12:41
if you want to create like that you have read sidenav in angular material and that your might be slove material.angular.io/components/sidenav/examples
– harkesh kumar
Nov 19 '18 at 12:45
or if you want to know how you can do this then open conversation with me i tell you
– harkesh kumar
Nov 19 '18 at 12:46