Angular 5 compatibility (wip)

+ Fuse2 version: 1.2.0

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -272,14 +272,6 @@
       "resolved": "https://registry.npmjs.org/@swimlane/ngx-datatable/-/ngx-datatable-10.4.0.tgz",
       "integrity": "sha512-wTV/64vEGPFlcpE+ezTN18baOsNXyfLLvdmhEoaDQt2OJtTKtNxJkze24w71utoJxutQRrfHJUVSkAF4CLNckA=="
     },
-    "@swimlane/ngx-dnd": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@swimlane/ngx-dnd/-/ngx-dnd-3.0.0.tgz",
-      "integrity": "sha512-LH/Nc6/2tyX7U9SHa5hNvC2Sk/svj/PMrJu34V/BF/H811fik5AGzTjORdGQo7cl2m951MEkl9yijMKywRw37w==",
-      "requires": {
-        "dragula": "3.7.2"
-      }
-    },
     "@types/jasmine": {
       "version": "2.5.54",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.54.tgz",
@@ -313,6 +305,14 @@
       "integrity": "sha1-dMt3+2BS7a/yqJhN2v2I1BnyXKw=",
       "dev": true
     },
+    "@withinpixels/ngx-dnd": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@withinpixels/ngx-dnd/-/ngx-dnd-3.1.0.tgz",
+      "integrity": "sha512-xdKp0T/JuETNVRWgRxbcx+pD6THX8OBw50wpsfi7AeK/wmvXEI1U28quh1a30T298QA7i5sofbTByUGm/XIfLg==",
+      "requires": {
+        "dragula": "3.7.2"
+      }
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "license": "",
   "scripts": {
     "ng": "ng",
@@ -31,7 +31,7 @@
     "@ngx-translate/core": "8.0.0",
     "@swimlane/ngx-charts": "6.1.0",
     "@swimlane/ngx-datatable": "10.4.0",
-    "@swimlane/ngx-dnd": "3.0.0",
+    "@withinpixels/ngx-dnd": "3.1.0",
     "angular-calendar": "0.21.3",
     "angular-in-memory-web-api": "0.5.1",
     "angular2-markdown": "1.6.0",

src/app/core/modules/shared.module.ts

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
 import { MaterialModule } from './material.module';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ColorPickerModule } from 'ngx-color-picker';
-import { NgxDnDModule } from '@swimlane/ngx-dnd';
+import { NgxDnDModule } from '@withinpixels/ngx-dnd';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
 import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive';

src/app/main/content/apps/dashboards/project/project.component.html

@@ -566,7 +566,7 @@
                                             <tbody>
                                                 <tr *ngFor="let row of widgets.widget10.table.rows">
                                                     <td *ngFor="let cell of row">
-                                                        <span class="p-4" [class]="cell.classes">
+                                                        <span class="p-4" [ngClass]="cell.classes">
                                                             {{cell.value}}
                                                         </span>
                                                         <mat-icon *ngIf="cell.icon" class="s-16">{{cell.icon}}</mat-icon>

src/app/main/content/apps/e-commerce/order/order.component.html

@@ -359,13 +359,13 @@
                                                             </div>
                                                         </td>
                                                         <td class="text-right">
-                                                            {{product.price | currency:'USD':true}}
+                                                            {{product.price | currency:'USD':'symbol'}}
                                                         </td>
                                                         <td class="text-right">
                                                             {{product.quantity}}
                                                         </td>
                                                         <td class="text-right">
-                                                            {{product.total | currency:'USD':true}}
+                                                            {{product.total | currency:'USD':'symbol'}}
                                                         </td>
                                                     </tr>
                                                 </tbody>
@@ -375,19 +375,19 @@
                                                 <tbody>
                                                     <tr class="subtotal">
                                                         <td>SUBTOTAL</td>
-                                                        <td>{{order.subtotal | currency:'USD':true}}</td>
+                                                        <td>{{order.subtotal | currency:'USD':'symbol'}}</td>
                                                     </tr>
                                                     <tr class="tax">
                                                         <td>TAX</td>
