Angular 6 Router navigation not rendering child component in the destination component

angular router navigate with params
angular routing not working
angular/router not loading component
router-outlet
angular routing best practices
would you like to add angular routing
how angular routing works

I have an Angular 6 application with a login component and a dashboard component. Am trying to navigate to DashboardComponent on the login button click event. DashboardComponent contains a child component called WardComponent . But while navigating the to the dashboard it render only the contents other than the child component ward.How can i render the dashboard component with child component it it after the login ?

Please see my component classes below

AppComponent

<router-outlet></router-outlet>

LoginComponent.ts

  export class LoginComponent {
  constructor(private router: Router) {}

  login() {
    this.router.navigate(["/dashboard/"]);
  }
}

DashboardComponent

import { Component } from "@angular/core";
@Component({
  selector: "dashboard",
  template: `
    haii u r in dashboard compo

    <div class="form-inline" style="padding: 40px;">
      <ward *ngFor="let ward of wards" [wardNumber]="ward"></ward>
    </div>
  `
})
export class DashboardComponent {
  constructor() {}
}

WardComponent.ts

import { Component, Input } from "@angular/core";
@Component({
  selector: "ward",
  template: `
    <div class="card bg-light mb-3" style="max-width: 18rem;">
      <div class="card-header"></div>
      <div class="card-body">
        <h2 class="card-title">{{ wardNumber + 1 }}</h2>
        <button class="btn btn-primary" (click)="checkIn()">check in</button>
        <button class="btn btn-primary" (click)="checkOut()">check Out</button>
      </div>
    </div>
  `
})
export class WardComponent {
  @Input() wardNumber: Number;
  checkedIn: boolean = false;
  constructor() {}

  checkIn() {
    console.log("checked in");
    this.checkedIn = true;
  }

  checkOut() {}
}

app.module.ts

  const indexRoutes: Route = {
  path: "",
  component: DashboardComponent
};
// for all invalid routers , it will redirect to login component
const fallbackRoutes = {
  path: "**",
  component: LoginComponent
};

const routes: Routes = [
  indexRoutes,

  {
    path: "dashboard",
    component: DashboardComponent
  },

  {
    path: "ward",
    component: WardComponent
  },

  fallbackRoutes
];

@NgModule({
  declarations: [
    AppComponent,
    WardComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Just change your Routes config like this:

const routes: Routes = [
  {
    path: "dashboard",
    component: DashboardComponent,
    children: [{
      path: "ward",
      component: WardComponent
    }]
  },
  {
    path: "",
    pathMatch: "full",
    redirectTo: "/dashboard"
  },
  {
    path: "**",
    component: LoginComponent
  }
];

@NgModule({...})
export class AppModule {}

I've added a pathMatch: 'full' and a redirectTo: '/dashboard' to path: ''. I've also gotten rid of the consts and then added the routes for those consts to the routes const itself.

You'll also have to add a <router-outlet></router-outlet> to the template of the DashboardComponent

In-app navigation: routing to views, Angular 6 Router navigation not rendering child component in the destination component. angular/router navigate with params angular routing best practices This is a continuation of my previous article Angular Lazy Load Routing using Route Guards. We covered the part to create different routes with menu design and generating child components. This post is about connecting the child routes with actual Angular authenticated guards and understanding the router linking with preventing route access.

Its because of the content of ward component is not populated correctly .i have added the content of wards in wrong place, instead of adding the wards array in WardComponent , i have put that in AppComponent.

Routing & Navigation, The router enables navigation by interpreting a browser URL as an instruction To use the Angular router, an app needs to have at least two components so that it when users attempt to navigate to a part of your application that does not exist. child route component that the router renders }, { path: 'child-b', component:  If I use the router navigation API, this navigation seems not to be working: this.router.navigate('child'); Neither does refresh the page work (refresh with '#/child' does not even instanciate the Child router). Child Router redirect seems to be only working with Router Link: <

Add the Ward route to children array like

const routes: Routes = [
    indexRoutes,
    {
        path: "dashboard",
        component: DashboardComponent,
        children:[
        {
             path: "ward",
             component: WardComponent
        }]
    },
    fallbackRoutes
   ];

Angular Router: Empty Paths, Componentless Routes, and , The name of the RouterOutlet used to render the route. Contains the first ActivatedRoute in the list of this route's child routes. A wildcard route can navigate to a custom "404 Not Found" component or redirect to The router composes the destination URL from the array like this: Milestone 6: Asynchronous routinglink. How to Create Nested Routes with Angular 9 Child Routes? You can create a nested routing by defining child routes using the children property of a route (alongside a path and component properties). You also need to add a nested router-outlet in the HTML template related to the component linked to the parent route (In our case it's the admin route).

Chapter 3. Navigation with the Angular router, 04, 16 · Web Dev Zone · Tutorial. Like (6). Comment (2). Save. Tweet At the core of the Angular router lies a powerful URL matching children: [ of doing this would be to render the list when navigating to /team/11 . a route that instantiates a component but does not “consume” any URL segments. UI-Router v1.0 for AngularJS (1.x) introduced the ability to route directly to AngularJS 1.5+ components. Although UI-Router still allows views to be defined as combinations of template and controller , we highly recommend that the AngularJS 1.5 component model is adopted instead.

Routing & Navigation - ts, The Angular router allows you to configure and implement such navigation without Not only do you want to be able to change the view inside the page, but you may With SPA, the code for rendering components is already on the client (​except for 6. 7. 8. import { Routes, RouterModule } from '@angular/router'; import  The parent component itself has no access to the child. You can't use the local variable technique if an instance of the parent component class must read or write child component values or must call child component methods. When the parent component class requires that kind of access, inject the child component into the parent as a ViewChild.

Angular 6 child routes, Now we have routes configured and a place to render them, but how do we navigate? At our last milestone, we'll have a modular, multi-view design with child routes. The Component Router is not part of the Angular 2 core. the name of the route that prescribes the destination component and a path for the URL  Angular Router: A Complete Example (build a Bootstrap Navigation Menu) Last Updated: 24 April 2020 local_offer Angular Router In this post, we are going to learn how to use several features of the Angular Router in order to build a navigation system with multiple navigation levels, similar to what you would find in an online learning platform or an online store like Amazon (but simpler).

Comments
  • Check the contents of wards in Dashboard, that might not be populated
  • you are right , i have added the content of wards in wrong place, instead of adding the wards array in WardComponent , i have put that in AppComponent.thanks alot
  • after adding the above snippet , its not rendering the login component , instead it directly render the dashboard component . i tried by adding a indexroutes and it render the login component . but it still showing the same behaviour , not rendering the child component ward even after adding the router-outlet
  • @AnsarSamad, one would ideally prevent the Dashboard path via a CanActivate guard to prevent unauthorized access to it. You can implement one and then check whether a user is logged in or not in the guard. If the user is not logged in, simply navigate the user to /login path.
  • The question is already answered by OP himself posted some time ago. When posting an answer, please make sure you add either a new solution, or a substantially better explanation, especially when answering older questions.