v1.0.0

Author: mrholek

Angular4_CLI_Full_Project/.angular-cli.json

@@ -2,7 +2,7 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
     "version": "1.0.0",
-    "name": "coreui-angular"
+    "name": "@coreui/angular"
   },
   "apps": [
     {

Angular4_CLI_Full_Project/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "coreui-angular",
+  "name": "@coreui/angular",
   "version": "1.0.0",
-  "description": "Open Source Bootstrap Admin Template",
+  "description": "",
   "author": "",
   "url": "http://coreui.io",
   "copyright": "Copyright 2017 creativeLabs Łukasz Holeczek",

Angular4_CLI_Full_Project/src/app/app.module.ts

@@ -24,7 +24,8 @@ import {
   AppSidebar,
   AppSidebarFooter,
   AppSidebarForm,
-  AppSidebarHeader
+  AppSidebarHeader,
+  AppSidebarMinimizer
 } from './components';
 
 const APP_COMPONENTS = [
@@ -35,7 +36,8 @@ const APP_COMPONENTS = [
   AppSidebar,
   AppSidebarFooter,
   AppSidebarForm,
-  AppSidebarHeader
+  AppSidebarHeader,
+  AppSidebarMinimizer
 ]
 
 // Import directives

Angular4_CLI_Full_Project/src/app/components/app-header/app-header.component.html

@@ -1,7 +1,7 @@
 <header class="app-header navbar">
   <button class="navbar-toggler d-lg-none" type="button" appMobileSidebarToggler>&#9776;</button>
   <a class="navbar-brand" href="#"></a>
-  <button class="navbar-toggler d-md-down-none" type="button" appSidebarMinimizer>&#9776;</button>
+  <button class="navbar-toggler d-md-down-none" type="button" appSidebarToggler>&#9776;</button>
   <ul class="nav navbar-nav d-md-down-none">
     <li class="nav-item px-3">
       <a class="nav-link" href="#">Dashboard</a>

Angular4_CLI_Full_Project/src/app/components/app-sidebar-minimizer/app-sidebar-minimizer.component.html

@@ -0,0 +1 @@
+<button class="sidebar-minimizer" type="button" appSidebarMinimizer appBrandMinimizer></button>

Angular4_CLI_Full_Project/src/app/components/app-sidebar-minimizer/app-sidebar-minimizer.component.ts

@@ -0,0 +1,22 @@
+import { Component, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar-minimizer',
+  templateUrl: './app-sidebar-minimizer.component.html'
+})
+export class AppSidebarMinimizer {
+
+  constructor(private el: ElementRef) { }
+
+  //wait for the component to render completely
+  ngOnInit(): void {
+    var nativeElement: HTMLElement = this.el.nativeElement,
+    parentElement: HTMLElement = nativeElement.parentElement;
+    // move all children out of the element
+    while (nativeElement.firstChild) {
+      parentElement.insertBefore(nativeElement.firstChild, nativeElement);
+    }
+    // remove the empty element(the host)
+    parentElement.removeChild(nativeElement);
+  }
+}

Angular4_CLI_Full_Project/src/app/components/app-sidebar-minimizer/index.ts

@@ -0,0 +1 @@
+export * from './app-sidebar-minimizer.component';

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

@@ -77,7 +77,14 @@
           </li>
         </ul>
       </li>
+      <li class="nav-item mt-auto">
+        <a class="nav-link nav-link-success" href="http://coreui.io/angular/"><i class="icon-cloud-download"></i> Download CoreUI</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link nav-link-danger" href="http://coreui.io/pro/angular/"><i class="icon-layers"></i> Try CoreUI <strong>PRO</strong></a>
+      </li>
     </ul>
   </nav>
   <app-sidebar-footer></app-sidebar-footer>
+  <app-sidebar-minimizer></app-sidebar-minimizer>
 </div>

Angular4_CLI_Full_Project/src/app/components/index.ts

@@ -6,3 +6,4 @@ export * from './app-sidebar';
 export * from './app-sidebar-footer';
 export * from './app-sidebar-form';
 export * from './app-sidebar-header';
+export * from './app-sidebar-minimizer';

Angular4_CLI_Full_Project/src/app/directives/sidebar/sidebar.directive.ts

@@ -29,6 +29,19 @@ export class SidebarMinimizeDirective {
   }
 }
 
+@Directive({
+  selector: '[appBrandMinimizer]'
+})
+export class BrandMinimizeDirective {
+  constructor() { }
+
+  @HostListener('click', ['$event'])
+  toggleOpen($event: any) {
+    $event.preventDefault();
+    document.querySelector('body').classList.toggle('brand-minimized');
+  }
+}
+
 @Directive({
   selector: '[appMobileSidebarToggler]'
 })
@@ -87,6 +100,7 @@ export class SidebarOffCanvasCloseDirective {
 export const SIDEBAR_TOGGLE_DIRECTIVES = [
     SidebarToggleDirective,
     SidebarMinimizeDirective,
+    BrandMinimizeDirective,
     SidebarOffCanvasCloseDirective,
     MobileSidebarToggleDirective
 ];