-                                                        <td>{{order.tax | currency:'USD':true}}</td>
+                                                        <td>{{order.tax | currency:'USD':'symbol'}}</td>
                                                     </tr>
                                                     <tr class="discount">
                                                         <td>DISCOUNT</td>
-                                                        <td>-{{order.discount | currency:'USD':true}}</td>
+                                                        <td>-{{order.discount | currency:'USD':'symbol'}}</td>
                                                     </tr>
                                                     <tr class="total">
                                                         <td>TOTAL</td>
-                                                        <td>{{order.total | currency:'USD':true}}</td>
+                                                        <td>{{order.total | currency:'USD':'symbol'}}</td>
                                                     </tr>
                                                 </tbody>
                                             </table>

src/app/main/content/apps/e-commerce/orders/orders.component.html

@@ -75,7 +75,7 @@
                     <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
                     <mat-cell *cdkCellDef="let order" fxHide fxShow.gt-md>
                         <p class="total-price text-truncate">
-                            {{order.total | currency:'USD':true}}
+                            {{order.total | currency:'USD':'symbol'}}
                         </p>
                     </mat-cell>
                 </ng-container>

src/app/main/content/apps/e-commerce/products/products.component.html

@@ -92,7 +92,7 @@
                     <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Price</mat-header-cell>
                     <mat-cell *cdkCellDef="let product" fxHide fxShow.gt-xs>
                         <p class="price text-truncate">
-                            {{product.priceTaxIncl | currency:'USD':true}}
+                            {{product.priceTaxIncl | currency:'USD':'symbol'}}
                         </p>
                     </mat-cell>
                 </ng-container>

src/app/main/content/apps/file-manager/file-list/file-list.component.html

@@ -4,7 +4,7 @@
     <ng-container cdkColumnDef="icon">
         <mat-header-cell *cdkHeaderCellDef fxFlex="64px"></mat-header-cell>
         <mat-cell *cdkCellDef="let row" fxFlex="64px">
-            <mat-icon class="type-icon" [class]="row.type"></mat-icon>
+            <mat-icon class="type-icon" [ngClass]="row.type"></mat-icon>
         </mat-cell>
     </ng-container>
 

src/app/main/content/apps/file-manager/sidenavs/details/details.component.html

@@ -33,7 +33,7 @@
          *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">
 
         <div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center">
-            <mat-icon class="type-icon s-48" [class]="selected.type"></mat-icon>
+            <mat-icon class="type-icon s-48" [ngClass]="selected.type"></mat-icon>
         </div>
 
         <div class="offline-switch">

src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html

@@ -1,6 +1,6 @@
 <!-- SIDENAV HEADER -->
 <div fxLayout="column" fxLayoutAlign="space-between start"
-     class="header p-24 pb-4 mat-accent-bg" class.gt-md="header p-24 pb-4 white-fg">
+     class="header p-24 pb-4" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
 
     <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
         <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</mat-icon>

src/app/main/content/apps/scrumboard/board/board.component.html

@@ -3,14 +3,14 @@
     <div id="board">
 
         <!-- HEADER -->
-        <div class="header mat-accent-bg p-16 p-mat-24" [class]="'mat-'+board.settings.color+'-bg'" fxLayout="column">
+        <div class="header mat-accent-bg p-16 p-mat-24" [ngClass]="'mat-'+board.settings.color+'-bg'" fxLayout="column">
 
             <div class="header-content" fxLayout="row" fxLayoutAlign="space-between" fxFlex="1 0 auto" fxLayoutWrap>
 
                 <!-- BOARD SELECTION BUTTON -->
                 <div fxLayout="row" fxLayoutAlign="center center" fxFlexOrder="2" fxFlexOrder.gt-xs="1">
                     <button mat-raised-button class="mat-accent header-boards-button"
-                            [class]="'mat-'+board.settings.color+'-700-bg'"
+                            [ngClass]="'mat-'+board.settings.color+'-700-bg'"
                             routerLink="/apps/scrumboard/boards"
                             aria-label="boards button">
                         <mat-icon>assessment</mat-icon>
