Generating a custom root component (the easy approach):

The easiest way to use a custom root component is to use the SmartComponent CLI tool:

scl generate root [component_name]
 
# example: scl generate root custom-root
#          scl generate root

The CLI tool will ask you for a component name (if you did not provide one as an argument), a title to display on the page header (default: Demo Application), your company name and your company website. Then it will generate the required .ts, .html and .css files and make the necessary changes in your app.module.ts file:

That's it! In this case, your new component files would be found in "src/app/my-custom-root".

Creating a custom root component manually (the difficult approach):

For the SmartComponent Library to properly render a root component and use it to place essential element such as Smart Forms, breadcrumb trails and tabs, it must include some essential elements:

a router outlet named "view"
an unnamed router outlet
a Smart Breadcrumb component (if breadcrumb navigation is required)
a Smart MDI Navigation component (if a MDI interface is required)
a Smart Menu component
a Smart Dialog Outlet (required to display various dialogs such as error messages)

Sample Custom Root Component

The below example shows a custom root component that can support MDI/non-MDI interfaces and breadcrumb/non-breadcrumb navigation, depending on the configuration provided using the SmartComponentLibrary.forRoot method when importing the module.

HTML Markup

<div class="container-fluid">
  <div class="row">
    <!-- header -->
    <img class="hidden-xs hidden-sm cwlogo" src="./assets/consultingwerk.jpg" />
    <img class="scllogo" src="./assets/logo.png" />
    <div class="hidden-xs col-md-offset-3" style="padding-left: 15px; margin-top: -15px;">
      <h1>Demo Application</h1>
    </div>
  </div>
  <div class="wrapper" *ngIf="smartConfig.mdiInterface">
    <div class="row">
      <div class="col-xs-12 col-md-3">
        <smart-menu></smart-menu>
      </div>
      <div class="visible-xs visible-sm hidden-md hidden-lg col-xs-12" style="height: 30px"></div>
      <div class="col-xs-12 col-md-9">
        <router-outlet></router-outlet>
        <router-outlet name="view" *ngIf="!smartConfig.mdiInterface"></router-outlet>
        <smart-mdi></smart-mdi>
      </div>
    </div>
  </div>

  <!-- no MDI and no breadcrumb view -->

  <!-- adjust layout for breadcrumb view -->
  <div class="wrapper" *ngIf="!smartConfig.mdiInterface">
    <div class="row">
      <div class="col-xs-12 col-md-3">
        <smart-menu></smart-menu>
      </div>
      <div class="visible-xs visible-sm hidden-md hidden-lg col-xs-12" style="height: 30px"></div>
      <div class="col-xs-12 col-md-9">
        <div style="padding-left: 10px" *ngIf="smartConfig.breadcrumbNavigation">
          <smart-breadcrumb-navigation></smart-breadcrumb-navigation>
        </div>
        <router-outlet></router-outlet>
        <router-outlet name="view" *ngIf="!smartConfig.mdiInterface"></router-outlet>
      </div>
    </div>
  </div>


  <div class="foxlogo hidden-xs hidden-sm">
    <img src="./assets/fuchs_rechts.jpg" />
  </div>
  <footer class="footer">
    <p>&copy;2017 Consultingwerk Ltd. - http://www.consultingwerk.de</p>
  </footer>
  <smart-dialog-outlet></smart-dialog-outlet>

Typescript

import { Component } from '@angular/core';
import { SmartConfig } from '@consultingwerk/smartcomponents-core';

@Component({
  selector: 'app-root',
  templateUrl: './custom-root.component.html',
  styleUrls: ['./custom-root.component.css']
})
export class CustomRootComponent {

  constructor(public smartConfig: SmartConfig) { }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { SmartComponentLibraryModule } from '@consultingwerk/smartcomponent-library';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CustomRootComponent } from './custom-root/custom-root.component';

@NgModule({
  declarations: [
    CustomRootComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    SmartComponentLibraryModule.forRoot({
      serviceURI: 'http://sclbackend.local:8820',
      mdiInterface: false,
      breadcrumbNavigation: true
    }),
    BrowserAnimationsModule,
    RouterModule.forRoot([], { useHash: true })
  ],
  providers: [],
  bootstrap: [CustomRootComponent]
})
export class AppModule { }

The custom root component must use the app-root selector (required by Angular)
The custom root component must be included in the declarations setting of your AppModule, as shown above
Your AppModule must be configured to bootstrap the custom root component, as shown above