I'm trying to link a component from one component using routerLink = "selected"

 const routes: Routes = [
      {
        path: '',
        children: [
          {
            path: 'account',
            component: AccountComponent,
            children: [
              {
                path: 'selected',
                component: SelectedComponent,
              },
            ],
          },

        ]
      }
    ];

    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })
    export class AccountSettingsRoutingModule { }

This is AccountComponent

    import { Component, OnInit, AfterViewInit } from '@angular/core';
    import { Router, ActivatedRoute, RouterModule } from '@angular/router';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { Http, Response, Headers } from '@angular/http';
    @Component({
      selector: 'app-list-accounts',
      templateUrl: './accounts-listponent.html',
      styleUrls: ['./accounts-listponent.scss']
    })
    export class AccountComponent implements OnInit {

      constructor(private http: HttpClient, private router: Router) { }
     ngOnInit() {}
}

The url is changing to the desired like this dashboard/account/selected, but the view is not loading.

I'm trying to link a component from one component using routerLink = "selected"

 const routes: Routes = [
      {
        path: '',
        children: [
          {
            path: 'account',
            component: AccountComponent,
            children: [
              {
                path: 'selected',
                component: SelectedComponent,
              },
            ],
          },

        ]
      }
    ];

    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })
    export class AccountSettingsRoutingModule { }

This is AccountComponent

    import { Component, OnInit, AfterViewInit } from '@angular/core';
    import { Router, ActivatedRoute, RouterModule } from '@angular/router';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { Http, Response, Headers } from '@angular/http';
    @Component({
      selector: 'app-list-accounts',
      templateUrl: './accounts-list.component.html',
      styleUrls: ['./accounts-list.component.scss']
    })
    export class AccountComponent implements OnInit {

      constructor(private http: HttpClient, private router: Router) { }
     ngOnInit() {}
}

The url is changing to the desired like this dashboard/account/selected, but the view is not loading.

• javascript
• angular
• router
• routerlink

• Please, Share your html and component – Hitesh Kansagara Commented Apr 9, 2018 at 19:39
• Have you added <router-outlet></router-outlet> in app.component.html? – Hitesh Kansagara Commented Apr 9, 2018 at 20:49
• yes, it works now. Thanks – yer Commented Apr 9, 2018 at 20:52

1 Answer 1

Add <router-outlet></router-outlet> to AccountComponent. Read more in the docs.