Angular Router Child dosent render

Question

In my app.module.ts i have declared a child router component. When i want to navigate to this point, it will changed the url like expected but the html dosent render.

import { UserComponent } from './admintiles/user/user.component';
...
{
path: 'admin', component: AdminComponent, canActivate: [AuthGuardService], resolve: {
  user: UserResolve
},
children: [
  { path: 'user', component: UserComponent, canActivate: [AuthGuardService], resolve: {
    user: UserResolve
  }, data: {roles: 'Admin'}
},
],
data: {roles: 'Admin'}

}

User Component

    @Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {

  constructor(private route: ActivatedRoute, private http:HttpClient) { }
  user: any;

  ngOnInit(): void {
    this.route.data.subscribe((data) => { 
      this.user = data.user;
    }); 
  }

}

admmin.component.html

    <div class="tiles">
      <div class="userTile" [routerLink]="['user']">
          <div class="tileContainer">
          ...

Can someone spot my issue?

Answer 1

According to angular documentation, when Nesting Routes , you should also include a

second < router-outlet > in addition to the one in AppComponent.

In your case, AdminComponent is the parent route and UserComponent is the child route, which is going to be rendered inside the AdminComponent. To indicate Angular where you want the component to be rendered exactly, use a second <router-outlet></router-outlet>.

admin.component.html

<div class="tiles">
  <div class="userTile" [routerLink]="['user']">
    <div class="tileContainer">
      <router-outlet></router-outlet>  // UserComponent template will be rendered here 
    </div>
  </div>
</div>

Also bear in mind this child routes approach will not allow you to render the multiple children all at once. So maybe you wish to evolve your code so you can get choose in a flexible manner which child component to be rendered and still apply the styles from the tileContainer.

<ul class="tilesNavigation">
  <li><a routerLink="user-type-1">User type 1</a></li>
  <li><a routerLink="user-type-2">User type 2</a></li>
  <li><a routerLink="user-type-3">User type 3</a></li>
</ul>
<div class="tileContainer">
  <router-outlet></router-outlet>  // Child templates will be rendered here 
</div>