python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
7 Routing and Navigation

Is it possible to have a multiple router-outlet in the same template?

Is it possible to have a multiple router-outlet in the same template?
Yes, why not! We can use multiple router-outlets in the same template by configuring our routers and simply adds the router-outlet name.

<div class="row">
  <div class="user">
    <router-outlet name="users"></router-outlet>
  </div>
  <div class="detail">
    <router-outlet name="userDetail"></router-outlet>
  </div>
</div>

And setups your route config and it looks like this.
//Apps roots
const appRoots = [
  path: ''redirectTo: '/dashboard'pathMatch: 'full' },
  path: 'userDetail'component: UserDetailComponent }, //Id is a Roots parameter.
  path: 'users'component: UserComponentdata:title:'User List'} },
  path: '**'redirectTo: 'PageNotFoundComponent' } //Wild Cards, the router will instantiate the PageNotFound component.
];

And
//AppModule class with @NgModule decorator
@NgModule({
  //Composability and Grouping
  //imports used for composing NgModules together
  imports: [
    BrowserModule,
    //enableTracing is used for debugging purposes only
    //Enables the location strategy that uses the URL fragment instead of the history API.
    RouterModule.forRoot(appRoots)
  ], 
  //bootstrapped entry component
  bootstrap: [AppComponent]
})
export class AppModule { }

ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions