Angular2 nested routing

Question

I have a dashboard which has a link to the Profile page. When a user goes to Profile page it displays his profile, which has various sections eg basic information, portfolio, hobbies etc. Each section has a Add button clicking on which displays Add Section form (eg Add Portfolio)

Dashboard url: /dashboard/

Profile url: /dashboard/profile/

Add Portfolio url: /dashboard/profile/portfolio/new

Edit Portfolio url: /dashboard/profile/portfolio/edit/:id

What I want is that when user clicks the Add Portfolio button it should display the Add Portfolio form just above the Portfolio list, without replacing the complete profile. Similarly when edit link corresponding to a portfolio record is clicked it should display Edit Portfolio form above the list.

I am very new to Angular2 routing and can do simple routing, but if I implement it above with my current approach, I end up with links which when clicked replaces whole contents of the Profile page, probably because it only has one router outlet.

Any help, probably a plunker demonstrating a above case would be highly appreciated.

Answer 1

The Add Portfolio form should be a part of the Portfolio page rather than it's own page (ie they shouldn't have separate URLs).

You could make the Add Portfolio form into it's own component, and set it as hidden initially. Assuming you make an AddPortfolio component with selector add-portfolio , then in the HTML for your Portfolio component you could have eg.

<add-portfolio [hidden]="hide"></add-portfolio>

Then in the AddPortfolio class you have a boolean field, hide , which is initially true , and is set to false on the Add button click.

Answer 2

if you want to have separated url for create and edit portfolio scenario i might offer you following url separtation:

Dashboard url: /dashboard/view --> all profiles under dashboard

Profile url: /dashboard/profile/

Add Portfolio url: /dashboard/profile/portfolio/new

Edit Portfolio url: /dashboard/profile/portfolio/edit/:id

Your entry point file gonna have look like this:

App.ts

...
@RouteConfig([
  { path: '/dashboard', component: DashboardRoutedComponent, name: 'Dashboard' }
])
export class App {  }
}
...

DashboardRoutedComponent - we going to name components which serve routing purposes like RoutedComponent in the end

App.html

@Component({
  selector: 'app',
  providers: [ ...FORM_PROVIDERS ],
  directives: [ ...ROUTER_DIRECTIVES ],
  template: `
    <header>
    </header>

      <router-outlet></router-outlet>

    <footer>
    </footer>
  `
})

your DashboardRoutedComponent goint to define child routes

DashboardRoutedComponent.ts

@Component({
    selector:   'someSelectorDoesntMatter',
    template: '<router-outlet></router-outlet>' -->that's why we name it routed component
    directives: [
        ROUTER_DIRECTIVES
    ]
})
@RouteConfig([
    {
        path: '/view',
        name: 'View',
        useAsDefault: true,
        component: DashboardViewComponent,  --> here you going to display list of profiles
        data: { name: 'View' }
    },
    {
        path: '/profile/...',  --> here we show that component going to have child routes
        name: 'Profile',
        component: ProfileRoutedComponent,
        data: { name: 'Profile' }
    }
])
export class DashboardRoutedComponent {}

ProfileRoutedComponent will have same structure for view\\edit\\new.

In order to have list of portfolio in new\\edit scenarios they just going to share some portfolio list component and which will be re-render once new\\edit portfolio component going to share same services to fetch data.

i will update answer with plunk