CODEWITHSUNDEEP
angular
user17074809
user17074809

Reputation:

Why the page is not displayed

When I click on "click here"

enter image description here

Then, I click on "Portfolio"

enter image description here

Normally a title "Portfolio page" must appear. Here, I don't see nothing.

enter image description here

I think it's a problem with the routing, but I don't understand...

Concretely, I don't know where the problem is, if you have a solution I'm really interested.

Here is how my files are structured for information

enter image description here

app-routing.module

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'identity',
  },
  {
    path: 'admin',
    component: AdminComponent,

    children: [
      {
        path: 'portfolio',
        component: PortfolioComponent,
      },
    ],
  },

  {
    path: 'identity',
    component: IdentityComponent,

    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'singin',
      },
      {
        path: 'singin',
        component: SinginComponent,
      },
    ],
  },
];

admin.component.html

<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu" />
<label for="openSidebarMenu" class="sidebarIconToggle">
  <div class="spinner diagonal part-1"></div>
  <div class="spinner horizontal"></div>
  <div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
  <ul class="sidebarMenuInner">
    <li>
      <a routerLink="portfolio"> <i class="fa fa-credit-card"></i>Portfolio </a>
    </li>
  </ul>
</div>

portfolio.component.html

<h1 style="text-align: center">Portfolio page</h1>

The code is here

Upvotes: 0

Views: 34

Answers (1)

Andrei
Andrei

Reputation: 12196

 {
    path: 'admin',
    component: AdminComponent,

    children: [
      {
        path: 'portfolio',
        component: PortfolioComponent,
      },
    ],
  },

this piece of configuration says that portfolio component will be rendered as a child of AdminComponent -> i.e. in AdminComponent's template. You should add <router-outlet> to AdminComponent, so router would know where to rendered this child

Upvotes: 1

Related Questions