init

.editorconfig

+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.github/workflows/main.yml

+name: Autocloser
+on: [issues]
+jobs:
+  autoclose:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Issue auto-closer
+      uses: roots/issue-closer-action@v1.1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow the bellow rules:\n\n<pre>\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/black-dashboard-angular\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n</pre>\n\n"
+        issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)

.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

CHANGELOG.md

+## [1.3.0] - 2021-07-15
+### Updates
+- update to Angular 12
+- update all dependencies to match Angular 12 version
+
+When you build and serve your app it is possible that some warnings to appear on your terminal. Those will NOT affect your product.
+
+## [1.2.0] - 2020-12-18
+### Updates
+- update to Angular 11
+- update all dependencies to match Angular 11 version
+
+## [1.1.0] - 2020-03-10
+### Updates
+- update to Angular 9
+- update all dependencies to match Angular 9 version
+
+## [1.0.0] 2019-07-19
+### Initial Release

ISSUE_TEMPLATE.md

+<!--
+ IMPORTANT: Please use the following link to create a new issue:
+
+  https://www.creative-tim.com/new-issue/black-dashboard-angular
+
+**If your issue was not created using the app above, it will be closed immediately.**
+-->
+
+<!--
+Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
+👉  https://www.creative-tim.com/bundles
+👉  https://www.creative-tim.com
+-->

LICENSE.md

+MIT License
+
+Copyright (c) 2017 Creative Tim (www.creative-tim.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "black-dashboard-angular": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "allowedCommonJsDependencies": ["chart.js"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss",
+              "node_modules/ngx-toastr/toastr.css",
+              "src/assets/scss/black-dashboard.scss",
+              "src/assets/css/nucleo-icons.css"
+            ],
+            "scripts": [],
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": false,
+                  "inlineCritical": false
+                },
+                "fonts": true
+              },
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "black-dashboard-angular:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "black-dashboard-angular:build:production"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "black-dashboard-angular:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "black-dashboard-angular-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "prefix": "",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "black-dashboard-angular:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "black-dashboard-angular:serve:production"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "black-dashboard-angular",
+  "cli": {
+    "analytics": false
+  }
+}

documentation/documentation.html

