fuse-angular/src/app/main/documentation/services/config/config.component.html

<div id="config" class="page-layout simple fullwidth docs">

    <!-- HEADER -->
    <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
        <div fxLayout="column" fxLayoutAlign="center start">
            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
                <mat-icon class="secondary-text s-18">home</mat-icon>
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">Documentation</span>
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">Services</span>
            </div>
            <div class="h2 mt-16">Config</div>
        </div>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content p-24">

        <p>
            <code>Config</code> is a custom built Fuse service allows to have a granular control over the Fuse. It can
            be used for changing theme options (layout, color etc.) by component basis.
        </p>

            <div class="section-title">Usage</div>
            <p class="mat-grey-200-bg py-8">

            <fuse-highlight lang="typescript">
                <textarea #source>

                    export class SomeComponent
                    {
                        config: any;

                        constructor(
                            private _fuseConfigService: FuseConfigService
                        )
                        {
                            // Fully customizable surroundings for this particular component
                            this._fuseConfigService.config = {
                                layout          : {
                                    style         : 'vertical-layout-1',
                                    width         : 'fullwidth',
                                    navbar        : {
                                        hidden    : false,
                                        position  : 'left',
                                        folded    : false,
                                        background: 'mat-fuse-dark-700-bg'
                                    },
                                    toolbar       : {
                                        hidden    : false,
                                        position  : 'below-static',
                                        background: 'mat-white-500-bg'
                                    },
                                    footer        : {
                                        hidden    : false,
                                        position  : 'below-static',
                                        background: 'mat-fuse-dark-900-bg'
                                    }
                                },
                                customScrollbars: true
                            });
                        }

                        onInit()
                        {
                            // Subscribe to config change
                            this._fuseConfigService.config
                                .subscribe((config) => {
                                    this.config = config;
                                });
                        }
                    }

                </textarea>
            </fuse-highlight>

        </p>

    </div>

</div>