Multiple layout for Angular2 using Routing

Question

I'm building my website with Angular2 using Routing.

I faced a problem: how do I using multiple layout for my Angular2 app using Router.

For example: I have at least 2 layout such as Login, Signup... (1 column) and Home, Profile... (1 header, 2 columns, 1 footer). My code for index.html:

<html>
    <head>
        <base href="/">
        <title>Angular 2 QuickStart</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles/main.css">

        <!-- 1. Load libraries -->
        <!-- IE required polyfills, in this exact order -->
        <script src="node_modules/es6-shim/es6-shim.min.js"></script>
        <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
        <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

        <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="node_modules/rxjs/bundles/Rx.js"></script>
        <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
        <script src="node_modules/angular2/bundles/router.dev.js"></script>

        <!-- 2. Configure SystemJS -->
        <script>
            System.config({
                packages: {
                    app: {
                        format: 'register',
                        defaultExtension: 'js'
                    }
                }
            });
            System.import('app/main')
            .then(null, console.error.bind(console));
        </script>
    </head>

    <!-- 3. Display the application -->
    <body>
        <app>Loading...</app>
    </body>
</html>

And code for app.component.ts:

import {Component, OnInit} from 'angular2/core';
import { Router, RouteConfig, RouteData, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'
import { AuthComponent } from './common/auth.component'
import { BlankComponent } from './common/blank.component'

@Component({
    selector: 'app',
    template:
        `
        <router-outlet></router-outlet>
        `
    ,
    directives: [
        ROUTER_DIRECTIVES,
        ],
    providers: [
        ROUTER_PROVIDERS,
        RouteData,
        AuthComponent,
        BlankComponent,
    ]
})

@RouteConfig([
    {
        path: '/',
        name: 'Login',
        data: {base: 'blank', 'login': false},
        component: BlankComponent,
        useAsDefault: true
    },{
        path: '/home',
        name: 'Home',
        data: {base: 'auth', 'login': true},
        component: AuthComponent,
    },
])

export class AppComponent implements OnInit{
    constructor(
        private _router: Router,
        private _routeData: RouteData){
    }
    ngOnInit(){
         // Some init action
    }
}

Every time I go to a route, the <route-outlet> will show corresponding component but I don't want to layout every component the whole app structure.

ajanta ajanta · Accepted Answer · 2017-03-04T18:45:02

If you do not want layout for certain page(s), you can define a layout component that only has and no other content.

import { Component, OnInit }        from '@angular/core';
import { Router }                   from '@angular/router';

@Component({

    template: '<router-outlet></router-outlet>',
})
export class SimpleLayoutComponent implements OnInit {

    constructor( private router: Router ) { }

    ngOnInit(): void { }
}

In router config, define the path for the layout component.

{
        path: '/pages',
        component: SimpleLayoutComponent,
        data: {
            title: 'Pages'
        },
        children: [
            {
                path: 'Login',
                component: BlankComponent,
                data: {base: 'blank', 'login': false},
            }
         ]
}

All child routes under this example path - "/pages/*" will use layout SimpleLayoutComponent that displays only child component template and no other content.

Multiple layout for Angular2 using Routing

1 Answers