+<!--
+/*!
+
+=========================================================
+* Black Dashboard Angular v1.3.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/black-dashboard-angular
+* Copyright 2020 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/black-dashboard-angular/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+-->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <link rel="apple-touch-icon" sizes="76x76" href="../public/apple-icon.png">
+  <link rel="icon" type="image/png" href="../src/assets/img/favicon.png" />
+  <title>
+    Components Documentation - Black Dashboard Angular by Creative Tim
+  </title>
+  <!--     Fonts and icons     -->
+  <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
+  <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+
+  <!-- Nucleo Icons -->
+  <link href="../src/assets/css/nucleo-icons.css" rel="stylesheet" />
+  <!-- CSS Files -->
+  <link href="./black-dashboard.css?v=1.3.0" rel="stylesheet" />
+  <!-- CSS Just for demo purpose, don't include it in your project -->
+  <link href="../src/assets/demo/demo.css" rel="stylesheet" />
+  <style media="screen">
+    .footer{
+      padding: 24px 0;
+    }
+  </style>
+</head>
+
+<body class="offline-doc">
+  <!-- Navbar -->
+  <nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent">
+    <div class="container">
+      <div class="navbar-wrapper">
+        <div class="navbar-toggle d-inline">
+          <button type="button" class="navbar-toggler">
+            <span class="navbar-toggler-bar bar1"></span>
+            <span class="navbar-toggler-bar bar2"></span>
+            <span class="navbar-toggler-bar bar3"></span>
+          </button>
+        </div>
+        <a class="navbar-brand" href="javascript:void(0)">Black Dashboard Angular</a>
+      </div>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-bar navbar-kebab"></span>
+        <span class="navbar-toggler-bar navbar-kebab"></span>
+        <span class="navbar-toggler-bar navbar-kebab"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navigation">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="https://github.com/creativetimofficial/black-dashboard-angular/issues" target="_blank">
+              Have an issue?
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <div class="modal modal-search fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModal" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="SEARCH">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <i class="tim-icons icon-simple-remove"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- End Navbar -->
+  <div class="page-header" style="height: 100vh;">
+    <div class="container">
+      <div class="row text-center">
+        <div class="col-md-8 ml-auto mr-auto">
+          <div class="brand">
+            <h1 class="title">
+              Black Dashboard Angular
+            </h1>
+            <h3 class="description">Documentation v1.3.0</h3>
+            <br/>
+            <a href="https://demos.creative-tim.com/black-dashboard-angular/#/documentation/tutorial" class="btn btn-primary btn-round btn-lg">View documentation</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <footer class="footer">
+    <div class="container">
+      <ul class="nav">
+        <li class="nav-item">
+          <a href="javascript:void(0)" class="nav-link">
+            Creative Tim
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="javascript:void(0)" class="nav-link">
+            About Us
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="javascript:void(0)" class="nav-link">
+            Blog
+          </a>
+        </li>
+      </ul>
+      <div class="copyright">
+        ©
+        <script>
+          document.write(new Date().getFullYear())
+        </script> made with <i class="tim-icons icon-heart-2"></i> by
+        <a href="javascript:void(0)" target="_blank">Creative Tim</a> for a better web.
+      </div>
+    </div>
+  </footer>
+  <!--   Core JS Files   -->
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
+
+</body>
+
+</html>

e2e/protractor.conf.js

+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.e2e.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
\ No newline at end of file

e2e/src/app.e2e-spec.ts

+import { AppPage } from "./app.po";
+import { browser, logging } from "protractor";
+
+describe("workspace-project App", () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it("should display welcome message", () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual("Welcome to black-dashboard-angular!");
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser
+      .manage()
+      .logs()
+      .get(logging.Type.BROWSER);
+    expect(logs).not.toContain(
+      jasmine.objectContaining({
+        level: logging.Level.SEVERE
+      } as logging.Entry)
+    );
+  });
+});

e2e/src/app.po.ts

+import { browser, by, element } from "protractor";
+
+export class AppPage {
+  navigateTo() {
+    return browser.get(browser.baseUrl) as Promise<any>;
+  }
+
+  getTitleText() {
+    return element(by.css("app-root h1")).getText() as Promise<string>;
+  }
+}

e2e/tsconfig.e2e.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
\ No newline at end of file

package.json

+{
+  "name": "black-dashboard-angular",
+  "version": "1.2.0",
+  "description": "Black Dasboard Angular, a Creative Tim Desgin. Coded by Creative Tim",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/creativetimofficial/black-dashboard-angular.git"
+  },
+  "keywords": [
+    "angular dashboard",
+    "angular admin",
+    "angular bootstrap admin",
+    "angular bootstrap dashboard",
+    "angular panel",
+    "angular bootstrap template",
+    "angular admin template",
+    "angular free",
+    "angular free dashboard",
+    "angular free bootstrap dashboard",
+    "free admin template",
+    "angular admin",
+    "angular admin panel",
+    "angular dashboard",
+    "angular dashboard free",
+    "angular admin free",
+    "angular free admin panel",
+    "angular freebie",
+    "angular freebie dashboard",
+    "angular freebie bootstrap dashboard",
+    "freebie admin template",
+    "angular dashboard freebie",
+    "angular admin freebie",
+    "angular freebie admin panel",
+    "creative tim",
+    "web dashboard",
+    "bootstrap 4 dashboard",
+    "bootstrap 4",
+    "css3 dashboard",
+    "bootstrap 4 admin",
+    "black dashboard bootstrap 4",
+    "frontend",
+    "responsive bootstrap 4 dashboard",
+    "free dashboard",
+    " free admin dashboard",
+    "free bootstrap 4 admin dashboard"
+  ],
+  "author": "Creative Tim <hello@creative-tim.com> (https://www.creative-tim.com/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/creativetimofficial/black-dashboard-angular/issues"
+  },
+  "homepage": "https://demos.creative-tim.com/black-dashboard-angular/#/dashboard",
+  "private": false,
+  "dependencies": {
+    "@angular/animations": "12.1.2",
+    "@angular/common": "12.1.2",
+    "@angular/compiler": "12.1.2",
+    "@angular/core": "12.1.2",
+    "@angular/forms": "12.1.2",
+    "@angular/localize": "^12.1.2",
+    "@angular/platform-browser": "12.1.2",
+    "@angular/platform-browser-dynamic": "12.1.2",
+    "@angular/router": "12.1.2",
+    "@fullcalendar/angular": "^5.10.1",
+    "@fullcalendar/daygrid": "^5.10.1",
+    "@fullcalendar/interaction": "^5.10.1",
+    "@ng-bootstrap/ng-bootstrap": "10.0.0",
+    "chart.js": "2.9.4",
+    "core-js": "3.15.2",
+    "fullcalendar": "^5.10.1",
+    "ngx-toastr": "14.0.0",
+    "rxjs": "7.2.0",
+    "tslib": "2.3.0",
+    "zone.js": "0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "12.1.2",
+    "@angular/cli": "12.1.2",
+    "@angular/compiler-cli": "12.1.2",
+    "@angular/language-service": "12.1.2",
+    "@schematics/angular": "^13.0.3",
+    "@types/jasmine": "3.8.1",
+    "@types/jasminewd2": "2.0.10",
+    "@types/node": "16.3.2",
+    "codelyzer": "6.0.2",
+    "jasmine-core": "3.8.0",
+    "jasmine-spec-reporter": "7.0.0",
+    "karma": "6.3.4",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-coverage-istanbul-reporter": "3.0.3",
+    "karma-jasmine": "4.0.1",
+    "karma-jasmine-html-reporter": "1.7.0",
+    "protractor": "7.0.0",
+    "ts-node": "10.1.0",
+    "tslint": "6.1.3",
+    "typescript": "4.3.5"
+  }
+}

src/app/app-routing.module.ts

+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { BrowserModule } from "@angular/platform-browser";
+import { Routes, RouterModule } from "@angular/router";
+
+import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
+import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
+
+const routes: Routes = [
+  {
+    path: "",
+    redirectTo: "dashboard",
+    pathMatch: "full"
+  },
+  {
+    path: "",
+    component: AdminLayoutComponent,
+    children: [
+      {
+        path: "",
+        loadChildren: () => import ("./layouts/admin-layout/admin-layout.module").then(m => m.AdminLayoutModule)
+      }
+    ]
+  }, {
+    path: "",
+    component: AuthLayoutComponent,
+    children: [
+      {
+        path: "",
+        loadChildren: () => import ("./layouts/auth-layout/auth-layout.module").then(m => m.AuthLayoutModule)
+      }
+    ]
+  },
+  {
+    path: "**",
+    redirectTo: "dashboard"
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    BrowserModule,
+    RouterModule.forRoot(routes, {
+      useHash: true
+    })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/app.component.html

+<!--The content below is only a placeholder and can be replaced.-->
+
+<router-outlet></router-outlet>

src/app/app.component.spec.ts

+import { TestBed, async } from "@angular/core/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+import { AppComponent } from "./app.component";
+
+describe("AppComponent", () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [AppComponent]
+    }).compileComponents();
+  }));
+
+  it("should create the app", () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'black-dashboard-angular'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual("black-dashboard-angular");
+  });
+
+  it("should render title in a h1 tag", () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector("h1").textContent).toContain(
+      "Welcome to black-dashboard-angular!"
+    );
+  });
+});

src/app/app.component.ts

+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.scss"]
+})
+export class AppComponent {
+  title = "black-dashboard-angular";
+}

src/app/app.module.ts

+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { HttpClientModule } from "@angular/common/http";
+import { RouterModule } from "@angular/router";
+import { ToastrModule } from 'ngx-toastr';
+
+import { AppComponent } from "./app.component";
+import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
+import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
+
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+
+import { AppRoutingModule } from "./app-routing.module";
+import { ComponentsModule } from "./components/components.module";
+import { HomePageComponent } from './pages/home-page/home-page.component';
+import { FullCalendarModule } from "@fullcalendar/angular";
+import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin!
+import interactionPlugin from '@fullcalendar/interaction'; // a plugin!
+
+FullCalendarModule.registerPlugins([ // register FullCalendar plugins
+  dayGridPlugin,
+  interactionPlugin
+]);
+
+@NgModule({
+  imports: [
+    BrowserAnimationsModule,
+    FormsModule,
+    HttpClientModule,
+    ComponentsModule,
+    NgbModule,
+    RouterModule,
+    AppRoutingModule,
+    ToastrModule.forRoot(),
+    FullCalendarModule
+  ],
+  declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent, HomePageComponent],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}

src/app/components/components.module.ts

+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { RouterModule } from "@angular/router";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+
+import { FooterComponent } from "./footer/footer.component";
+import { NavbarComponent } from "./navbar/navbar.component";
+import { SidebarComponent } from "./sidebar/sidebar.component";
+
+@NgModule({
+  imports: [CommonModule, RouterModule, NgbModule],
+  declarations: [FooterComponent, NavbarComponent, SidebarComponent],
+  exports: [FooterComponent, NavbarComponent, SidebarComponent]
+})
+export class ComponentsModule {}

src/app/components/footer/footer.component.html

+<footer class=" footer">
+  <div class=" container-fluid">
+    <ul class=" nav">
+      <li class=" nav-item">
+        <a class=" nav-link" href="https://www.creative-tim.com?ref=bda-footer">
+          Creative Tim
+        </a>
+      </li>
+      <li class=" nav-item">
+        <a class=" nav-link" href="https://www.creative-tim.com/about-us?ref=bda-footer">
+          About Us
+        </a>
+      </li>
+      <li class=" nav-item">
+        <a class=" nav-link" href="http://blog.creative-tim.com?ref=bda-footer"> Blog </a>
+      </li>
+    </ul>
+    <div class=" copyright">
+      &copy; {{ test | date: "yyyy" }} made with
+      <i class=" tim-icons icon-heart-2"> </i> by
+      <a href="https://www.creative-tim.com?ref=bda-footer" target="_blank"> Creative Tim </a>
+      for a better web.
+    </div>
+  </div>
+</footer>

src/app/components/footer/footer.component.spec.ts

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

src/app/components/footer/footer.component.ts

+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-footer",
+  templateUrl: "./footer.component.html",
+  styleUrls: ["./footer.component.css"]
+})
+export class FooterComponent implements OnInit {
+  test: Date = new Date();
+
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/components/navbar/navbar.component.html

+<nav class=" navbar navbar-expand-lg navbar-absolute navbar-transparent">
+  <div class=" container-fluid">
+    <div class=" navbar-wrapper">
+      <div class=" navbar-toggle d-inline">
+        <button class=" navbar-toggler" type="button" (click)="sidebarToggle()">
+          <span class=" navbar-toggler-bar bar1"> </span>
+          <span class=" navbar-toggler-bar bar2"> </span>
+          <span class=" navbar-toggler-bar bar3"> </span>
+        </button>
+      </div>
+      <a class=" navbar-brand" href="javascript:void(0)"> {{ getTitle() }} </a>
+    </div>
+    <button
+      aria-label="Toggle navigation"
+      class=" navbar-toggler"
+      (click)="collapse()"
+      [attr.aria-expanded]="!isCollapsed"
+      aria-controls="collapseExample"
+      id="navigation"
+      type="button"
+    >
+      <span class=" navbar-toggler-bar navbar-kebab"> </span>
+      <span class=" navbar-toggler-bar navbar-kebab"> </span>
+      <span class=" navbar-toggler-bar navbar-kebab"> </span>
+    </button>
+    <div class=" navbar-collapse" [ngbCollapse]="isCollapsed" id="navigation">
+      <ul class=" navbar-nav ml-auto">
+        <li class=" search-bar input-group">
+          <button
+            class=" btn btn-link"
+            data-target="#searchModal"
+            data-toggle="modal"
+            (click)="open(content)"
+            id="search-button"
+          >
+            <i class=" tim-icons icon-zoom-split"> </i>
+            <span class=" d-lg-none d-md-block"> Search </span>
+          </button>
+        </li>
+        <li class=" nav-item" ngbDropdown>
+          <a
+            class=" nav-link"
+            data-toggle="dropdown"
+            href="javascript:void(0)"
+            ngbDropdownToggle
+          >
+            <div class=" notification d-none d-lg-block d-xl-block"></div>
+            <i class=" tim-icons icon-sound-wave"> </i>
+            <p class=" d-lg-none">Notifications</p>
+          </a>
+          <ul class=" dropdown-menu-right dropdown-navbar" ngbDropdownMenu>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                Mike John responded to your email
+              </a>
+            </li>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                You have 5 more tasks
+              </a>
+            </li>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                Your friend Michael is in town
+              </a>
+            </li>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                Another notification
+              </a>
+            </li>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                Another one
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class=" nav-item" ngbDropdown>
+          <a
+            class=" nav-link"
+            data-toggle="dropdown"
+            href="javascript:void(0)"
+            ngbDropdownToggle
+          >
+            <div class=" photo">
+              <img alt="Profile Photo" src="assets/img/anime3.png" />
+            </div>
+            <b class=" caret d-none d-lg-block d-xl-block"> </b>
+            <p class=" d-lg-none">Log out</p>
+          </a>
+          <ul class=" dropdown-navbar" ngbDropdownMenu>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                Profile
+              </a>
+            </li>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                Settings
+              </a>
+            </li>
+            <li class=" dropdown-divider"></li>
+            <li class=" nav-link">
+              <a class=" nav-item" href="javascript:void(0)" ngbDropdownItem>
+                Log out
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class=" separator d-lg-none"></li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+<ng-template #content let-modal>
+  <div class=" modal-header">
+    <input
+      class=" form-control"
+      id="inlineFormInputGroup"
+      placeholder="SEARCH"
+      type="text"
+    />
+
+    <button
+      aria-label="Close"
+      class=" close"
+      data-dismiss="modal"
+      type="button"
+      (click)="modal.dismiss('Cross click')"
+    >
+      <i class=" tim-icons icon-simple-remove"> </i>
+    </button>
+  </div>
+
+</ng-template>

src/app/components/navbar/navbar.component.spec.ts

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

src/app/components/navbar/navbar.component.ts

+import { Component, OnInit, ElementRef, OnDestroy } from "@angular/core";
+import { ROUTES } from "../sidebar/sidebar.component";
+import { Location } from "@angular/common";
+import { Router } from "@angular/router";
+import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: "app-navbar",
+  templateUrl: "./navbar.component.html",
+  styleUrls: ["./navbar.component.css"]
+})
+export class NavbarComponent implements OnInit, OnDestroy {
+  private listTitles: any[];
+  location: Location;
+  mobile_menu_visible: any = 0;
+  private toggleButton: any;
+  private sidebarVisible: boolean;
+
+  public isCollapsed = true;
+
+  closeResult: string;
+
+  constructor(
+    location: Location,
+    private element: ElementRef,
+    private router: Router,
+    private modalService: NgbModal
+  ) {
+    this.location = location;
+    this.sidebarVisible = false;
+  }
+  // function that adds color white/transparent to the navbar on resize (this is for the collapse)
+   updateColor = () => {
+   var navbar = document.getElementsByClassName('navbar')[0];
+     if (window.innerWidth < 993 && !this.isCollapsed) {
+       navbar.classList.add('bg-white');
+       navbar.classList.remove('navbar-transparent');
+     } else {
+       navbar.classList.remove('bg-white');
+       navbar.classList.add('navbar-transparent');
+     }
+   };
+  ngOnInit() {
+    window.addEventListener("resize", this.updateColor);
+    this.listTitles = ROUTES.filter(listTitle => listTitle);
+    const navbar: HTMLElement = this.element.nativeElement;
+    this.toggleButton = navbar.getElementsByClassName("navbar-toggler")[0];
+    this.router.events.subscribe(event => {
+      this.sidebarClose();
+      var $layer: any = document.getElementsByClassName("close-layer")[0];
+      if ($layer) {
+        $layer.remove();
+        this.mobile_menu_visible = 0;
+      }
+    });
+  }
+
+  collapse() {
+    this.isCollapsed = !this.isCollapsed;
+    const navbar = document.getElementsByTagName("nav")[0];
+    if (!this.isCollapsed) {
+      navbar.classList.remove("navbar-transparent");
+      navbar.classList.add("bg-white");
+    } else {
+      navbar.classList.add("navbar-transparent");
+      navbar.classList.remove("bg-white");
+    }
+  }
+
+  sidebarOpen() {
+    const toggleButton = this.toggleButton;
+    const mainPanel = <HTMLElement>(
+      document.getElementsByClassName("main-panel")[0]
+    );
+    const html = document.getElementsByTagName("html")[0];
+    if (window.innerWidth < 991) {
+      mainPanel.style.position = "fixed";
+    }
+
+    setTimeout(function() {
+      toggleButton.classList.add("toggled");
+    }, 500);
+
+    html.classList.add("nav-open");
+
+    this.sidebarVisible = true;
+  }
+  sidebarClose() {
+    const html = document.getElementsByTagName("html")[0];
+    this.toggleButton.classList.remove("toggled");
+    const mainPanel = <HTMLElement>(
+      document.getElementsByClassName("main-panel")[0]
+    );
+
+    if (window.innerWidth < 991) {
+      setTimeout(function() {
+        mainPanel.style.position = "";
+      }, 500);
+    }
+    this.sidebarVisible = false;
+    html.classList.remove("nav-open");
+  }
+  sidebarToggle() {
+    // const toggleButton = this.toggleButton;
+    // const html = document.getElementsByTagName('html')[0];
+    var $toggle = document.getElementsByClassName("navbar-toggler")[0];
+
+    if (this.sidebarVisible === false) {
+      this.sidebarOpen();
+    } else {
+      this.sidebarClose();
+    }
+    const html = document.getElementsByTagName("html")[0];
+
+    if (this.mobile_menu_visible == 1) {
+      // $('html').removeClass('nav-open');
+      html.classList.remove("nav-open");
+      if ($layer) {
+        $layer.remove();
+      }
+      setTimeout(function() {
+        $toggle.classList.remove("toggled");
+      }, 400);
+
+      this.mobile_menu_visible = 0;
+    } else {
+      setTimeout(function() {
+        $toggle.classList.add("toggled");
+      }, 430);
+
+      var $layer = document.createElement("div");
+      $layer.setAttribute("class", "close-layer");
+
+      if (html.querySelectorAll(".main-panel")) {
+        document.getElementsByClassName("main-panel")[0].appendChild($layer);
+      } else if (html.classList.contains("off-canvas-sidebar")) {
+        document
+          .getElementsByClassName("wrapper-full-page")[0]
+          .appendChild($layer);
+      }
+
+      setTimeout(function() {
+        $layer.classList.add("visible");
+      }, 100);
+
+      $layer.onclick = function() {
+        //asign a function
+        html.classList.remove("nav-open");
+        this.mobile_menu_visible = 0;
+        $layer.classList.remove("visible");
+        setTimeout(function() {
+          $layer.remove();
+          $toggle.classList.remove("toggled");
+        }, 400);
+      }.bind(this);
+
+      html.classList.add("nav-open");
+      this.mobile_menu_visible = 1;
+    }
+  }
+
+  getTitle() {
+    var titlee = this.location.prepareExternalUrl(this.location.path());
+    if (titlee.charAt(0) === "#") {
+      titlee = titlee.slice(1);
+    }
+
+    for (var item = 0; item < this.listTitles.length; item++) {
+      if (this.listTitles[item].path === titlee) {
+        return this.listTitles[item].title;
+      }
+    }
+    return "Dashboard";
+  }
+
+  open(content) {
+    this.modalService.open(content, {windowClass: 'modal-search'}).result.then((result) => {
+      this.closeResult = `Closed with: ${result}`;
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
+  }
+
+  private getDismissReason(reason: any): string {
+    if (reason === ModalDismissReasons.ESC) {
+      return 'by pressing ESC';
+    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
+      return 'by clicking on a backdrop';
+    } else {
+      return  `with: ${reason}`;
+    }
+  }
+  ngOnDestroy(){
+     window.removeEventListener("resize", this.updateColor);
+  }
+}

src/app/components/sidebar/sidebar.component.html

+<div class="logo">
+  <a href="https://www.creative-tim.com?ref=bda-sidebar-logo" class="simple-text logo-mini">
+    <div class="logo-img">
+      <img src="./assets/img/angular2-logo-white.png" />
+    </div>
+  </a>
+  <a href="https://www.creative-tim.com?ref=bda-sidebar-logo" class="simple-text logo-normal">
+    Creative Tim
+  </a>
+</div>
+<div class="sidebar-wrapper">
+  <ul class="nav">
+    <li
+      routerLinkActive="active"
+      *ngFor="let menuItem of menuItems"
+      class="{{ menuItem.class }} nav-item"
+    >
+      <a [routerLink]="[menuItem.path]">
+        <i class="tim-icons  {{ menuItem.icon }}"></i>
+        <p>{{ menuItem.title }}</p>
+      </a>
+    </li>
+  </ul>
+</div>

src/app/components/sidebar/sidebar.component.spec.ts

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

src/app/components/sidebar/sidebar.component.ts

+import { Component, OnInit } from "@angular/core";
+
+declare interface RouteInfo {
+  path: string;
+  title: string;
+  rtlTitle: string;
+  icon: string;
+  class: string;
+}
+export const ROUTES: RouteInfo[] = [
+  {
+    path: "/home-page",
+    title: "หน้าหลัก",
+    rtlTitle: "",
+    icon: "icon-shape-star",
+    class: ""
+  },
+  {
+    path: "/dashboard",
+    title: "Dashboard",
+    rtlTitle: "لوحة القيادة",
+    icon: "icon-chart-pie-36",
+    class: ""
+  },
+  {
+    path: "/icons",
+    title: "Icons",
+    rtlTitle: "الرموز",
+    icon: "icon-atom",
+    class: ""
+  },
+  {
+    path: "/maps",
+    title: "Maps",
+    rtlTitle: "خرائط",
+    icon: "icon-pin",
+    class: "" },
+  {
+    path: "/notifications",
+    title: "Notifications",
+    rtlTitle: "إخطارات",
+    icon: "icon-bell-55",
+    class: ""
+  },
+
+  {
+    path: "/user",
+    title: "User Profile",
+    rtlTitle: "ملف تعريفي للمستخدم",
+    icon: "icon-single-02",
+    class: ""
+  },
+  {
+    path: "/tables",
+    title: "Table List",
+    rtlTitle: "قائمة الجدول",
+    icon: "icon-puzzle-10",
+    class: ""
+  },
+  {
+    path: "/typography",
+    title: "Typography",
+    rtlTitle: "طباعة",
+    icon: "icon-align-center",
+    class: ""
+  },
+  {
+    path: "/rtl",
+    title: "RTL Support",
+    rtlTitle: "ار تي ال",
+    icon: "icon-world",
+    class: ""
+  }
+];
+
+@Component({
+  selector: "app-sidebar",
+  templateUrl: "./sidebar.component.html",
+  styleUrls: ["./sidebar.component.css"]
+})
+export class SidebarComponent implements OnInit {
+  menuItems: any[];
+
+  constructor() {}
+
+  ngOnInit() {
+    this.menuItems = ROUTES.filter(menuItem => menuItem);
+  }
+  isMobileMenu() {
+    if (window.innerWidth > 991) {
+      return false;
+    }
+    return true;
+  }
+}

src/app/layouts/admin-layout/admin-layout.component.html

+<div class="wrapper">
+  <div class="sidebar"><app-sidebar></app-sidebar></div>
+  <div class="main-panel">
+    <app-navbar></app-navbar>
+    <router-outlet></router-outlet>
+    <app-footer></app-footer>
+  </div>
+</div>
+<div class=" fixed-plugin">
+  <div class=" show-dropdown" ngbDropdown>
+    <a data-toggle="dropdown" ngbDropdownToggle>
+      <i class=" fa fa-cog fa-2x"> </i>
+    </a>
+    <ul ngbDropdownMenu>
+      <li class=" header-title">Sidebar Background</li>
+      <li class=" adjustments-line">
+        <a class=" switch-trigger background-color" href="javascript:void(0)">
+          <div class=" badge-colors text-center">
+            <span
+              class=" badge filter badge-danger"
+              [ngClass]="{'active':sidebarColor==='red'}" (click)="changeSidebarColor('red')"
+            >
+            </span>
+            <span
+              class=" badge filter badge-primary"
+              [ngClass]="{'active':sidebarColor==='primary'}" (click)="changeSidebarColor('primary')"
+            >
+            </span>
+            <span class=" badge filter badge-info" [ngClass]="{'active':sidebarColor==='blue'}" (click)="changeSidebarColor('blue')"> </span>
+            <span class=" badge filter badge-success" [ngClass]="{'active':sidebarColor==='green'}" (click)="changeSidebarColor('green')">
+            </span>
+          </div>
+          <div class=" clearfix"></div>
+        </a>
+      </li>
+      <li class=" adjustments-line text-center color-change">
+        <span class=" color-label"> LIGHT MODE </span>
+        <span class=" badge light-badge mr-2" (click)="changeDashboardColor('white-content')"> </span>
+        <span class=" badge dark-badge ml-2" (click)="changeDashboardColor('black-content')"> </span>
+        <span class=" color-label"> DARK MODE </span>
+      </li>
+    </ul>
+  </div>
+</div>

src/app/layouts/admin-layout/admin-layout.component.spec.ts

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

src/app/layouts/admin-layout/admin-layout.component.ts

+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-admin-layout",
+  templateUrl: "./admin-layout.component.html",
+  styleUrls: ["./admin-layout.component.scss"]
+})
+export class AdminLayoutComponent implements OnInit {
+  public sidebarColor: string = "red";
+
+  constructor() {}
+  changeSidebarColor(color){
+    var sidebar = document.getElementsByClassName('sidebar')[0];
+    var mainPanel = document.getElementsByClassName('main-panel')[0];
+
+    this.sidebarColor = color;
+
+    if(sidebar != undefined){
+        sidebar.setAttribute('data',color);
+    }
+    if(mainPanel != undefined){
+        mainPanel.setAttribute('data',color);
+    }
+  }
+  changeDashboardColor(color){
+    var body = document.getElementsByTagName('body')[0];
+    if (body && color === 'white-content') {
+        body.classList.add(color);
+    }
+    else if(body.classList.contains('white-content')) {
+      body.classList.remove('white-content');
+    }
+  }
+  ngOnInit() {}
+}

src/app/layouts/admin-layout/admin-layout.module.ts

+import { NgModule } from "@angular/core";
+import { HttpClientModule } from "@angular/common/http";
+import { RouterModule } from "@angular/router";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+
+import { AdminLayoutRoutes } from "./admin-layout.routing";
+import { DashboardComponent } from "../../pages/dashboard/dashboard.component";
+import { IconsComponent } from "../../pages/icons/icons.component";
+import { MapComponent } from "../../pages/map/map.component";
+import { NotificationsComponent } from "../../pages/notifications/notifications.component";
+import { UserComponent } from "../../pages/user/user.component";
+import { TablesComponent } from "../../pages/tables/tables.component";
+import { TypographyComponent } from "../../pages/typography/typography.component";
+// import { RtlComponent } from "../../pages/rtl/rtl.component";
+
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forChild(AdminLayoutRoutes),
+    FormsModule,
+    HttpClientModule,
+    NgbModule,
+  ],
+  declarations: [
+    DashboardComponent,
+    UserComponent,
+    TablesComponent,
+    IconsComponent,
+    TypographyComponent,
+    NotificationsComponent,
+    MapComponent,
+    // RtlComponent
+  ]
+})
+export class AdminLayoutModule {}

src/app/layouts/admin-layout/admin-layout.routing.ts

+import { Routes } from "@angular/router";
+
+import { DashboardComponent } from "../../pages/dashboard/dashboard.component";
+import { IconsComponent } from "../../pages/icons/icons.component";
+import { MapComponent } from "../../pages/map/map.component";
+import { NotificationsComponent } from "../../pages/notifications/notifications.component";
+import { UserComponent } from "../../pages/user/user.component";
+import { TablesComponent } from "../../pages/tables/tables.component";
+import { TypographyComponent } from "../../pages/typography/typography.component";
+import { HomePageComponent } from "src/app/pages/home-page/home-page.component";
+// import { RtlComponent } from "../../pages/rtl/rtl.component";
+
+export const AdminLayoutRoutes: Routes = [
+  { path: "home-page", component: HomePageComponent },
+  { path: "dashboard", component: DashboardComponent },
+  { path: "icons", component: IconsComponent },
+  { path: "maps", component: MapComponent },
+  { path: "notifications", component: NotificationsComponent },
+  { path: "user", component: UserComponent },
+  { path: "tables", component: TablesComponent },
+  { path: "typography", component: TypographyComponent },
+  // { path: "rtl", component: RtlComponent }
+];

src/app/layouts/auth-layout/auth-layout.component.spec.ts

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

src/app/layouts/auth-layout/auth-layout.component.ts

+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+import { ROUTES } from '../../components/sidebar/sidebar.component';
+import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-auth-layout',
+  templateUrl: './auth-layout.component.html',
+  styleUrls: ['./auth-layout.component.scss']
+})
+export class AuthLayoutComponent implements OnInit, OnDestroy {
+  public menuItems: any[];
+  test: Date = new Date();
+  closeResult: string;
+  public sidebarColor: string = "red";
+  public isCollapsed = true;
+  mobile_menu_visible: any = 0;
+  private toggleButton: any;
+  private sidebarVisible: boolean;
+
+  constructor(private router: Router, private modalService: NgbModal) { }
+
+  changeSidebarColor(color){
+    var sidebar = document.getElementsByClassName('sidebar')[0];
+    var mainPanel = document.getElementsByClassName('main-panel')[0];
+
+    this.sidebarColor = color;
+
+    if(sidebar != undefined){
+        sidebar.setAttribute('data',color);
+    }
+    if(mainPanel != undefined){
+        mainPanel.setAttribute('data',color);
+    }
+  }
+  changeDashboardColor(color){
+    var body = document.getElementsByTagName('body')[0];
+    if (body && color === 'white-content') {
+        body.classList.add(color);
+    }
+    else if(body.classList.contains('white-content')) {
+      body.classList.remove('white-content');
+    }
+  }
+  // function that adds color white/transparent to the navbar on resize (this is for the collapse)
+   updateColor = () => {
+   var navbar = document.getElementsByClassName('navbar')[0];
+     if (window.innerWidth < 993 && !this.isCollapsed) {
+       navbar.classList.add('bg-white');
+       navbar.classList.remove('navbar-transparent');
+     } else {
+       navbar.classList.remove('bg-white');
+       navbar.classList.add('navbar-transparent');
+     }
+   };
+  ngOnInit() {
+    var navbar = document.getElementsByClassName('navbar')[0];
+
+    window.addEventListener("resize", this.updateColor);
+    this.toggleButton = navbar.getElementsByClassName("navbar-toggler")[0];
+    this.router.events.subscribe(event => {
+      this.sidebarClose();
+      var $layer: any = document.getElementsByClassName("close-layer")[0];
+      if ($layer) {
+        $layer.remove();
+        this.mobile_menu_visible = 0;
+      }
+    });
+    this.menuItems = ROUTES.filter(menuItem => menuItem);
+    // on this page, we need on the body tag the classes .rtl and .menu-on-right
+    document.body.classList.add("rtl", "menu-on-right");
+    // we also need the rtl bootstrap
+    // so we add it dynamically to the head
+    let head = document.head;
+    let link = document.createElement("link");
+    link.type = "text/css";
+    link.rel = "stylesheet";
+    link.id = "rtl-id";
+    link.href =
+      "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css";
+    head.appendChild(link);
+
+  }
+  ngOnDestroy() {
+    // when we exit this page, we need to delete the classes .rtl and .menu-on-right
+    // from the body tag
+    document.body.classList.remove("rtl", "menu-on-right");
+    // we also need to delete the rtl bootstrap, so it does not break the other pages
+    // that do not make use of rtl
+    document.getElementById("rtl-id").remove();
+  }
+  collapse() {
+    this.isCollapsed = !this.isCollapsed;
+    const navbar = document.getElementsByTagName("nav")[0];
+    if (!this.isCollapsed) {
+      navbar.classList.remove("navbar-transparent");
+      navbar.classList.add("bg-white");
+    } else {
+      navbar.classList.add("navbar-transparent");
+      navbar.classList.remove("bg-white");
+    }
+  }
+
+  sidebarOpen() {
+    const toggleButton = this.toggleButton;
+    const mainPanel = <HTMLElement>(
+      document.getElementsByClassName("main-panel")[0]
+    );
+    const html = document.getElementsByTagName("html")[0];
+    if (window.innerWidth < 991) {
+      mainPanel.style.position = "fixed";
+    }
+
+    setTimeout(function() {
+      toggleButton.classList.add("toggled");
+    }, 500);
+
+    html.classList.add("nav-open");
+
+    this.sidebarVisible = true;
+  }
+  sidebarClose() {
+    const html = document.getElementsByTagName("html")[0];
+    this.toggleButton.classList.remove("toggled");
+    const mainPanel = <HTMLElement>(
+      document.getElementsByClassName("main-panel")[0]
+    );
+
+    if (window.innerWidth < 991) {
+      setTimeout(function() {
+        mainPanel.style.position = "";
+      }, 500);
+    }
+    this.sidebarVisible = false;
+    html.classList.remove("nav-open");
+  }
+  sidebarToggle() {
+    // const toggleButton = this.toggleButton;
+    // const html = document.getElementsByTagName('html')[0];
+    var $toggle = document.getElementsByClassName("navbar-toggler")[0];
+
+    if (this.sidebarVisible === false) {
+      this.sidebarOpen();
+    } else {
+      this.sidebarClose();
+    }
+    const html = document.getElementsByTagName("html")[0];
+
+    if (this.mobile_menu_visible == 1) {
+      // $('html').removeClass('nav-open');
+      html.classList.remove("nav-open");
+      if ($layer) {
+        $layer.remove();
+      }
+      setTimeout(function() {
+        $toggle.classList.remove("toggled");
+      }, 400);
+
+      this.mobile_menu_visible = 0;
+    } else {
+      setTimeout(function() {
+        $toggle.classList.add("toggled");
+      }, 430);
+
+      var $layer = document.createElement("div");
+      $layer.setAttribute("class", "close-layer");
+
+      if (html.querySelectorAll(".main-panel")) {
+        document.getElementsByClassName("main-panel")[0].appendChild($layer);
+      } else if (html.classList.contains("off-canvas-sidebar")) {
+        document
+          .getElementsByClassName("wrapper-full-page")[0]
+          .appendChild($layer);
+      }
+
+      setTimeout(function() {
+        $layer.classList.add("visible");
+      }, 100);
+
+      $layer.onclick = function() {
+        //asign a function
+        html.classList.remove("nav-open");
+        this.mobile_menu_visible = 0;
+        $layer.classList.remove("visible");
+        setTimeout(function() {
+          $layer.remove();
+          $toggle.classList.remove("toggled");
+        }, 400);
+      }.bind(this);
+
+      html.classList.add("nav-open");
+      this.mobile_menu_visible = 1;
+    }
+  }
+  open(content) {
+    this.modalService.open(content, {windowClass: 'modal-search'}).result.then((result) => {
+      this.closeResult = `Closed with: ${result}`;
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
+  }
+
+  private getDismissReason(reason: any): string {
+    if (reason === ModalDismissReasons.ESC) {
+      return 'by pressing ESC';
+    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
+      return 'by clicking on a backdrop';
+    } else {
+      return  `with: ${reason}`;
+    }
+  }
+}

src/app/layouts/auth-layout/auth-layout.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AuthLayoutRoutes } from './auth-layout.routing';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { HttpClientModule } from "@angular/common/http";
+
+import { RtlComponent } from '../../pages/rtl/rtl.component';
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forChild(AuthLayoutRoutes),
+    FormsModule,
+    HttpClientModule,
+    NgbModule
+  ],
+  declarations: [
+    RtlComponent,
+  ]
+})
+export class AuthLayoutModule { }

src/app/layouts/auth-layout/auth-layout.routing.ts

+import { Routes } from '@angular/router';
+
+import { RtlComponent } from '../../pages/rtl/rtl.component';
+
+
+export const AuthLayoutRoutes: Routes = [
+    { path: 'rtl',          component: RtlComponent },
+];

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

+<div class=" content">
+    <div class="row">
+        <div class="col-sm-6">
+            <div class="card">
+                <div class="card-body">
+                    <div>
+                        <h4 class="card-title">ตาราง</h4>
+                    </div>
+                    <full-calendar [options]="calendarOptions"></full-calendar>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-6">
+            <div class="card">
+                <div class="card-body">
+                    <div>
+                        <h4 class="card-title">ตาราง</h4>
+                    </div>
+                    <div class="row">
+                        <div class="col-6 mb-3">
+                            <label for="exampleFormControlSelect1">วันที่เริ่มใช้</label>
+                            <input type="date" class="form-control" value="">
+                        </div>
+                        <div class="col-6 mb-3">
+                            <label for="exampleFormControlSelect1">วันที่เริ่มใช้</label>
+                            <input type="date" class="form-control" value="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

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

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

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

+import { Component, OnInit } from '@angular/core';
+import { CalendarOptions } from '@fullcalendar/angular';
+
+@Component({
+  selector: 'app-home-page',
+  templateUrl: './home-page.component.html',
+  styleUrls: ['./home-page.component.scss']
+})
+export class HomePageComponent implements OnInit {
+
+  calendarOptions: CalendarOptions = {
+    initialView: 'dayGridMonth',
+    dateClick: this.handleDateClick.bind(this), // bind is important!
+    events: [
+      { title: 'จองรถ', date: '2021-11-23' },
+      { title: 'event 2', date: '2021-11-23' }
+    ]
+  };
+
+  handleDateClick(arg) {
+    alert('date click! ' + arg.dateStr)
+  }
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/icons/icons.component.ts

+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-icons",
+  templateUrl: "icons.component.html"
+})
+export class IconsComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/pages/map/map.component.html

+
+<div class=" content">
+  <div class=" row">
+    <div class=" col-md-12">
+      <div class=" card card-plain">
+        <div class=" card-header">Google Maps</div>
+        <div class=" card-body"><div class=" map" id="map"></div></div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/map/map.component.ts

+import { Component, OnInit } from "@angular/core";
+
+declare const google: any;
+
+interface Marker {
+lat: number;
+lng: number;
+label?: string;
+draggable?: boolean;
+}
+
+@Component({
+  selector: "app-map",
+  templateUrl: "map.component.html"
+})
+export class MapComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {
+
+        var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
+        var mapOptions = {
+            zoom: 13,
+            center: myLatlng,
+            scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
+            styles: [{
+                "elementType": "geometry",
+                "stylers": [{
+                  "color": "#1d2c4d"
+                }]
+              },
+              {
+                "elementType": "labels.text.fill",
+                "stylers": [{
+                  "color": "#8ec3b9"
+                }]
+              },
+              {
+                "elementType": "labels.text.stroke",
+                "stylers": [{
+                  "color": "#1a3646"
+                }]
+              },
+              {
+                "featureType": "administrative.country",
+                "elementType": "geometry.stroke",
+                "stylers": [{
+                  "color": "#4b6878"
+                }]
+              },
+              {
+                "featureType": "administrative.land_parcel",
+                "elementType": "labels.text.fill",
+                "stylers": [{
+                  "color": "#64779e"
+                }]
+              },
+              {
+                "featureType": "administrative.province",
+                "elementType": "geometry.stroke",
+                "stylers": [{
+                  "color": "#4b6878"
+                }]
+              },
+              {
+                "featureType": "landscape.man_made",
+                "elementType": "geometry.stroke",
+                "stylers": [{
+                  "color": "#334e87"
+                }]
+              },
+              {
+                "featureType": "landscape.natural",
+                "elementType": "geometry",
+                "stylers": [{
+                  "color": "#023e58"
+                }]
+              },
+              {
+                "featureType": "poi",
+                "elementType": "geometry",
+                "stylers": [{
+                  "color": "#283d6a"
+                }]
+              },
+              {
+                "featureType": "poi",
+                "elementType": "labels.text.fill",
+                "stylers": [{
+                  "color": "#6f9ba5"
+                }]
+              },
+              {
+                "featureType": "poi",
+                "elementType": "labels.text.stroke",
+                "stylers": [{
+                  "color": "#1d2c4d"
+                }]
+              },
+              {
+                "featureType": "poi.park",
+                "elementType": "geometry.fill",
+                "stylers": [{
+                  "color": "#023e58"
+                }]
+              },
+              {
+                "featureType": "poi.park",
+                "elementType": "labels.text.fill",
+                "stylers": [{
+                  "color": "#3C7680"
+                }]
+              },
+              {
+                "featureType": "road",
+                "elementType": "geometry",
+                "stylers": [{
+                  "color": "#304a7d"
+                }]
+              },
+              {
+                "featureType": "road",
+                "elementType": "labels.text.fill",
+                "stylers": [{
+                  "color": "#98a5be"
+                }]
+              },
+              {
+                "featureType": "road",
+                "elementType": "labels.text.stroke",
+                "stylers": [{
+                  "color": "#1d2c4d"
+                }]
+              },
+              {
+                "featureType": "road.highway",
+                "elementType": "geometry",
+                "stylers": [{
+                  "color": "#2c6675"
+                }]
+              },
+              {
+                "featureType": "road.highway",
+                "elementType": "geometry.fill",
+                "stylers": [{
+                  "color": "#9d2a80"
+                }]
+              },
+              {
+                "featureType": "road.highway",
+                "elementType": "geometry.stroke",
+                "stylers": [{
+                  "color": "#9d2a80"
+                }]
+              },
+              {
+                "featureType": "road.highway",
+                "elementType": "labels.text.fill",
+                "stylers": [{
+                  "color": "#b0d5ce"
+                }]
+              },
+              {
+                "featureType": "road.highway",
+                "elementType": "labels.text.stroke",
+                "stylers": [{
+                  "color": "#023e58"
+                }]
+              },
+              {
+                "featureType": "transit",
+                "elementType": "labels.text.fill",
+                "stylers": [{
+                  "color": "#98a5be"
+                }]
+              },
+              {
+                "featureType": "transit",
+                "elementType": "labels.text.stroke",
+                "stylers": [{
+                  "color": "#1d2c4d"
+                }]
+              },
+              {
+                "featureType": "transit.line",
+                "elementType": "geometry.fill",
+                "stylers": [{
+                  "color": "#283d6a"
+                }]
+              },
+              {
+                "featureType": "transit.station",
+                "elementType": "geometry",
+                "stylers": [{
+                  "color": "#3a4762"
+                }]
+              },
+              {
+                "featureType": "water",
+                "elementType": "geometry",
+                "stylers": [{
+                  "color": "#0e1626"
+                }]
+              },
+              {
+                "featureType": "water",
+                "elementType": "labels.text.fill",
+                "stylers": [{
+                  "color": "#4e6d70"
+                }]
+              }
+            ]
+        };
+        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
+
+        var marker = new google.maps.Marker({
+            position: myLatlng,
+            title: "Hello World!"
+        });
+
+        // To add the marker to the map, call setMap();
+        marker.setMap(map);
+  }
+}

src/app/pages/notifications/notifications.component.html

+<div class=" content">
+  <div class=" row">
+    <div class=" col-md-6">
+      <div class=" card">
+        <div class=" card-header">
+          <h4 class=" card-title">Notifications Style</h4>
+        </div>
+        <div class=" card-body">
+          <ngb-alert [type]="'info'" [dismissible]="false">
+            <span> This is a plain notification </span>
+          </ngb-alert>
+          <ngb-alert [type]="'info'" *ngIf="!staticAlertClosed" [dismissible]="false">
+            <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close" (click)="staticAlertClosed = true">
+              <i class="tim-icons icon-simple-remove"></i>
+            </button>
+            <span> This is a notification with close button. </span>
+          </ngb-alert>
+          <ngb-alert
+            class=" alert-with-icon"
+            data-notify="container"
+            [type]="'info'"*ngIf="!staticAlertClosed1" [dismissible]="false">
+              <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close" (click)="staticAlertClosed1 = true">
+                <i class="tim-icons icon-simple-remove"></i>
+              </button>
+            <span class=" tim-icons icon-bell-55" data-notify="icon">
+            </span>
+            <span data-notify="message">
+              This is a notification with close button and icon.
+            </span>
+          </ngb-alert>
+          <ngb-alert
+            class=" alert-with-icon"
+            data-notify="container"
+            [type]="'info'"
+            *ngIf="!staticAlertClosed2" [dismissible]="false">
+              <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close" (click)="staticAlertClosed2 = true">
+                <i class="tim-icons icon-simple-remove"></i>
+              </button>
+            <span class=" tim-icons icon-bell-55" data-notify="icon">
+            </span>
+            <span data-notify="message">
+              This is a notification with close button and icon and have
+              many lines. You can see that the icon and the close button
+              are always vertically aligned. This is a beautiful
+              notification. So you don't have to worry about the style.
+            </span>
+          </ngb-alert>
+        </div>
+      </div>
+    </div>
+    <div class=" col-md-6">
+      <div class=" card">
+        <div class=" card-header">
+          <h4 class=" card-title">Notification states</h4>
+        </div>
+        <div class=" card-body">
+          <ngb-alert [type]="'primary'" *ngIf="!staticAlertClosed3" [dismissible]="false">
+            <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close" (click)="staticAlertClosed3 = true">
+              <i class="tim-icons icon-simple-remove"></i>
+            </button>
+            <span>
+              <b> Primary - </b> This is a regular notification made
+              with ".alert-primary"
+            </span>
+          </ngb-alert>
+          <ngb-alert [type]="'info'" *ngIf="!staticAlertClosed4" [dismissible]="false">
+            <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close" (click)="staticAlertClosed4 = true">
+              <i class="tim-icons icon-simple-remove"></i>
+            </button>
+            <span>
+              <b> Info - </b> This is a regular notification made with
+              ".alert-info"
+            </span>
+          </ngb-alert>
+          <ngb-alert [type]="'success'" *ngIf="!staticAlertClosed5" [dismissible]="false">
+            <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close" (click)="staticAlertClosed5 = true">
+              <i class="tim-icons icon-simple-remove"></i>
+            </button>
+            <span>
+              <b> Success - </b> This is a regular notification made
+              with ".alert-success"
+            </span>
+          </ngb-alert>
+          <ngb-alert [type]="'warning'" *ngIf="!staticAlertClosed6" [dismissible]="false">
+            <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close" (click)="staticAlertClosed6 = true">
+              <i class="tim-icons icon-simple-remove"></i>
+            </button>
+            <span>
+              <b> Warning - </b> This is a regular notification made
+              with ".alert-warning"
+            </span>
+          </ngb-alert>
+          <ngb-alert [type]="'danger'" *ngIf="!staticAlertClosed7" [dismissible]="false">
+            <button type="button" aria-hidden="true" class="close" data-dismiss="alert" aria-label="Close" (click)="staticAlertClosed7 = true">
+              <i class="tim-icons icon-simple-remove"></i>
+            </button>
+            <span>
+              <b> Danger - </b> This is a regular notification made with
+              ".alert-danger"
+            </span>
+          </ngb-alert>
+        </div>
+      </div>
+    </div>
+    <div class=" col-md-12">
+      <div class=" card">
+        <div class=" card-body">
+          <div class=" places-buttons">
+            <div class=" row">
+              <div class=" col-md-6 ml-auto mr-auto text-center">
+                <h4 class=" card-title">Notifications Places</h4>
+                <p class=" category">Click to view notifications</p>
+              </div>
+            </div>
+            <div class=" row">
+              <div class=" col-lg-8 ml-auto mr-auto">
+                <div class=" row">
+                  <div class=" col-md-4">
+                    <button
+                      class=" btn btn-danger btn-block"
+                      (click)="showNotification('top', 'left')"
+                    >
+                      Top Left
+                    </button>
+                  </div>
+                  <div class=" col-md-4">
+                    <button
+                      class=" btn btn-danger btn-block"
+                      (click)="showNotification('top', 'center')"
+                    >
+                      Top Center
+                    </button>
+                  </div>
+                  <div class=" col-md-4">
+                    <button
+                      class=" btn btn-danger btn-block"
+                      (click)="showNotification('top', 'right')"
+                    >
+                      Top Right
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class=" row">
+              <div class=" col-lg-8 ml-auto mr-auto">
+                <div class=" row">
+                  <div class=" col-md-4">
+                    <button
+                      class=" btn btn-danger btn-block"
+                      (click)="showNotification('bottom', 'left')"
+                    >
+                      Bottom Left
+                    </button>
+                  </div>
+                  <div class=" col-md-4">
+                    <button
+                      class=" btn btn-danger btn-block"
+                      (click)="
+                        showNotification('bottom', 'center')
+                      "
+                    >
+                      Bottom Center
+                    </button>
+                  </div>
+                  <div class=" col-md-4">
+                    <button
+                      class=" btn btn-danger btn-block"
+                      (click)="showNotification('bottom', 'right')"
+                    >
+                      Bottom Right
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/notifications/notifications.component.ts

+import { Component, OnInit } from "@angular/core";
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: "app-notifications",
+  templateUrl: "notifications.component.html"
+})
+export class NotificationsComponent implements OnInit {
+  staticAlertClosed  = false;
+  staticAlertClosed1 = false;
+  staticAlertClosed2 = false;
+  staticAlertClosed3 = false;
+  staticAlertClosed4 = false;
+  staticAlertClosed5 = false;
+  staticAlertClosed6 = false;
+  staticAlertClosed7 = false;
+
+  constructor(private toastr: ToastrService) {}
+
+  showNotification(from, align){
+
+      const color = Math.floor((Math.random() * 5) + 1);
+
+      switch(color){
+        case 1:
+        this.toastr.info('<span class="tim-icons icon-bell-55" [data-notify]="icon"></span> Welcome to <b>Black Dashboard Angular</b> - a beautiful freebie for every web developer.', '', {
+           disableTimeOut: true,
+           closeButton: true,
+           enableHtml: true,
+           toastClass: "alert alert-info alert-with-icon",
+           positionClass: 'toast-' + from + '-' +  align
+         });
+        break;
+        case 2:
+        this.toastr.success('<span class="tim-icons icon-bell-55" [data-notify]="icon"></span> Welcome to <b>Black Dashboard Angular</b> - a beautiful freebie for every web developer.', '', {
+           disableTimeOut: true,
+           closeButton: true,
+           enableHtml: true,
+           toastClass: "alert alert-success alert-with-icon",
+           positionClass: 'toast-' + from + '-' +  align
+         });
+        break;
+        case 3:
+        this.toastr.warning('<span class="tim-icons icon-bell-55" [data-notify]="icon"></span> Welcome to <b>Black Dashboard Angular</b> - a beautiful freebie for every web developer.', '', {
+           disableTimeOut: true,
+           closeButton: true,
+           enableHtml: true,
+           toastClass: "alert alert-warning alert-with-icon",
+           positionClass: 'toast-' + from + '-' +  align
+         });
+        break;
+        case 4:
+        this.toastr.error('<span class="tim-icons icon-bell-55" [data-notify]="icon"></span> Welcome to <b>Black Dashboard Angular</b> - a beautiful freebie for every web developer.', '', {
+           disableTimeOut: true,
+           enableHtml: true,
+           closeButton: true,
+           toastClass: "alert alert-danger alert-with-icon",
+           positionClass: 'toast-' + from + '-' +  align
+         });
+         break;
+         case 5:
+         this.toastr.show('<span class="tim-icons icon-bell-55" [data-notify]="icon"></span> Welcome to <b>Black Dashboard Angular</b> - a beautiful freebie for every web developer.', '', {
+            disableTimeOut: true,
+            closeButton: true,
+            enableHtml: true,
+            toastClass: "alert alert-primary alert-with-icon",
+            positionClass: 'toast-' + from + '-' +  align
+          });
+        break;
+        default:
+        break;
+      }
+  }
+
+  ngOnInit() {}
+}

src/app/pages/tables/tables.component.html

+
+<div class=" content">
+  <div class=" row">
+    <div class=" col-md-12">
+      <div class=" card">
+        <div class=" card-header">
+          <h4 class=" card-title">Simple Table</h4>
+        </div>
+        <div class=" card-body">
+          <div class=" table-responsive">
+            <table class=" table tablesorter" id="">
+              <thead class=" text-primary">
+                <tr>
+                  <th>Name</th>
+                  <th>Country</th>
+                  <th>City</th>
+                  <th class=" text-center">Salary</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Dakota Rice</td>
+                  <td>Niger</td>
+                  <td>Oud-Turnhout</td>
+                  <td class=" text-center">$36,738</td>
+                </tr>
+                <tr>
+                  <td>Minerva Hooper</td>
+                  <td>Curaçao</td>
+                  <td>Sinaai-Waas</td>
+                  <td class=" text-center">$23,789</td>
+                </tr>
+                <tr>
+                  <td>Sage Rodriguez</td>
+                  <td>Netherlands</td>
+                  <td>Baileux</td>
+                  <td class=" text-center">$56,142</td>
+                </tr>
+                <tr>
+                  <td>Philip Chaney</td>
+                  <td>Korea, South</td>
+                  <td>Overland Park</td>
+                  <td class=" text-center">$38,735</td>
+                </tr>
+                <tr>
+                  <td>Doris Greene</td>
+                  <td>Malawi</td>
+                  <td>Feldkirchen in Kärnten</td>
+                  <td class=" text-center">$63,542</td>
+                </tr>
+                <tr>
+                  <td>Mason Porter</td>
+                  <td>Chile</td>
+                  <td>Gloucester</td>
+                  <td class=" text-center">$78,615</td>
+                </tr>
+                <tr>
+                  <td>Jon Porter</td>
+                  <td>Portugal</td>
+                  <td>Gloucester</td>
+                  <td class=" text-center">$98,615</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class=" col-md-12">
+      <div class=" card card-plain">
+        <div class=" card-header">
+          <h4 class=" card-title">Table on Plain Background</h4>
+          <p class=" category">Here is a subtitle for this table</p>
+        </div>
+        <div class=" card-body">
+          <div class=" table-responsive">
+            <table class=" table tablesorter" id="">
+              <thead class=" text-primary">
+                <tr>
+                  <th>Name</th>
+                  <th>Country</th>
+                  <th>City</th>
+                  <th class=" text-center">Salary</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Dakota Rice</td>
+                  <td>Niger</td>
+                  <td>Oud-Turnhout</td>
+                  <td class=" text-center">$36,738</td>
+                </tr>
+                <tr>
+                  <td>Minerva Hooper</td>
+                  <td>Curaçao</td>
+                  <td>Sinaai-Waas</td>
+                  <td class=" text-center">$23,789</td>
+                </tr>
+                <tr>
+                  <td>Sage Rodriguez</td>
+                  <td>Netherlands</td>
+                  <td>Baileux</td>
+                  <td class=" text-center">$56,142</td>
+                </tr>
+                <tr>
+                  <td>Philip Chaney</td>
+                  <td>Korea, South</td>
+                  <td>Overland Park</td>
+                  <td class=" text-center">$38,735</td>
+                </tr>
+                <tr>
+                  <td>Doris Greene</td>
+                  <td>Malawi</td>
+                  <td>Feldkirchen in Kärnten</td>
+                  <td class=" text-center">$63,542</td>
+                </tr>
+                <tr>
+                  <td>Mason Porter</td>
+                  <td>Chile</td>
+                  <td>Gloucester</td>
+                  <td class=" text-center">$78,615</td>
+                </tr>
+                <tr>
+                  <td>Jon Porter</td>
+                  <td>Portugal</td>
+                  <td>Gloucester</td>
+                  <td class=" text-center">$98,615</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/tables/tables.component.ts

+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-tables",
+  templateUrl: "tables.component.html"
+})
+export class TablesComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/pages/typography/typography.component.html

+
+<div class=" content">
+  <div class=" row">
+    <div class=" col-md-12">
+      <div class=" card">
+        <div class=" card-header mb-5">
+          <h5 class=" card-category">Black Table Heading</h5>
+          <h3 class=" card-title">Created using Poppins Font Family</h3>
+        </div>
+        <div class=" card-body">
+          <div class=" typography-line">
+            <h1><span> Header 1 </span> The Life of Black Dashboard</h1>
+          </div>
+          <div class=" typography-line">
+            <h2><span> Header 2 </span> The Life of Black Dashboard</h2>
+          </div>
+          <div class=" typography-line">
+            <h3><span> Header 3 </span> The Life of Black Dashboard</h3>
+          </div>
+          <div class=" typography-line">
+            <h4><span> Header 4 </span> The Life of Black Dashboard</h4>
+          </div>
+          <div class=" typography-line">
+            <h5><span> Header 5 </span> The Life of Black Dashboard</h5>
+          </div>
+          <div class=" typography-line">
+            <h6><span> Header 6 </span> The Life of Black Dashboard</h6>
+          </div>
+          <div class=" typography-line">
+            <p>
+              <span> Paragraph </span> I will be the leader of a company that
+              ends up being worth billions of dollars, because I got the
+              answers. I understand culture. I am the nucleus. I think that’s a
+              responsibility that I have, to push possibilities, to show people,
+              this is the level that things could be at.
+            </p>
+          </div>
+          <div class=" typography-line">
+            <span> Quote </span>
+            <blockquote>
+              <p class=" blockquote blockquote-danger">
+                "I will be the leader of a company that ends up being worth
+                billions of dollars, because I got the answers. I understand
+                culture. I am the nucleus. I think that'™s a responsibility that
+                I have, to push possibilities, to show people, this is the level
+                that things could be at." <br />
+
+                <br />
+
+                <small> - Noaa </small>
+              </p>
+            </blockquote>
+          </div>
+          <div class=" typography-line">
+            <span> Muted Text </span>
+            <p class=" text-muted">
+              I will be the leader of a company that ends up being worth
+              billions of dollars, because I got the answers...
+            </p>
+          </div>
+          <div class=" typography-line">
+            <span> Primary Text </span>
+            <p class=" text-primary">
+              I will be the leader of a company that ends up being worth
+              billions of dollars, because I got the answers...
+            </p>
+          </div>
+          <div class=" typography-line">
+            <span> Info Text </span>
+            <p class=" text-info">
+              I will be the leader of a company that ends up being worth
+              billions of dollars, because I got the answers...
+            </p>
+          </div>
+          <div class=" typography-line">
+            <span> Success Text </span>
+            <p class=" text-success">
+              I will be the leader of a company that ends up being worth
+              billions of dollars, because I got the answers...
+            </p>
+          </div>
+          <div class=" typography-line">
+            <span> Warning Text </span>
+            <p class=" text-warning">
+              I will be the leader of a company that ends up being worth
+              billions of dollars, because I got the answers...
+            </p>
+          </div>
+          <div class=" typography-line">
+            <span> Danger Text </span>
+            <p class=" text-danger">
+              I will be the leader of a company that ends up being worth
+              billions of dollars, because I got the answers...
+            </p>
+          </div>
+          <div class=" typography-line">
+            <h2>
+              <span> Small Tag </span> Header with small subtitle <br />
+
+              <small> Use "small" tag for the headers </small>
+            </h2>
+          </div>
+          <div class=" typography-line">
+            <span> Lists </span>
+            <div class=" row">
+              <div class=" col-md-3">
+                <h5>Unordered List</h5>
+                <ul>
+                  <li>List Item</li>
+                  <li>List Item</li>
+                  <li class=" list-unstyled">
+                    <ul>
+                      <li>List Item</li>
+                      <li>List Item</li>
+                      <li>List Item</li>
+                    </ul>
+                  </li>
+                  <li>List Item</li>
+                </ul>
+              </div>
+              <div class=" col-md-3">
+                <h5>Ordered List</h5>
+                <ol>
+                  <li>List Item</li>
+                  <li>List Item</li>
+                  <li>List item</li>
+                  <li>List Item</li>
+                </ol>
+              </div>
+              <div class=" col-md-3">
+                <h5>Unstyled List</h5>
+                <ul class=" list-unstyled">
+                  <li>List Item</li>
+                  <li>List Item</li>
+                  <li>List item</li>
+                  <li>List Item</li>
+                </ul>
+              </div>
+              <div class=" col-md-3">
+                <h5>Inline List</h5>
+                <ul class=" list-inline">
+                  <li class=" list-inline-item">List1</li>
+                  <li class=" list-inline-item">List2</li>
+                  <li class=" list-inline-item">List3</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class=" typography-line">
+            <span> Code </span>
+            <p>
+              This is <code> .css-class-as-code </code> , an example of an
+              inline code element. Wrap inline code within a
+              <code> <code>...</code> </code> tag.
+            </p>
+            <pre>
+1. #This is an example of preformatted text.<br>
+
+2. #Here is another line of code
+</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/typography/typography.component.ts

+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-typography",
+  templateUrl: "typography.component.html"
+})
+export class TypographyComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

src/app/pages/user/user.component.html

+
+<div class=" content">
+  <div class=" row">
+    <div class=" col-md-8">
+      <div class=" card">
+        <div class=" card-header"><h5 class=" title">Edit Profile</h5></div>
+        <div class=" card-body">
+          <form>
+            <div class=" row">
+              <div class=" col-md-5 pr-md-1">
+                <div class=" form-group">
+                  <label> Company (disabled) </label>
+                  <input
+                    class=" form-control"
+                    disabled=""
+                    placeholder="Company"
+                    type="text"
+                    value="Creative Code Inc."
+                  />
+                </div>
+              </div>
+              <div class=" col-md-3 px-md-1">
+                <div class=" form-group">
+                  <label> Username </label>
+                  <input
+                    class=" form-control"
+                    placeholder="Username"
+                    type="text"
+                    value="michael23"
+                  />
+                </div>
+              </div>
+              <div class=" col-md-4 pl-md-1">
+                <div class=" form-group">
+                  <label for="exampleInputEmail1"> Email address </label>
+                  <input
+                    class=" form-control"
+                    placeholder="mike@email.com"
+                    type="email"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class=" row">
+              <div class=" col-md-6 pr-md-1">
+                <div class=" form-group">
+                  <label> First Name </label>
+                  <input
+                    class=" form-control"
+                    placeholder="Company"
+                    type="text"
+                    value="Mike"
+                  />
+                </div>
+              </div>
+              <div class=" col-md-6 pl-md-1">
+                <div class=" form-group">
+                  <label> Last Name </label>
+                  <input
+                    class=" form-control"
+                    placeholder="Last Name"
+                    type="text"
+                    value="Andrew"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class=" row">
+              <div class=" col-md-12">
+                <div class=" form-group">
+                  <label> Address </label>
+                  <input
+                    class=" form-control"
+                    placeholder="Home Address"
+                    type="text"
+                    value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class=" row">
+              <div class=" col-md-4 pr-md-1">
+                <div class=" form-group">
+                  <label> City </label>
+                  <input
+                    class=" form-control"
+                    placeholder="City"
+                    type="text"
+                    value="Mike"
+                  />
+                </div>
+              </div>
+              <div class=" col-md-4 px-md-1">
+                <div class=" form-group">
+                  <label> Country </label>
+                  <input
+                    class=" form-control"
+                    placeholder="Country"
+                    type="text"
+                    value="Andrew"
+                  />
+                </div>
+              </div>
+              <div class=" col-md-4 pl-md-1">
+                <div class=" form-group">
+                  <label> Postal Code </label>
+                  <input
+                    class=" form-control"
+                    placeholder="ZIP Code"
+                    type="number"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class=" row">
+              <div class=" col-md-8">
+                <div class=" form-group">
+                  <label> About Me </label>
+                  <textarea
+                    class=" form-control"
+                    cols="80"
+                    placeholder="Here can be your description"
+                    rows="4"
+                    value="Mike"
+                  >
+Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.
+</textarea
+                  >
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+        <div class=" card-footer">
+          <button class=" btn btn-fill btn-danger" type="submit">Save</button>
+        </div>
+      </div>
+    </div>
+    <div class=" col-md-4">
+      <div class=" card card-user">
+        <div class=" card-body">
+          <p class=" card-text"></p>
+          <div class=" author">
+            <div class=" block block-one"></div>
+            <div class=" block block-two"></div>
+            <div class=" block block-three"></div>
+            <div class=" block block-four"></div>
+            <a href="javascript:void(0)">
+              <img alt="..." class=" avatar" src="assets/img/emilyz.jpg" />
+
+              <h5 class=" title">Mike Andrew</h5>
+            </a>
+            <p class=" description">Ceo/Co-Founder</p>
+          </div>
+          <div class=" card-description">
+            Do not be scared of the truth because we need to restart the human
+            foundation in truth And I love you like Kanye loves Kanye I love
+            Rick Owens’€™ bed design but the back is...
+          </div>
+        </div>
+        <div class=" card-footer">
+          <div class=" button-container">
+            <button
+              class=" btn btn-icon btn-round btn-facebook"
+              href="javascript:void(0)"
+            >
+              <i class=" fab fa-facebook"> </i>
+            </button>
+            <button
+              class=" btn btn-icon btn-round btn-twitter"
+              href="javascript:void(0)"
+            >
+              <i class=" fab fa-twitter"> </i>
+            </button>
+            <button
+              class=" btn btn-icon btn-round btn-google"
+              href="javascript:void(0)"
+            >
+              <i class=" fab fa-google-plus"> </i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/user/user.component.ts

+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-user",
+  templateUrl: "user.component.html"
+})
+export class UserComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

src/assets/css/nucleo-icons.css

+/* --------------------------------
+
+Nucleo Outline Web Font - nucleoapp.com/
+License - nucleoapp.com/license/
+Created using IcoMoon - icomoon.io
+
+-------------------------------- */
+
+@font-face {
+  font-family: 'Nucleo';
+  src: url('../fonts/nucleo.eot');
+  src: url('../fonts/nucleo.eot') format('embedded-opentype'), url('../fonts/nucleo.woff2') format('woff2'), url('../fonts/nucleo.woff') format('woff'), url('../fonts/nucleo.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/*------------------------
+	base class definition
+-------------------------*/
+
+.tim-icons {
+  display: inline-block;
+  font: normal normal normal 1em/1 'Nucleo';
+  vertical-align: middle;
+  speak: none;
+  text-transform: none;
+  /* Better Font Rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.font-icon-detail {
+  text-align: center;
+  padding: 45px 0 30px;
+  border: 1px solid #e44cc4;
+  border-radius: .1875rem;
+  margin: 15px 0;
+  min-height: 168px;
+}
+
+.font-icon-detail i {
+  color: #FFFFFF;
+  font-size: 1.5em;
+}
+
+.font-icon-detail p {
+  color: #e44cc4 !important;
+  margin-top: 30px;
+  padding: 0 10px;
+  font-size: .7142em;
+}
+
+/*------------------------
+  change icon size
+-------------------------*/
+
+.tim-icons-sm {
+  font-size: 0.8em;
+}
+
+.tim-icons-lg {
+  font-size: 1.2em;
+}
+
+/* absolute units */
+
+.tim-icons-16 {
+  font-size: 16px;
+}
+
+.tim-icons-32 {
+  font-size: 32px;
+}
+
+/*----------------------------------
+  add a square/circle background
+-----------------------------------*/
+
+.tim-icons-bg-square,
+.tim-icons-bg-circle {
+  padding: 0.35em;
+}
+
+.tim-icons-bg-circle {
+  border-radius: 50%;
+}
+
+/*------------------------
+  list icons
+-------------------------*/
+
+/*------------------------
+  spinning icons
+-------------------------*/
+
+.tim-icons-is-spinning {
+  -webkit-animation: tim-icons-spin 2s infinite linear;
+  -moz-animation: tim-icons-spin 2s infinite linear;
+  animation: tim-icons-spin 2s infinite linear;
+}
+
+@-webkit-keyframes tim-icons-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes tim-icons-spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@keyframes tim-icons-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+/*------------------------
+  rotated/flipped icons
+-------------------------*/
+
+/*------------------------
+	icons
+-------------------------*/
+
+.icon-alert-circle-exc::before {
+  content: "\ea02";
+}
+
+.icon-align-center::before {
+  content: "\ea03";
+}
+
+.icon-align-left-2::before {
+  content: "\ea04";
+}
+
+.icon-app::before {
+  content: "\ea05";
+}
+
+.icon-atom::before {
+  content: "\ea06";
+}
+
+.icon-attach-87::before {
+  content: "\ea07";
+}
+
+.icon-badge::before {
+  content: "\ea08";
+}
+
+.icon-bag-16::before {
+  content: "\ea09";
+}
+
+.icon-bank::before {
+  content: "\ea0a";
+}
+
+.icon-basket-simple::before {
+  content: "\ea0b";
+}
+
+.icon-bell-55::before {
+  content: "\ea0c";
+}
+
+.icon-bold::before {
+  content: "\ea0d";
+}
+
+.icon-book-bookmark::before {
+  content: "\ea0e";
+}
+
+.icon-bulb-63::before {
+  content: "\ea0f";
+}
+
+.icon-bullet-list-67::before {
+  content: "\ea10";
+}
+
+.icon-bus-front-12::before {
+  content: "\ea11";
+}
+
+.icon-button-pause::before {
+  content: "\ea12";
+}
+
+.icon-button-power::before {
+  content: "\ea13";
+}
+
+.icon-calendar-60::before {
+  content: "\ea14";
+}
+
+.icon-camera-18::before {
+  content: "\ea15";
+}
+
+.icon-caps-small::before {
+  content: "\ea16";
+}
+
+.icon-cart::before {
+  content: "\ea17";
+}
+
+.icon-chart-bar-32::before {
+  content: "\ea18";
+}
+
+.icon-chart-pie-36::before {
+  content: "\ea19";
+}
+
+.icon-chat-33::before {
+  content: "\ea1a";
+}
+
+.icon-check-2::before {
+  content: "\ea1b";
+}
+
+.icon-cloud-download-93::before {
+  content: "\ea1c";
+}
+
+.icon-cloud-upload-94::before {
+  content: "\ea1d";
+}
+
+.icon-coins::before {
+  content: "\ea1e";
+}
+
+.icon-compass-05::before {
+  content: "\ea1f";
+}
+
+.icon-controller::before {
+  content: "\ea20";
+}
+
+.icon-credit-card::before {
+  content: "\ea21";
+}
+
+.icon-delivery-fast::before {
+  content: "\ea22";
+}
+
+.icon-double-left::before {
+  content: "\ea23";
+}
+
+.icon-double-right::before {
+  content: "\ea24";
+}
+
+.icon-email-85::before {
+  content: "\ea25";
+}
+
+.icon-gift-2::before {
+  content: "\ea26";
+}
+
+.icon-globe-2::before {
+  content: "\ea27";
+}
+
+.icon-headphones::before {
+  content: "\ea28";
+}
+
+.icon-heart-2::before {
+  content: "\ea29";
+}
+
+.icon-html5::before {
+  content: "\ea2a";
+}
+
+.icon-image-02::before {
+  content: "\ea2b";
+}
+
+.icon-istanbul::before {
+  content: "\ea2c";
+}
+
+.icon-key-25::before {
+  content: "\ea2d";
+}
+
+.icon-laptop::before {
+  content: "\ea2e";
+}
+
+.icon-light-3::before {
+  content: "\ea2f";
+}
+
+.icon-link-72::before {
+  content: "\ea30";
+}
+
+.icon-lock-circle::before {
+  content: "\ea31";
+}
+
+.icon-map-big::before {
+  content: "\ea32";
+}
+
+.icon-minimal-down::before {
+  content: "\ea33";
+}
+
+.icon-minimal-left::before {
+  content: "\ea34";
+}
+
+.icon-minimal-right::before {
+  content: "\ea35";
+}
+
+.icon-minimal-up::before {
+  content: "\ea36";
+}
+
+.icon-mobile::before {
+  content: "\ea37";
+}
+
+.icon-molecule-40::before {
+  content: "\ea38";
+}
+
+.icon-money-coins::before {
+  content: "\ea39";
+}
+
+.icon-notes::before {
+  content: "\ea3a";
+}
+
+.icon-palette::before {
+  content: "\ea3b";
+}
+
+.icon-paper::before {
+  content: "\ea3c";
+}
+
+.icon-pencil::before {
+  content: "\ea3d";
+}
+
+.icon-pin::before {
+  content: "\ea3e";
+}
+
+.icon-planet::before {
+  content: "\ea3f";
+}
+
+.icon-puzzle-10::before {
+  content: "\ea40";
+}
+
+.icon-satisfied::before {
+  content: "\ea41";
+}
+
+.icon-scissors::before {
+  content: "\ea42";
+}
+
+.icon-send::before {
+  content: "\ea43";
+}
+
+.icon-settings-gear-63::before {
+  content: "\ea44";
+}
+
+.icon-settings::before {
+  content: "\ea45";
+}
+
+.icon-simple-add::before {
+  content: "\ea46";
+}
+
+.icon-simple-delete::before {
+  content: "\ea47";
+}
+
+.icon-simple-remove::before {
+  content: "\ea48";
+}
+
+.icon-single-02::before {
+  content: "\ea49";
+}
+
+.icon-single-copy-04::before {
+  content: "\ea4a";
+}
+
+.icon-sound-wave::before {
+  content: "\ea4b";
+}
+
+.icon-spaceship::before {
+  content: "\ea4c";
+}
+
+.icon-square-pin::before {
+  content: "\ea4d";
+}
+
+.icon-support-17::before {
+  content: "\ea4e";
+}
+
+.icon-tablet-2::before {
+  content: "\ea4f";
+}
+
+.icon-tag::before {
+  content: "\ea50";
+}
+
+.icon-tap-02::before {
+  content: "\ea51";
+}
+
+.icon-tie-bow::before {
+  content: "\ea52";
+}
+
+.icon-time-alarm::before {
+  content: "\ea53";
+}
+
+.icon-trash-simple::before {
+  content: "\ea54";
+}
+
+.icon-triangle-right-17::before {
+  content: "\ea55";
+}
+
+.icon-trophy::before {
+  content: "\ea56";
+}
+
+.icon-tv-2::before {
+  content: "\ea57";
+}
+
+.icon-upload::before {
+  content: "\ea58";
+}
+
+.icon-user-run::before {
+  content: "\ea59";
+}
+
+.icon-vector::before {
+  content: "\ea5a";
+}
+
+.icon-video-66::before {
+  content: "\ea5b";
+}
+
+.icon-volume-98::before {
+  content: "\ea5c";
+}
+
+.icon-wallet-43::before {
+  content: "\ea5d";
+}
+
+.icon-watch-time::before {
+  content: "\ea5e";
+}
+
+.icon-wifi::before {
+  content: "\ea5f";
+}
+
+.icon-world::before {
+  content: "\ea60";
+}
+
+.icon-zoom-split::before {
+  content: "\ea61";
+}
+
+.icon-refresh-01::before {
+  content: "\ea62";
+}
+
+.icon-refresh-02::before {
+  content: "\ea63";
+}
+
+.icon-shape-star::before {
+  content: "\ea64";
+}
+
+.icon-components::before {
+  content: "\ea65";
+}

src/assets/demo/demo.css

+/*
+ =========================================================
+ * Black Dashboard Angular - v1.2.0
+ =========================================================
+
+ * Product Page: https://www.creative-tim.com/product/black-dashboard-angular
+ * Copyright 2020 Creative Tim (https://www.creative-tim.com)
+ * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md)
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+.tim-row {
+  margin-bottom: 20px;
+}
+
+.tim-white-buttons {
+  background-color: #777777;
+}
+
+.typography-line {
+  padding-left: 25%;
+  margin-bottom: 35px;
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.typography-line span {
+  bottom: 10px;
+  color: #c0c1c2;
+  display: block;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 13px;
+  left: 0;
+  position: absolute;
+  width: 260px;
+  text-transform: none;
+}
+
+.tim-row {
+  padding-top: 60px;
+}
+
+.tim-row h3 {
+  margin-top: 0;
+}
+
+.offline-doc .page-header {
+  display: flex;
+  align-items: center;
+}
+
+.offline-doc .footer {
+  position: absolute;
+  width: 100%;
+  background: transparent;
+  bottom: 0;
+  color: #fff;
+  z-index: 1;
+}
+
+@media all and (min-width: 992px) {
+  .sidebar .nav>li.active-pro {
+    position: absolute;
+    width: 100%;
+    bottom: 10px;
+  }
+}
+
+.card.card-upgrade .card-category {
+  max-width: 530px;
+  margin: 0 auto;
+}

src/assets/scss/black-dashboard.scss

+
+/*
+ =========================================================
+ * Black Dashboard Angular - v1.3.0
+ =========================================================
+
+ * Product Page: https://www.creative-tim.com/product/black-dashboard-angular
+ * Copyright 2020 Creative Tim (https://www.creative-tim.com)
+ * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md)
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+ // Core
+
+@import "black-dashboard/custom/functions";
+@import "black-dashboard/bootstrap/functions";
+
+@import "black-dashboard/custom/variables";
+@import "black-dashboard/bootstrap/variables";
+
+@import "black-dashboard/custom/mixins";
+@import "black-dashboard/bootstrap/mixins";
+
+ // Bootstrap components
+
+@import "black-dashboard/bootstrap/root";
+@import "black-dashboard/bootstrap/reboot";
+@import "black-dashboard/bootstrap/type";
+@import "black-dashboard/bootstrap/images";
+@import "black-dashboard/bootstrap/code";
+@import "black-dashboard/bootstrap/grid";
+@import "black-dashboard/bootstrap/tables";
+@import "black-dashboard/bootstrap/forms";
+@import "black-dashboard/bootstrap/buttons";
+@import "black-dashboard/bootstrap/transitions";
+@import "black-dashboard/bootstrap/dropdown";
+@import "black-dashboard/bootstrap/button-group";
+@import "black-dashboard/bootstrap/input-group";
+@import "black-dashboard/bootstrap/custom-forms";
+@import "black-dashboard/bootstrap/nav";
+@import "black-dashboard/bootstrap/navbar";
+@import "black-dashboard/bootstrap/card";
+@import "black-dashboard/bootstrap/breadcrumb";
+@import "black-dashboard/bootstrap/pagination";
+@import "black-dashboard/bootstrap/badge";
+@import "black-dashboard/bootstrap/jumbotron";
+@import "black-dashboard/bootstrap/alert";
+@import "black-dashboard/bootstrap/progress";
+@import "black-dashboard/bootstrap/media";
+@import "black-dashboard/bootstrap/list-group";
+@import "black-dashboard/bootstrap/close";
+@import "black-dashboard/bootstrap/modal";
+@import "black-dashboard/bootstrap/tooltip";
+@import "black-dashboard/bootstrap/popover";
+@import "black-dashboard/bootstrap/carousel";
+@import "black-dashboard/bootstrap/utilities";
+@import "black-dashboard/bootstrap/print";
+
+ // Custom components
+
+ @import "black-dashboard/custom/alerts.scss";
+ @import "black-dashboard/custom/buttons.scss";
+ @import "black-dashboard/custom/dropdown.scss";
+ @import "black-dashboard/custom/footer.scss";
+ @import "black-dashboard/custom/forms.scss";
+ @import "black-dashboard/custom/images.scss";
+ @import "black-dashboard/custom/modal.scss";
+ @import "black-dashboard/custom/navbar.scss";
+ @import "black-dashboard/custom/type.scss";
+ @import "black-dashboard/custom/tables";
+ @import "black-dashboard/custom/checkboxes-radio";
+ @import "black-dashboard/custom/fixed-plugin";
+ @import "black-dashboard/custom/sidebar-and-main-panel.scss";
+ @import "black-dashboard/custom/misc.scss";
+ @import "black-dashboard/custom/rtl.scss";
+ @import "black-dashboard/custom/input-group.scss";
+
+
+ // Vendor / Plugins
+
+@import "black-dashboard/custom/vendor/plugin-perfect-scrollbar.scss";
+@import "black-dashboard/custom/vendor/plugin-animate-bootstrap-notify.scss";
+
+// light mode
+
+@import "black-dashboard/custom/white-content.scss";
+
+// Cards
+
+@import 'black-dashboard/custom/card';
+@import "black-dashboard/custom/cards/card-chart";
+@import "black-dashboard/custom/cards/card-map";
+@import "black-dashboard/custom/cards/card-user";
+@import "black-dashboard/custom/cards/card-task";
+@import "black-dashboard/custom/cards/card-plain";
+
+// Angular Differences
+
+@import "black-dashboard/angular-differences/angular-differences"

src/assets/scss/black-dashboard/angular-differences/_angular-differences.scss

+@import "sidebar-and-main-panel";
+@import "charts";
+@import "rtl";
+@import "nucleo-icons";
+@import "./plugins/ngx-toastr";

src/assets/scss/black-dashboard/angular-differences/_card-user.scss

+.card-user {
+  .author {
+      .block {
+        &.block-one {
+          @include linear-gradient-right(rgba($danger,0.6), rgba($danger,0));
+        }
+
+        &.block-two {
+          @include linear-gradient-right(rgba($danger,0.6), rgba($danger,0));
+        }
+
+        &.block-three {
+          @include linear-gradient-right(rgba($danger,0.6), rgba($danger,0));
+        }
+
+        &.block-four {
+          @include linear-gradient-right(rgba($danger,0.6), rgba($danger,0));
+        }
+      }
+  }
+}

src/assets/scss/black-dashboard/angular-differences/_charts.scss

+.text-danger-states{
+  color: #ec250d;
+}

src/assets/scss/black-dashboard/angular-differences/_nucleo-icons.scss

+.font-icon-list .font-icon-detail{
+  border: 1px solid #fd5d93;
+  p{
+    color: #fd5d93 !important;
+  }
+}

src/assets/scss/black-dashboard/angular-differences/_rtl.scss

+.rtl .fixed-plugin {
+  border-radius: 0 8px 8px 0;
+  left: 0;
+  right: unset;
+  .dropdown-menu {
+      left: 80px!important;
+      right: auto!important;
+  }
+}
+.rtl .off-canvas-sidebar .nav li.active>a:not([data-toggle=collapse]):before, .rtl .sidebar .nav li.active>a:not([data-toggle=collapse]):before {
+    left: unset;
+    right: -4px;
+}

src/assets/scss/black-dashboard/angular-differences/_sidebar-and-main-panel.scss

+.main-panel {
+  &, &[data="red"]{
+    border-color: $danger;
+  }
+
+  .content {
+    padding: 78px 30px 30px 280px;
+    min-height: calc(100vh - 70px);
+  }
+}
+@media screen and (max-width: 768px){
+  .main-panel .content {
+      padding-left: 15px;
+      padding-right: 15px;
+  }
+}
+.logo-img{
+  width: 35px;
+  height: 35px;
+  display: block;
+  margin-left: 2px;
+  position: absolute;
+  top: 12px;
+    img{
+        width: 35px;
+    }
+}
+.sidebar, .off-canvas-sidebar{
+  &, &[data="red"]{
+    @include linear-gradient($danger-states, $danger);
+  }
+  &[data="primary"]{
+    @include linear-gradient($primary-states, $primary);
+  }
+}
+@media screen and (max-width: 991px){
+  .main-panel {
+      .content {
+      padding-left: 30px !important;
+    }
+  }
+  .fixed-plugin .dropdown-toggle:after{
+    display: none;
+  }
+}

src/assets/scss/black-dashboard/angular-differences/plugins/_ngx-toastr.scss

+
+.toast-container{
+  width: 100%;
+
+  .toast-close-button {
+    font-weight: 300;
+    text-shadow: none;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    margin-top: -14px;
+    width: 25px;
+    height: 25px;
+
+    &:focus{
+      outline: none;
+    }
+
+    &:hover{
+      opacity: 1;
+      color: $white;
+    }
+
+    & > span {
+      display: none;
+    }
+
+    &:before{
+      display: block;
+      display: inline-block;
+      font: normal normal normal 1em/1 'Nucleo';
+      font-size: inherit;
+      speak: none;
+      text-transform: none;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      font-size: 20px;
+      content: "\ea48";
+      font-weight: 300;
+    }
+  }
+
+  .alert{
+    z-index: 9999;
+    width: 33.3333%;
+    pointer-events: auto;
+
+    .toast-message {
+      max-width: 89%;
+    }
+
+    &.alert-with-icon{
+      .tim-icons{
+        position: absolute;
+        left: 24px;
+        top: 50%;
+        margin-top: -14px;
+        font-size: 24px;
+      }
+    }
+  }
+
+  .toast-error{
+    background-image: none;
+  }
+
+  .toast-success{
+    background-image: none;
+  }
+
+  .toast-info{
+    background-image: none;
+  }
+
+  .toast-warning{
+    background-image: none;
+  }
+}
+.toast-top-center, .toast-bottom-center{
+ .alert{
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+.toast-top-right, .toast-bottom-right{
+ .alert{
+    margin-left: auto;
+    margin-right: 0;
+  }
+}
+
+.toast-top-center{
+  top: 12px;
+}
+
+.toast-bottom-center{
+  bottom: 12px;
+}
+
+@media screen and (max-width: 767px) {
+  .toast-container .alert{
+    width: 91.6666%;
+  }
+}

src/assets/scss/black-dashboard/bootstrap/_alert.scss

+//
+// Base styles
+//
+
+.alert {
+  position: relative;
+  padding: $alert-padding-y $alert-padding-x;
+  margin-bottom: $alert-margin-bottom;
+  border: $alert-border-width solid transparent;
+  @include border-radius($alert-border-radius);
+}
+
+// Headings for larger alerts
+.alert-heading {
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
+
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+}
+
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissible {
+  padding-right: ($close-font-size + $alert-padding-x * 2);
+
+  // Adjust close link position
+  .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: $alert-padding-y $alert-padding-x;
+    color: inherit;
+  }
+}
+
+
+// Alternate styles
+//
+// Generate contextual modifier classes for colorizing the alert.
+
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+  }
+}

src/assets/scss/black-dashboard/bootstrap/_badge.scss

+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+
+.badge {
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  @include border-radius($badge-border-radius);
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+// Pill badges
+//
+// Make them extra rounded with a modifier to replace v3's badges.
+
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+  @include border-radius($badge-pill-border-radius);
+}
+
+// Colors
+//
+// Contextual variations (linked badges get darker on :hover).
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}

src/assets/scss/black-dashboard/bootstrap/_breadcrumb.scss

+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+  margin-bottom: $breadcrumb-margin-bottom;
+  list-style: none;
+  background-color: $breadcrumb-bg;
+  @include border-radius($breadcrumb-border-radius);
+}
+
+.breadcrumb-item {
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
+  + .breadcrumb-item {
+    padding-left: $breadcrumb-item-padding;
+
+    &::before {
+      display: inline-block; // Suppress underlining of the separator in modern browsers
+      padding-right: $breadcrumb-item-padding;
+      color: $breadcrumb-divider-color;
+      content: $breadcrumb-divider;
+    }
+  }
+
+  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
+  // without `<ul>`s. The `::before` pseudo-element generates an element
+  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
+  //
+  // To trick IE into suppressing the underline, we give the pseudo-element an
+  // underline and then immediately remove it.
+  + .breadcrumb-item:hover::before {
+    text-decoration: underline;
+  }
+  // stylelint-disable-next-line no-duplicate-selectors
+  + .breadcrumb-item:hover::before {
+    text-decoration: none;
+  }
+
+  &.active {
+    color: $breadcrumb-active-color;
+  }
+}

src/assets/scss/black-dashboard/bootstrap/_button-group.scss

+// stylelint-disable selector-no-qualifying-type
+
+// Make the div behave like a button
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle; // match .btn alignment given font-size hack above
+
+  > .btn {
+    position: relative;
+    flex: 0 1 auto;
+
+    // Bring the hover, focused, and "active" buttons to the front to overlay
+    // the borders properly
+    @include hover {
+      z-index: 1;
+    }
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 1;
+    }
+  }
+
+  // Prevent double borders when buttons are next to each other
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-left: -$btn-border-width;
+  }
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .input-group {
+    width: auto;
+  }
+}
+
+.btn-group {
+  > .btn:first-child {
+    margin-left: 0;
+  }
+
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-right-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-left-radius(0);
+  }
+}
+
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-sm > .btn { @extend .btn-sm; }
+.btn-group-lg > .btn { @extend .btn-lg; }
+
+
+//
+// Split button dropdowns
+//
+
+.dropdown-toggle-split {
+  padding-right: $btn-padding-x * .75;
+  padding-left: $btn-padding-x * .75;
+
+  &::after,
+  .dropup &::after,
+  .dropright &::after {
+    margin-left: 0;
+  }
+
+  .dropleft &::before {
+    margin-right: 0;
+  }
+}
+
+.btn-sm + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-sm * .75;
+  padding-left: $btn-padding-x-sm * .75;
+}
+
+.btn-lg + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-lg * .75;
+  padding-left: $btn-padding-x-lg * .75;
+}
+
+
+// The clickable button for toggling the menu
+// Set the same inset shadow as the :active state
+.btn-group.show .dropdown-toggle {
+  @include box-shadow($btn-active-box-shadow);
+
+  // Show no shadow for `.btn-link` since it has no other button styles.
+  &.btn-link {
+    @include box-shadow(none);
+  }
+}
+
+
+//
+// Vertical button groups
+//
+
+.btn-group-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  .btn,
+  .btn-group {
+    width: 100%;
+  }
+
+  > .btn + .btn,
+  > .btn + .btn-group,
+  > .btn-group + .btn,
+  > .btn-group + .btn-group {
+    margin-top: -$btn-border-width;
+    margin-left: 0;
+  }
+
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-bottom-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-top-radius(0);
+  }
+}
+
+
+// Checkbox and radio options
+//
+// In order to support the browser's form validation feedback, powered by the
+// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
+// `display: none;` or `visibility: hidden;` as that also hides the popover.
+// Simply visually hiding the inputs via `opacity` would leave them clickable in
+// certain cases which is prevented by using `clip` and `pointer-events`.
+// This way, we ensure a DOM element is visible to position the popover from.
+//
+// See https://github.com/twbs/bootstrap/pull/12794 and
+// https://github.com/twbs/bootstrap/pull/14559 for more information.
+
+.btn-group-toggle {
+  > .btn,
+  > .btn-group > .btn {
+    margin-bottom: 0; // Override default `<label>` value
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+      pointer-events: none;
+    }
+  }
+}