@@ -50,7 +50,7 @@
         </div>
         <!-- / HEADER -->
 
-        <div fxFlex class="board-content-wrapper p-16 p-mat-24" [class]="board.settings.color+'-100-bg'">
+        <div fxFlex class="board-content-wrapper p-16 p-mat-24" [ngClass]="board.settings.color+'-100-bg'">
 
             <!-- BOARD -->
             <div class="board-content ngx-dnd-container p-16 p-mat-24" fxLayout="row"

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html

@@ -194,7 +194,7 @@
                         <mat-chip-list class="label-chips">
                             <mat-chip class="label-chip mb-4"
                                       *ngFor="let labelId of card.idLabels"
-                                      [class]="board.labels | getById:labelId:'color'"
+                                      [ngClass]="board.labels | getById:labelId:'color'"
                                       fxLayout="row" fxLayoutAlign="start center">
                                 <span>{{board.labels|getById:labelId:'name'}}</span>
                                 <mat-icon class="ml-8 s-16 chip-remove" (click)="toggleInArray(labelId, card.idLabels);updateCard()">close</mat-icon>

src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html

@@ -13,7 +13,7 @@
         <div fxFlex fxLayout="column" fusePerfectScrollbar>
 
             <div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center"
-                 [class]="label.color">
+                 [ngClass]="label.color">
 
                 <mat-checkbox fxFlex fxLayout="row" fxLayoutAlign="start center" [checked]="card.idLabels.indexOf(label.id) > -1"
                               (change)="toggleInArray(label.id, card.idLabels);cardLabelsChanged()">

src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html

@@ -3,7 +3,7 @@
     <div class="view" *ngSwitchCase="'main'" [@slideInLeft]>
 
         <!-- SIDENAV HEADER -->
-        <div class="header mat-accent-bg px-24" [class]="'mat-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
+        <div class="header mat-accent-bg px-24" [ngClass]="'mat-'+board.settings.color+'-bg'" fxLayout="column" fxLayoutAlign="center center">
             <div>Settings</div>
         </div>
         <!-- / SIDENAV HEADER -->
@@ -58,7 +58,7 @@
     <div class="view" *ngSwitchCase="'board-color'" [@slideInRight]>
 
         <!-- SIDENAV HEADER -->
-        <div class="header mat-accent-bg px-24" [class]="'mat-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center">
+        <div class="header mat-accent-bg px-24" [ngClass]="'mat-'+board.settings.color+'-bg'" fxLayout="row" fxLayoutAlign="space-between center">
             <div>Background Color</div>
             <button mat-icon-button (click)="view ='main'">
                 <mat-icon class="s-16">arrow_back</mat-icon>

src/app/main/content/pages/invoices/compact/compact.component.html

@@ -67,13 +67,13 @@
                                 {{service.unit}}
                             </td>
                             <td class="text-right">
-                                {{service.unitPrice | currency:'USD':true}}
+                                {{service.unitPrice | currency:'USD':'symbol'}}
                             </td>
                             <td class="text-right">
                                 {{service.quantity}}
                             </td>
                             <td class="text-right">
-                                {{service.total | currency:'USD':true}}
+                                {{service.total | currency:'USD':'symbol'}}
                             </td>
                         </tr>
                         <!-- Double the invoice data for demo purposes -->
@@ -87,13 +87,13 @@
                                 {{service.unit}}
                             </td>
                             <td class="text-right">
-                                {{service.unitPrice | currency:'USD':true}}
+                                {{service.unitPrice | currency:'USD':'symbol'}}
                             </td>
                             <td class="text-right">
                                 {{service.quantity}}
                             </td>
                             <td class="text-right">
-                                {{service.total | currency:'USD':true}}
+                                {{service.total | currency:'USD':'symbol'}}
                             </td>
                         </tr>
                     </tbody>
@@ -103,19 +103,19 @@
                     <tbody>
                         <tr class="subtotal">
                             <td>SUBTOTAL</td>
