Carlos Cifuentes
AngularJS → Angular reference

named ui-view (multiple views) in modern Angular

Views that always appear together become a layout component that places the fixed parts directly in its template. Named router outlets exist for regions that navigate on their own.

Before · AngularJS
$stateProvider.state('mail', {
  url: '/mail',
  views: {
    '': { component: 'mailList' },
    'sidebar': { component: 'mailFolders' },
    'toolbar': { component: 'mailToolbar' }
  }
});

<div ui-view="toolbar"></div>
<div ui-view="sidebar"></div>
<div ui-view></div>
After · Angular
@Component({
  selector: 'app-mail-layout',
  imports: [RouterOutlet, MailToolbarComponent, MailFoldersComponent],
  template: `
    <app-mail-toolbar />
    <app-mail-folders />
    <router-outlet />
  `,
})
export class MailLayoutComponent {}

// routes
{ path: 'mail', component: MailLayoutComponent, children: [
  { path: '', component: MailListComponent },
] }

What changes

  • Fixed regions such as toolbars and sidebars become regular child components of the layout; only the changing region uses router-outlet.
  • A named outlet is declared with <router-outlet name="preview" /> and filled by a route with outlet: 'preview'.
  • Each named outlet has its own segment in the URL, written in parentheses, and is navigated independently of the primary outlet.

Migration tip. Use composition by default. Keep named outlets for a region with its own navigation, such as a side panel that must survive a page reload.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn