Added various files and re worked others

src/app/app-routing.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { DeclarationHostComponent } from './components/cds-declaration/declaration-host.component';
+import { HomeComponent } from './components/home/home.component';
 import { NotFoundComponent } from './components/error-routing/not-found.component';
 import { HeaderComponent } from './components/cds-declaration/header/header.component';
 
 export const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
-  { path: 'home', component: DeclarationHostComponent, data: { text: 'Home' } },
+  { path: 'home', component: HomeComponent, data: { text: 'Home' } },
   { path: 'declarations', component: HeaderComponent, data: { text: 'Declarations' } },
   { path: '**', component: NotFoundComponent } // must always be last
 ];

src/app/app.module.ts

@@ -7,18 +7,21 @@ import { IgniteComponent } from './components/navdrawer/ignite.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule } from '@angular/forms';
 import { HeaderComponent } from './components/cds-declaration/header/header.component';
-import { DeclarationHostComponent } from './components/cds-declaration/declaration-host.component';
-import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './components/home/home.component';
 import { NotFoundComponent } from './components/error-routing/not-found.component';
-import { ExpandingComponent } from './components/controls/expanding/expanding.component';
+import { ExpandingComponent } from './components/cds-declaration/header/header-controls/expanding-header-control/expanding.component';
+import { SettingsComponent } from './components/settings/settings.component';
+import { DeclarationTypeComponent } from './components/cds-declaration/header/declaration-type/declaration-type.component';
 @NgModule({
     declarations: [
         AppComponent,
         IgniteComponent,
         HeaderComponent,
-        DeclarationHostComponent,
+        HomeComponent,
         NotFoundComponent,
-        ExpandingComponent
+        ExpandingComponent,
+        SettingsComponent,
+        DeclarationTypeComponent
     ],
     imports: [
         BrowserModule,

src/app/components/cds-declaration/header/declaration-type/declaration-type.component.html

@@ -0,0 +1 @@
+<p>declaration-type works!</p>

src/app/components/cds-declaration/header/declaration-type/declaration-type.component.scss

@@ -0,0 +1,3 @@
+p {
+  margin-top: 0px;
+}

src/app/components/cds-declaration/header/declaration-type/declaration-type.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-declaration-type',
+  templateUrl: './declaration-type.component.html',
+  styleUrls: ['./declaration-type.component.scss']
+})
+export class DeclarationTypeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/controls/expanding/expanding.component.html → src/app/components/cds-declaration/header/header-controls/expanding-header-control/expanding.component.html

@@ -8,8 +8,6 @@
     </igx-expansion-panel-description>
   </igx-expansion-panel-header>
   <igx-expansion-panel-body>
-    <p>
-      The body of the expansion panel.
-    </p>
+      <app-declaration-type></app-declaration-type>
   </igx-expansion-panel-body>
 </igx-expansion-panel>

src/app/components/home/home.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/settings/settings.component.html

@@ -0,0 +1,41 @@
+<main igxFlex [class.mini-padding]="!drawerState.pin && drawerState.miniTemplate">
+  <span igxButton="icon" igxToggleAction="navigation">
+    <igx-icon fontSet="material">menu</igx-icon>
+  </span>
+
+  <section>
+    <h5 class="setting-title">Mode</h5>
+    <div>
+        <igx-switch (ngModelChange)="drawer.toggle()"  [(ngModel)]="drawerState.pin">
+            Pin
+        </igx-switch>
+    </div>
+    <div>
+        <igx-switch (ngModelChange)="drawer.toggle()"  [(ngModel)]="drawerState.miniTemplate">
+            Mini variant
+        </igx-switch>
+    </div>
+  </section>
+  <section>
+    <h5 class="setting-title">Touch gestures</h5>
+    <div>
+        <igx-switch [(ngModel)]="drawer.enableGestures" [checked]="true" [disabled]="drawerState.pin">
+            Enable gestures
+        </igx-switch>
+        <p class="setting-note">
+          Swipe or drag from the edge area to open or to close.
+          Unpin and try it out on a mobile device.
+      </p>
+    </div>
+  </section>
+  <section>
+    <h5 class="setting-title">Position</h5>
+    <div class="setting-container radio">
+        <igx-radio *ngFor="let item of ['left', 'right']" value="{{item}}" name="group" [(ngModel)]="drawer.position"
+            [disabled]="drawerState.pin">{{item}}</igx-radio>
+        <p class="setting-note">
+            Unpin to try it out.
+        </p>
+    </div>
+  </section>
+</main>

src/app/components/settings/settings.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { IgxNavigationDrawerComponent } from 'igniteui-angular';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+
+  constructor() { }
+
+  @ViewChild(IgxNavigationDrawerComponent, { static: true })
+  public drawer: IgxNavigationDrawerComponent;
+
+  public drawerState = {
+    miniTemplate: false,
+    open: true,
+    pin: true
+  };
+
+  ngOnInit() {
+  }
+
+}