-                            <td>{{invoice.subtotal | currency:'USD':true}}</td>
+                            <td>{{invoice.subtotal | currency:'USD':'symbol'}}</td>
                         </tr>
                         <tr class="tax">
                             <td>TAX</td>
-                            <td>{{invoice.tax | currency:'USD':true}}</td>
+                            <td>{{invoice.tax | currency:'USD':'symbol'}}</td>
                         </tr>
                         <tr class="discount">
                             <td>DISCOUNT</td>
-                            <td>-{{invoice.discount | currency:'USD':true}}</td>
+                            <td>-{{invoice.discount | currency:'USD':'symbol'}}</td>
                         </tr>
                         <tr class="total">
                             <td>TOTAL</td>
-                            <td>{{invoice.total | currency:'USD':true}}</td>
+                            <td>{{invoice.total | currency:'USD':'symbol'}}</td>
                         </tr>
                     </tbody>
                 </table>

src/app/main/content/pages/invoices/modern/modern.component.html

@@ -83,7 +83,7 @@
 
                     <tr>
                         <td class="label">TOTAL DUE</td>
-                        <td class="value">{{invoice.total | currency:'USD':true}}</td>
+                        <td class="value">{{invoice.total | currency:'USD':'symbol'}}</td>
                     </tr>
                 </table>
             </div>
@@ -109,13 +109,13 @@
                                 {{service.unit}}
                             </td>
                             <td class="text-right">
-                                {{service.unitPrice | currency:'USD':true}}
+                                {{service.unitPrice | currency:'USD':'symbol'}}
                             </td>
                             <td class="text-right">
                                 {{service.quantity}}
                             </td>
                             <td class="text-right">
-                                {{service.total | currency:'USD':true}}
+                                {{service.total | currency:'USD':'symbol'}}
                             </td>
                         </tr>
                     </tbody>
@@ -125,19 +125,19 @@
                     <tbody>
                         <tr class="subtotal">
                             <td>SUBTOTAL</td>
-                            <td>{{invoice.subtotal | currency:'USD':true}}</td>
+                            <td>{{invoice.subtotal | currency:'USD':'symbol'}}</td>
                         </tr>
                         <tr class="tax">
                             <td>TAX</td>
-                            <td>{{invoice.tax | currency:'USD':true}}</td>
+                            <td>{{invoice.tax | currency:'USD':'symbol'}}</td>
                         </tr>
                         <tr class="discount">
                             <td>DISCOUNT</td>
-                            <td>-{{invoice.discount | currency:'USD':true}}</td>
+                            <td>-{{invoice.discount | currency:'USD':'symbol'}}</td>
                         </tr>
                         <tr class="total">
                             <td>TOTAL</td>
-                            <td>{{invoice.total | currency:'USD':true}}</td>
+                            <td>{{invoice.total | currency:'USD':'symbol'}}</td>
                         </tr>
                     </tbody>
                 </table>

src/app/main/content/pages/search/tabs/table/table.component.html

@@ -26,7 +26,7 @@
         <!-- Color Column -->
         <ng-container cdkColumnDef="salary">
             <mat-header-cell *cdkHeaderCellDef>Salary</mat-header-cell>
-            <mat-cell *cdkCellDef="let row"> {{row.salary | currency:'USD':true}}</mat-cell>
+            <mat-cell *cdkCellDef="let row"> {{row.salary | currency:'USD':'symbol'}}</mat-cell>
         </ng-container>
 
         <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>

src/app/main/content/services/config/config.component.html

