refactor(showcase): add introduction module

Author: nivekcode

projects/ng-sortgrid-demo/src/app/app.component.html

@@ -1,34 +1,4 @@
-<ngsg-demo-nav></ngsg-demo-nav>
-<ngsg-demo-header></ngsg-demo-header>
-
-<div class="container">
-  <h1>1. Getting started</h1>
-  <ngsg-demo-step title="Loop over your elements with *ngFor. 🛎️ the items needs to be an array. Alternate you can also use the async pipe - see below" image="gs1.png"></ngsg-demo-step>
-  <ngsg-demo-step title="Apply the ngSortgridItem directive" image="gs2.png"></ngsg-demo-step>
-  <ngsg-demo-memory></ngsg-demo-memory>
-
-  <hr class="chaptor-separator"/>
-
-  <h1>2. React on changes</h1>
-  <p>In most cases you are interested in the new sort order. Often you want to store them in local storage or even send them
-  to the backend. To do so the following two steps are needed in addition to the "Getting started" step.</p>
-  <ngsg-demo-step title="Pass your items to the directive via the ngSortGridItems input." image="gs3.png"></ngsg-demo-step>
-  <ngsg-demo-step title="React on the 'sorted' output events" image="gs4.png"></ngsg-demo-step>
-  <ngsg-demo-react-on-changes-memory></ngsg-demo-react-on-changes-memory>
-
-  <hr class="chaptor-separator"/>
-  <h1>3. Group sortgrids</h1>
-  <p>In case you have more than one sortgriditem on the page you need to group the sortgriditems to avoid dropping drags from
-  one group in another group.</p>
-  <ngsg-demo-step title="Pass in a unique name to the ngSortGridGroup input" image="gs5.png"></ngsg-demo-step>
-  <ngsg-demo-groups-memory></ngsg-demo-groups-memory>
-
-  <hr class="chaptor-separator"/>
-  <h1>4. Use the async pipe</h1>
-  <ngsg-demo-step title="Use the async pipe to loop over the items and to pass in the ngSortGridItems" image="gs6.png"></ngsg-demo-step>
-  <ngsg-demo-async></ngsg-demo-async>
-</div>
-
+<router-outlet></router-outlet>
 <footer class="py-5 bg-dark">
   <div class="container">
     <p class="m-0 text-center text-white">Made with ♥️ by <a href="https://twitter.com/KevinKreuzer90" target="_blank">Kevin Kreuzer</a></p>

projects/ng-sortgrid-demo/src/app/app.module.ts

@@ -2,30 +2,11 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 
 import {AppComponent} from './app.component';
-import {NgsgModule} from '../../../ng-sortgrid/src/lib/ngsg.module';
-import {NavComponent} from './nav/nav.component';
-import {HeaderComponent} from './header/header.component';
-import {GettingStartedMemoryComponent} from './examples/getting-started/getting-started-memory.component';
-import {StepComponent} from './examples/step/step.component';
-import {ReactOnChangesMemoryComponent} from './examples/react-on-changes/react-on-changes-memory.component';
-import {GroupsMemoryComponent} from './examples/groups/groups-memory.component';
-import {CardComponent} from './examples/card/card.component';
-import {AsyncPipeMemoryComponent} from './examples/async-pipe/async-pipe-memory.component';
+import {AppRoutingModule} from './app.routing.module';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    NavComponent,
-    HeaderComponent,
-    GettingStartedMemoryComponent,
-    StepComponent,
-    ReactOnChangesMemoryComponent,
-    GroupsMemoryComponent,
-    CardComponent,
-    AsyncPipeMemoryComponent
-  ],
-  imports: [BrowserModule, NgsgModule],
-  providers: [],
+  declarations: [AppComponent],
+  imports: [BrowserModule, AppRoutingModule],
   bootstrap: [AppComponent]
 })
 export class AppModule {

projects/ng-sortgrid-demo/src/app/app.routing.module.ts

@@ -0,0 +1,12 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+
+@NgModule({
+  imports: [RouterModule.forRoot([
+    {path: '', loadChildren: './introduction/introduction.module#IntroductionModule'}
+  ])],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {
+}