home

.gitignore

@@ -39,3 +39,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+debug.log

angular.json

@@ -39,6 +39,8 @@
               "node_modules/nebular-icons/scss/nebular-icons.scss",
               "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
               "node_modules/leaflet/dist/leaflet.css",
+              "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
+              "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
               "src/app/@theme/styles/styles.scss"
             ],
             "scripts": [

package-lock.json

@@ -3069,7 +3069,7 @@
         },
         "util": {
           "version": "0.10.3",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
           "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
           "dev": true,
           "requires": {
@@ -13111,6 +13111,21 @@
         "tslib": "^1.9.0"
       }
     },
+    "ngx-owl-carousel-o": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-owl-carousel-o/-/ngx-owl-carousel-o-4.0.0.tgz",
+      "integrity": "sha512-CaHiC9XyTgk4bMSVdYivUUFnvLU8ghouCPwxK25419SDfLeCo/gtfqkLQf5HdS1qIIQ0niAKSN8tQBz1HX0OKA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.2.tgz",
+          "integrity": "sha512-wAH28hcEKwna96/UacuWaVspVLkg4x1aDM9JlzqaQTOFczCktkVAb5fmXChgandR1EraDPs2w8P+ozM+oafwxg=="
+        }
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",

package.json

@@ -67,6 +67,7 @@
     "ng2-ckeditor": "^1.2.7",
     "ng2-smart-table": "^1.6.0",
     "ngx-echarts": "^4.2.2",
+    "ngx-owl-carousel-o": "^4.0.0",
     "node-sass": "^4.14.1",
     "normalize.css": "6.0.0",
     "pace-js": "1.0.2",

src/app/pages/home/home-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './home.component';
+
+
+const routes: Routes = [
+  {
+    path:'',
+    component:HomeComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HomeRoutingModule { }

src/app/pages/home/home.component.html

+<section class="jumbotron text-center">
+    <div class="container">
+        <h1 class="jumbotron-heading">Amsterdam</h1>
+        <p class="lead text-muted">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+        </p>
+    </div>
+</section>
+
+<section>
+    <div class="container">
+        <div class="row d-flex justify-content-between align-items-stretch">
+            <mat-card class="col-3">
+                <mat-card-header>
+                    <mat-card-title>Lorem Ipsum</mat-card-title>
+                </mat-card-header>
+                <mat-card-content class="text-center">
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                        labore
+                        et
+                        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                        aliquip ex
+                        ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+                        dolore
+                        eu fugiat
+                        nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                        deserunt
+                        mollit
+                        anim id est laborum.
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
+                        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
+                        beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
+                        odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                        Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+                        sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
+                        voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
+                        laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui
+                        in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat
+                        quo voluptas nulla pariatur?
+                    </p>
+                </mat-card-content>
+            </mat-card>
+
+            <mat-card class="col-8 h-100">
+                <mat-card-content class="text-center">
+                    <owl-carousel-o [options]="customOptions">
+                        <ng-template carouselSlide id="1"><img class="d-block w-100" src="/assets/images/am1.jpg">
+                            <span><a href="https://commons.wikimedia.org/wiki/File:Amsterdam_-_Rijksmuseum_-_panoramio_-_Nikolai_Karaneschev.jpg"
+                                    title="via Wikimedia Commons">Nikolai Karaneschev</a> / <a
+                                    href="https://creativecommons.org/licenses/by/3.0">CC BY</a></span>
+                        </ng-template>
+                        <ng-template carouselSlide id="2"><img class="d-block w-100" src="/assets/images/am3.jpg">
+                            <span><a href="https://commons.wikimedia.org/wiki/File:Amsterdam_Prinsengracht_Wallpaper.jpg"
+                                    title="via Wikimedia Commons">Juke Schweizer</a> / <a
+                                    href="https://creativecommons.org/licenses/by-sa/4.0">CC BY-SA</a></span>
+                        </ng-template>
+                    </owl-carousel-o>
+                </mat-card-content>
+            </mat-card>
+        </div>
+    </div>
+</section>
\ No newline at end of file

src/app/pages/home/home.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/home/home.component.ts

+import { Component, OnInit } from '@angular/core';
+import { OwlOptions } from 'ngx-owl-carousel-o';
+
+@Component({
+  selector: 'ngx-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  customOptions: OwlOptions = {
+    loop: true,
+    autoplay:true,
+    autoHeight:true,
+    autoWidth:true,
+    dots:false,
+    center:true,
+    responsive: {
+      0: {
+        items:1
+      },
+      500: {
+        items:1
+      },
+      1000: {
+        items:1
+      }
+    }
+  }
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/home/home.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { HomeRoutingModule } from './home-routing.module';
+import { HomeComponent } from './home.component';
+import { NbCardModule } from '@nebular/theme';
+import { MatCardModule } from '@angular/material/card';
+import { CarouselModule } from 'ngx-owl-carousel-o';
+
+
+@NgModule({
+  declarations: [HomeComponent],
+  imports: [
+    CommonModule,
+    HomeRoutingModule,
+    NbCardModule,
+    MatCardModule,
+    CarouselModule
+  ]
+})
+export class HomeModule { }

src/app/pages/pages-routing.module.ts

@@ -9,6 +9,11 @@ const routes: Routes = [{
 
   component: PagesComponent,
   children: [
+    {
+      path: 'home',
+      loadChildren: () => import('./home/home.module')
+        .then(m => m.HomeModule),
+    },
     {
       path: 'external-app',
       loadChildren: () => import('./external-app/external-app.module')
@@ -36,7 +41,7 @@ const routes: Routes = [{
     },
     {
       path: '',
-      redirectTo: 'external-app',
+      redirectTo: 'home',
       pathMatch: 'full',
     },
     {