The Angular Masterclass/

...

/

The Router Outlet Component

The Router Outlet Component

Learn what the Router Outlet component is, where the component is loaded and how a user can see the related component of a route.

We'll cover the following...

What is the Router Outlet component?

The Router Outlet is a directive that’s part of the Router module. Its main role is to be a placeholder within our application where the Angular framework should place any components within a template.

Router Outlet directive in AppComponent template

Currently, we are using this directive in the app.component.html file of our Client Contacts Manager application. If we open this file, we will see the following:

import { AppPage } from './app.po';
import { browser, logging } from 'protractor';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getTitleText()).toEqual('Client-Contacts-Manager-Angular app is running!');
  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
});
Router Outlet directive used in app.component.html
...