Angular Router

Activating components

At this point, we have a router state. The router can now activate this state by instantiating all the needed components, and placing them into appropriate router outlets.

To understand how it works, let's take a look at how we use router outlets in a component template.

The root component of the application has two outlets: primary and popup.

@Component({
  template: `
    ...
    <router-outlet></router-outlet>
 
    ...
    <router-outlet name="popup"></router-outlet>
  `
})
class MailAppCmp {
}

Other components, such as ConversationCmp, have only one:

@Component({ template: ` ... <router-outlet></router-outlet> ... ` }) class ConversationCmp { } ...