Angular material application with login and basic sidenav

0

I have an application with a login component a dashboard component which contains an angular material basic mat-sidenav-container and two more components. In the mat-sidenav I have set two routerLink items for the two components.
How should I configure the app-routing in order to render the components in the mat-sidenav-content?
My app-routing looks like this:

const routes: Routes = [

  {

    path: 'dashboard',

    component: DashboardComponent,

    canActivate: [AuthguardService],

    children: [

      { path: 'first', component: FirstComponent},

      { path: 'second', component: SecondComponent}

    ]

  },

  {

    path: 'login',

    component: LoginComponent

  },

  {

    path: '',

    component: LoginComponent

  },

  {

    path: '**',

    component: PageNotFoundComponent

  }

];

And this is my dashboard component:

<mat-sidenav-container class="example-container">

  <mat-sidenav mode="side" opened>

    <mat-nav-list>

      <a mat-list-item routerLink='/first'>First Component</a>

      <a mat-list-item routerLink='/second'>Second Component</a>

      <a mat-list-item (click)="onLogOut()">Log out</a>

    </mat-nav-list>

  </mat-sidenav>



  <mat-sidenav-content>

    <router-outlet></router-outlet>

  </mat-sidenav-content>

</mat-sidenav-container>

angular-material angular7

share|improve this question

edited Jan 1 at 14:10

Elias

asked Jan 1 at 14:02

EliasElias

4910

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I just removed the slash '/' from the routerLink in the dashboard component template and it worked
  
  – Elias
  Jan 1 at 14:43
  
  
  

  
  
  
  

add a comment | 

0

I have an application with a login component a dashboard component which contains an angular material basic mat-sidenav-container and two more components. In the mat-sidenav I have set two routerLink items for the two components.
How should I configure the app-routing in order to render the components in the mat-sidenav-content?
My app-routing looks like this:

const routes: Routes = [

  {

    path: 'dashboard',

    component: DashboardComponent,

    canActivate: [AuthguardService],

    children: [

      { path: 'first', component: FirstComponent},

      { path: 'second', component: SecondComponent}

    ]

  },

  {

    path: 'login',

    component: LoginComponent

  },

  {

    path: '',

    component: LoginComponent

  },

  {

    path: '**',

    component: PageNotFoundComponent

  }

];

And this is my dashboard component:

<mat-sidenav-container class="example-container">

  <mat-sidenav mode="side" opened>

    <mat-nav-list>

      <a mat-list-item routerLink='/first'>First Component</a>

      <a mat-list-item routerLink='/second'>Second Component</a>

      <a mat-list-item (click)="onLogOut()">Log out</a>

    </mat-nav-list>

  </mat-sidenav>



  <mat-sidenav-content>

    <router-outlet></router-outlet>

  </mat-sidenav-content>

</mat-sidenav-container>

angular-material angular7

share|improve this question

edited Jan 1 at 14:10

Elias

asked Jan 1 at 14:02

EliasElias

4910

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I just removed the slash '/' from the routerLink in the dashboard component template and it worked
  
  – Elias
  Jan 1 at 14:43
  
  
  

  
  
  
  

add a comment | 

0

0

0

I have an application with a login component a dashboard component which contains an angular material basic mat-sidenav-container and two more components. In the mat-sidenav I have set two routerLink items for the two components.
How should I configure the app-routing in order to render the components in the mat-sidenav-content?
My app-routing looks like this:

const routes: Routes = [

  {

    path: 'dashboard',

    component: DashboardComponent,

    canActivate: [AuthguardService],

    children: [

      { path: 'first', component: FirstComponent},

      { path: 'second', component: SecondComponent}

    ]

  },

  {

    path: 'login',

    component: LoginComponent

  },

  {

    path: '',

    component: LoginComponent

  },

  {

    path: '**',

    component: PageNotFoundComponent

  }

];

And this is my dashboard component:

<mat-sidenav-container class="example-container">

  <mat-sidenav mode="side" opened>

    <mat-nav-list>

      <a mat-list-item routerLink='/first'>First Component</a>

      <a mat-list-item routerLink='/second'>Second Component</a>

      <a mat-list-item (click)="onLogOut()">Log out</a>

    </mat-nav-list>

  </mat-sidenav>



  <mat-sidenav-content>

    <router-outlet></router-outlet>

  </mat-sidenav-content>

</mat-sidenav-container>

angular-material angular7

share|improve this question

edited Jan 1 at 14:10

Elias

asked Jan 1 at 14:02

EliasElias

4910

I have an application with a login component a dashboard component which contains an angular material basic mat-sidenav-container and two more components. In the mat-sidenav I have set two routerLink items for the two components.
How should I configure the app-routing in order to render the components in the mat-sidenav-content?
My app-routing looks like this:

const routes: Routes = [

  {

    path: 'dashboard',

    component: DashboardComponent,

    canActivate: [AuthguardService],

    children: [

      { path: 'first', component: FirstComponent},

      { path: 'second', component: SecondComponent}

    ]

  },

  {

    path: 'login',

    component: LoginComponent

  },

  {

    path: '',

    component: LoginComponent

  },

  {

    path: '**',

    component: PageNotFoundComponent

  }

];

And this is my dashboard component:

<mat-sidenav-container class="example-container">

  <mat-sidenav mode="side" opened>

    <mat-nav-list>

      <a mat-list-item routerLink='/first'>First Component</a>

      <a mat-list-item routerLink='/second'>Second Component</a>

      <a mat-list-item (click)="onLogOut()">Log out</a>

    </mat-nav-list>

  </mat-sidenav>



  <mat-sidenav-content>

    <router-outlet></router-outlet>

  </mat-sidenav-content>

</mat-sidenav-container>

angular-material angular7

angular-material angular7

share|improve this question

edited Jan 1 at 14:10

Elias

asked Jan 1 at 14:02

EliasElias

4910

share|improve this question

edited Jan 1 at 14:10

Elias

asked Jan 1 at 14:02

EliasElias

4910

share|improve this question

share|improve this question

edited Jan 1 at 14:10

Elias

edited Jan 1 at 14:10

Elias

edited Jan 1 at 14:10

Elias

asked Jan 1 at 14:02

EliasElias

4910

asked Jan 1 at 14:02

EliasElias

4910

asked Jan 1 at 14:02

EliasElias

4910

4910

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I just removed the slash '/' from the routerLink in the dashboard component template and it worked
  
  – Elias
  Jan 1 at 14:43
  
  
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I just removed the slash '/' from the routerLink in the dashboard component template and it worked
  
  – Elias
  Jan 1 at 14:43
  
  
  

  
  
  
  

I just removed the slash '/' from the routerLink in the dashboard component template and it worked

– Elias
Jan 1 at 14:43

I just removed the slash '/' from the routerLink in the dashboard component template and it worked

– Elias
Jan 1 at 14:43

add a comment | 

1 Answer
1

active

oldest

votes

0

I just removed the slash '/' from the routerLink in the dashboard component template and it worked:

<a mat-list-item routerLink='first'>First Component</a>

<a mat-list-item routerLink='second'>Second Component</a>

share|improve this answer

answered Jan 1 at 14:44

EliasElias

4910

add a comment | 

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
});


}
});

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

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996092%2fangular-material-application-with-login-and-basic-sidenav%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

0

I just removed the slash '/' from the routerLink in the dashboard component template and it worked:

<a mat-list-item routerLink='first'>First Component</a>

<a mat-list-item routerLink='second'>Second Component</a>

share|improve this answer

answered Jan 1 at 14:44

EliasElias

4910

add a comment | 

0

I just removed the slash '/' from the routerLink in the dashboard component template and it worked:

<a mat-list-item routerLink='first'>First Component</a>

<a mat-list-item routerLink='second'>Second Component</a>

share|improve this answer

answered Jan 1 at 14:44

EliasElias

4910

add a comment | 

0

0

0

I just removed the slash '/' from the routerLink in the dashboard component template and it worked:

<a mat-list-item routerLink='first'>First Component</a>

<a mat-list-item routerLink='second'>Second Component</a>

share|improve this answer

answered Jan 1 at 14:44

EliasElias

4910

I just removed the slash '/' from the routerLink in the dashboard component template and it worked:

<a mat-list-item routerLink='first'>First Component</a>

<a mat-list-item routerLink='second'>Second Component</a>

share|improve this answer

answered Jan 1 at 14:44

EliasElias

4910

share|improve this answer

share|improve this answer

answered Jan 1 at 14:44

EliasElias

4910

answered Jan 1 at 14:44

EliasElias

4910

answered Jan 1 at 14:44

EliasElias

4910

4910

add a comment | 

add a comment | 

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

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

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996092%2fangular-material-application-with-login-and-basic-sidenav%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

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

Name

Email

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

Name

Email

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

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here