@@ -45,15 +45,16 @@
                                 // Fully customizable surroundings for this particular component
                                 this.fuseConfig.setSettings({
                                     layout          : {
-                                        navigation: 'left',      // 'right', 'left', 'top', none
+                                        navigation      : 'left',       // 'right', 'left', 'top', none
+                                        navigationFolded: false,        // true, false
                                         toolbar         : 'below',      // 'above', 'below', none
                                         footer          : 'none'        // 'above', 'below', none
                                         mode            : 'fullwidth'   // 'boxed', 'fullwidth'
                                     },
                                     colorClasses    : {
                                         toolbar: 'mat-white-500-bg',
-                                        navbar : 'mat-fuse-dark-500-bg',
+                                        navbar : 'mat-fuse-dark-700-bg',
-                                        footer : 'mat-fuse-dark-700-bg'
+                                        footer : 'mat-fuse-dark-900-bg'
                                     },
                                     customScrollbars: true,
                                     routerAnimation : 'fadeIn'

src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html

@@ -11,7 +11,7 @@
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
+            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html

@@ -11,7 +11,7 @@
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
+            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html

@@ -11,7 +11,7 @@
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
+            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html

@@ -11,7 +11,7 @@
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
+            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html

@@ -130,7 +130,7 @@
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
+            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html

@@ -49,7 +49,7 @@
                      fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
+            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html

@@ -130,7 +130,7 @@
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
+            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html

@@ -49,7 +49,7 @@
                      fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->
-            <div class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
+            <div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
                 <h2>Sidenav header</h2>
             </div>
             <!-- / SIDENAV HEADER -->

src/app/main/main.component.html

@@ -4,13 +4,13 @@
 
         <!-- TOOLBAR: Above -->
         <ng-container *ngIf="fuseSettings.layout.toolbar === 'above'">
-            <fuse-toolbar class="above" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
+            <fuse-toolbar class="above" [ngClass]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
         </ng-container>
         <!-- / TOOLBAR: Above -->
 
         <!-- NAVBAR: Top -->
         <fuse-navbar-horizontal class="top-navbar" fxHide fxShow.gt-md
-                                [class]="fuseSettings.colorClasses.navbar"
+                                [ngClass]="fuseSettings.colorClasses.navbar"
                                 *ngIf="fuseSettings.layout.navigation === 'top'">
         </fuse-navbar-horizontal>
         <!-- / NAVBAR: Top -->
@@ -20,7 +20,7 @@
             <!-- NAVBAR: Left -->
             <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
                                   class="left-navbar"
-                                  [class]="fuseSettings.colorClasses.navbar"
+                                  [ngClass]="fuseSettings.colorClasses.navbar"
                                   *ngIf="fuseSettings.layout.navigation === 'left' || fuseSettings.layout.navigation === 'top'">
             </fuse-navbar-vertical>
             <!-- / NAVBAR: Left -->
@@ -29,7 +29,7 @@
 
                 <!-- TOOLBAR: Below -->
                 <ng-container *ngIf="fuseSettings.layout.toolbar === 'below'">
-                    <fuse-toolbar class="below" [class]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
+                    <fuse-toolbar class="below" [ngClass]="fuseSettings.colorClasses.toolbar"></fuse-toolbar>
                 </ng-container>
                 <!-- / TOOLBAR: Below -->
 
@@ -37,7 +37,7 @@
 
                 <!-- FOOTER: Below -->
                 <ng-container *ngIf="fuseSettings.layout.footer === 'below'">
-                    <fuse-footer class="below" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
+                    <fuse-footer class="below" [ngClass]="fuseSettings.colorClasses.footer"></fuse-footer>
                 </ng-container>
                 <!-- / FOOTER: Below -->
 
@@ -46,7 +46,7 @@
             <!-- NAVBAR: Right -->
             <fuse-navbar-vertical [folded]="fuseSettings.layout.navigationFolded"
                                   class="right-navbar"
-                                  [class]="fuseSettings.colorClasses.navbar"
+                                  [ngClass]="fuseSettings.colorClasses.navbar"
                                   *ngIf="fuseSettings.layout.navigation === 'right'">
             </fuse-navbar-vertical>
             <!-- / NAVBAR: Right -->
@@ -55,7 +55,7 @@
 
         <!-- FOOTER: Above -->
         <ng-container *ngIf="fuseSettings.layout.footer === 'above'">
-            <fuse-footer class="above" [class]="fuseSettings.colorClasses.footer"></fuse-footer>
+            <fuse-footer class="above" [ngClass]="fuseSettings.colorClasses.footer"></fuse-footer>
         </ng-container>
         <!-- FOOTER: Above -->