Angular 2 - Standalone Component (without layout)

Question

Is it possible to create "standalone" components, meaning components without the basic app layout?

In my app.component.html I defined the navigation, header and footer. But now I want a login component that uses a different base layout.

My app.component.html looks like this:

<!-- Wrapper-->
<div id="wrapper">
    <!-- Left navigation bar -->
    <app-navigation></app-navigation>

    <!-- Main page wrapper -->
    <div id="page-wrapper" class="gray-bg">

        <!-- Top navigation -->
        <app-topnavbar></app-topnavbar>

        <!-- Main view/routes wrapper-->
        <router-outlet></router-outlet>

        <!-- Footer -->
        <app-footer></app-footer>
    </div>
    <!-- End page wrapper-->

</div>
<!-- End wrapper-->

And I want the router-outlet of the register and login component to be wrapped in a layout like this:

<!-- Wrapper-->
<div id="wrapper">

        <!-- Main view/routes wrapper-->
        <router-outlet></router-outlet>

</div>
<!-- End wrapper-->

How can I achieve this?

How is a "different base layout" related to "component without layout". Components without a layout are directives. But at some places components are required and directives are not supported (component parameter in routes, root component (bootstrap parameter in NgModule). — Günter Zöchbauer

Tudor Ciotlos Tudor Ciotlos · Accepted Answer · 2016-11-25T09:44:30

If I understood correctly, you currently have a root app component, which contains components for header, navigation and footer, each of them controlling a part of the screen.

The short answer to your questions is: yes, a component does not necessarily need to be included in the root AppComponent. You could simply navigate to your LoginComponent using routing from anywhere in your app.

EDIT

You could an additional wrapper for your "basic app layout", say an BasicAppComponent, whose template has this structure:

<!-- Left navigation bar -->
<app-navigation></app-navigation>

<!-- Main page wrapper -->
<div id="page-wrapper" class="gray-bg">

    <!-- Top navigation -->
    <app-topnavbar></app-topnavbar>

    <!-- Main view/routes wrapper-->
    <router-outlet></router-outlet>

    <!-- Footer -->
    <app-footer></app-footer>
</div>
<!-- End page wrapper-->

Then, in your root app component (AppComponent) you will have a structure like this:

<!-- Wrapper-->
<div id="wrapper">

        <!-- Main view/routes wrapper-->
        <router-outlet></router-outlet>

</div>
<!-- End wrapper-->

Additionally, you will build your LoginComponent with the desired structure. The router-outlet from the AppComponent will be replaced by either the BasicAppComponent or the LoginComponent.

Angular 2 - Standalone Component (without layout)

2 Answers