1. Download the latest Theme source from ThemeForest.
2. Download and install Node.js from nodejs.org/en/download/
3. Start command prompt window or terminal and change directory to [root]/tools/

   cd theme/angular/tools

   cd theme/default/tools

4. Install the latest version of npm.

   npm install --global npm@latest

5. Install the latest version of yarn.

   npm install --global yarn

6. Install gulp.

   npm install --global gulp-cli

7. Install yarn dependencies. Must execute in [root]/tools/ folder.

   yarn install

8. Compile scss and javascript using gulp. You need to run this command everytime scripts under [root]/src has been changed. This command must execute in the [root]/tools folder.

   gulp --prod

9. Run Angular application

   cd [root]/dist/demo/[demo_id]

   npm install

   ng serve

10. Default static HTML location

    cd [root]/dist/demo/[demo_id]

This section guides you to install all required software and libraries in order to fully utilize Metronic for your projects.

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js is required in order to run the Metronic build tools. Download the latest version of Node and install it: nodejs.org/en/download/

Npm is the package manager for JavaScript and the world’s largest software registry. Npm is a separate project from Node.js, and tends to update more frequently. As a result, even if you’ve just downloaded Node.js (and therefore npm), you’ll probably need to update your npm.

npm install --global npm@latest

Verify that npm in successfully installed, and version of installed npm will appear.

npm --version

Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.

npm install --global yarn

Verify that yarn in successfully installed, and version of installed yarn will appear.

yarn --version

Here is just a way to install yarn, using npm package manager. Alternatively, you can install yarn using other methods as stated in yarn installation site. More information on yarn installation, please check the documentation: https://yarnpkg.com/lang/en/docs/install/

Please don't forget to run yarn install after every Metronic updates released in order to install newly added or updated 3rd-party plugins.

Gulp is a toolkit that helps you automate your time-consuming tasks in development workflow. To install gulp globally.

npm install --global gulp-cli

If you have previously installed a version of gulp globally, please remove it to make sure old version doesn't collide with new gulp-cli.

npm rm --global gulp

Verify that gulp in successfully installed, and version of installed gulp will appear.

gulp --version

Git is a distributed version control system designed to handle projects. Download and install Git from https://git-scm.com/.

Verify that Git in successfully installed, and version of installed Git will appear.

git --version

Since Metronic v5.0.6, we are using Yarn and no longer use Bower as package dependencies. Please install the latest version Yarn for global install.

npm install --global yarn

Inside the [root]/tools/ directory, remove the old bower_components folder. Run yarn install command to install dependencies using yarn.

yarn install

npm install -g @angular/cli@latest

Metronic build tools provides easy package management and production deployment for any type of web application that also comes with powerful asset bundle tools to organize assets structure with custom bundling for production.

Metronic's central default.json and angular.json build config files allows you manage the entire assest bundling for production by taking advantage of yarn package manager.

The build config file is located at [root]/tools/conf/[version_package].json and you can fully customize the build settings to meet your project requirements:

Please make sure the dist output path config.dist is set to true in default.json and angular.json, for the build tools to output the compilation.

{
    "config": {
        "demo": "",
        "debug": false,
        "compile": {
            "jsUglify": false,
            "cssMinify": false,
            "jsSourcemaps": false,
            "cssSourcemaps": false
        },
        "path": {
            "src": "./../theme/[root]/src",
            "node_modules": "./node_modules",
            "demo_api_url": "https://keenthemes.com/metronic/preview/"
        },
        "dist": [
            "./../theme/dist/preview/assets",
            "./../theme/dist/default/**/assets"
        ]
    },
    "build": {
        "vendors": {
            "base": {
                "src": {
                    "mandatory": {
                        "jquery": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery/dist/jquery.js"
                            ]
                        },
                        "bootstrap": {
                            "scripts": [
                                "{$config.path.node_modules}/popper.js/dist/umd/popper.js",
                                "{$config.path.node_modules}/bootstrap/dist/js/bootstrap.min.js"
                            ]
                        },
                        "js-cookie": {
                            "scripts": [
                                "{$config.path.node_modules}/js-cookie/src/js.cookie.js"
                            ]
                        },
                        "jquery-smooth-scroll": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery-smooth-scroll/jquery.smooth-scroll.js"
                            ]
                        },
                        "moment": {
                            "scripts": [
                                "{$config.path.node_modules}/moment/min/moment.min.js"
                            ]
                        },
                        "wNumb": {
                            "scripts": [
                                "{$config.path.node_modules}/wnumb/wNumb.js"
                            ]
                        }
                    },
                    "optional": {
                        "jquery.repeater": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery.repeater/src/intro.js",
                                "{$config.path.node_modules}/jquery.repeater/src/lib.js",
                                "{$config.path.node_modules}/jquery.repeater/src/jquery.input.js",
                                "{$config.path.node_modules}/jquery.repeater/src/repeater.js",
                                "{$config.path.node_modules}/jquery.repeater/src/outro.js"
                            ]
                        },
                        "jquery-form": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery-form/dist/jquery.form.min.js"
                            ]
                        },
                        "tether": {
                            "styles": [
                                "{$config.path.node_modules}/tether/dist/css/tether.css"
                            ],
                            "scripts": []
                        },
                        "malihu-custom-scrollbar-plugin": {
                            "styles": [
                                "{$config.path.node_modules}/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"
                            ],
                            "images": [
                                "{$config.path.node_modules}/malihu-custom-scrollbar-plugin/mCSB_buttons.png"
                            ]
                        },
                        "block-ui": {
                            "scripts": [
                                "{$config.path.node_modules}/block-ui/jquery.blockUI.js"
                            ]
                        },
                        "bootstrap-datepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"
                            ]
                        },
                        "bootstrap-datetime-picker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-datetime-picker/css/bootstrap-datetimepicker.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.js"
                            ]
                        },
                        "bootstrap-timepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-timepicker/css/bootstrap-timepicker.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-timepicker.init.js"
                            ]
                        },
                        "bootstrap-daterangepicker": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-daterangepicker.init.js"
                            ]
                        },
                        "bootstrap-touchspin": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.js"
                            ]
                        },
                        "bootstrap-maxlength": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-maxlength/src/bootstrap-maxlength.js"
                            ]
                        },
                        "bootstrap-switch": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-switch/dist/js/bootstrap-switch.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-switch.init.js"
                            ]
                        },
                        "bootstrap-multiselectsplitter": {
                            "scripts": [
                                "{$config.path.src}/vendors/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js"
                            ]
                        },
                        "bootstrap-select": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-select/dist/css/bootstrap-select.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-select/dist/js/bootstrap-select.js"
                            ]
                        },
                        "select2": {
                            "styles": [
                                "{$config.path.node_modules}/select2/dist/css/select2.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/select2/dist/js/select2.js"
                            ]
                        },
                        "typeahead.js": {
                            "scripts": [
                                "{$config.path.node_modules}/typeahead.js/dist/typeahead.bundle.js",
                                "{$config.path.node_modules}/handlebars/dist/handlebars.js"
                            ]
                        },
                        "inputmask": {
                            "scripts": [
                                "{$config.path.node_modules}/inputmask/dist/jquery.inputmask.bundle.js",
                                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.date.extensions.js",
                                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.numeric.extensions.js",
                                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.phone.extensions.js"
                            ]
                        },
                        "nouislider": {
                            "styles": [
                                "{$config.path.node_modules}/nouislider/distribute/nouislider.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/nouislider/distribute/nouislider.js"
                            ]
                        },
                        "autosize": {
                            "scripts": [
                                "{$config.path.node_modules}/autosize/dist/autosize.js"
                            ]
                        },
                        "clipboard": {
                            "scripts": [
                                "{$config.path.node_modules}/clipboard/dist/clipboard.min.js"
                            ]
                        },
                        "ion-rangeslider": {
                            "styles": [
                                "{$config.path.node_modules}/ion-rangeslider/css/ion.rangeSlider.css",
                                "{$config.path.node_modules}/ion-rangeslider/css/ion.rangeSlider.skinFlat.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/ion-rangeslider/js/ion.rangeSlider.js"
                            ],
                            "images": [
                                "{$config.path.node_modules}/ion-rangeslider/img/sprite-skin-flat.png"
                            ]
                        },
                        "dropzone": {
                            "styles": [
                                "{$config.path.node_modules}/dropzone/dist/dropzone.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/dropzone/dist/dropzone.js"
                            ]
                        },
                        "summernote": {
                            "styles": [
                                "{$config.path.node_modules}/summernote/dist/summernote.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/summernote/dist/summernote.js"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/summernote/dist/font/**"
                            ]
                        },
                        "bootstrap-makrdown": {
                            "styles": [
                                "{$config.path.node_modules}/bootstrap-markdown/css/bootstrap-markdown.min.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-markdown/js/bootstrap-markdown.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/bootstrap-markdown.init.js"
                            ]
                        },
                        "jquery-validation": {
                            "scripts": [
                                "{$config.path.node_modules}/jquery-validation/dist/jquery.validate.js",
                                "{$config.path.node_modules}/jquery-validation/dist/additional-methods.js",
                                "{$config.path.src}/js/framework/components/plugins/forms/jquery-validation.init.js"
                            ]
                        },
                        "remarkable-bootstrap-notify": {
                            "scripts": [
                                "{$config.path.node_modules}/bootstrap-notify/bootstrap-notify.min.js",
                                "{$config.path.src}/js/framework/components/plugins/base/bootstrap-notify.init.js"
                            ]
                        },
                        "animate.css": {
                            "styles": [
                                "{$config.path.node_modules}/animate.css/animate.min.css"
                            ]
                        },
                        "toastr": {
                            "styles": [
                                "{$config.path.node_modules}/toastr/build/toastr.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/toastr/build/toastr.min.js"
                            ]
                        },
                        "jstree": {
                            "styles": [
                                "{$config.path.node_modules}/jstree/dist/themes/default/style.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/jstree/dist/jstree.js"
                            ],
                            "images": [
                                "{$config.path.src}/vendors/jstree/32px.png",
                                "{$config.path.node_modules}/jstree/dist/themes/default/40px.png",
                                "{$config.path.node_modules}/jstree/dist/themes/default/*.gif"
                            ]
                        },
                        "morris.js": {
                            "styles": [
                                "{$config.path.node_modules}/morris.js/morris.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/raphael/raphael.js",
                                "{$config.path.node_modules}/morris.js/morris.js"
                            ]
                        },
                        "chartist": {
                            "styles": [
                                "{$config.path.node_modules}/chartist/dist/chartist.css"
                            ],
                            "scripts": [
                                "{$config.path.node_modules}/chartist/dist/chartist.js"
                            ]
                        },
                        "chart.js": {
                            "scripts": [
                                "{$config.path.node_modules}/chart.js/dist/Chart.bundle.js",
                                "{$config.path.src}/js/framework/components/plugins/charts/chart.init.js"
                            ]
                        },
                        "bootstrap-session-timeout": {
                            "scripts": [
                                "{$config.path.src}/vendors/bootstrap-session-timeout/bootstrap-session-timeout.min.js"
                            ]
                        },
                        "jquery-idletimer": {
                            "scripts": [
                                "{$config.path.src}/vendors/jquery-idletimer/idle-timer.min.js"
                            ]
                        },
                        "counterup": {
                            "scripts": [
                                "{$config.path.node_modules}/waypoints/lib/jquery.waypoints.js",
                                "{$config.path.node_modules}/counterup/jquery.counterup.js"
                            ]
                        },
                        "socicon": {
                            "styles": [
                                "{$config.path.node_modules}/socicon/css/socicon.css"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/socicon/font/**"
                            ]
                        },
                        "font-awesome": {
                            "styles": [
                                "{$config.path.node_modules}/font-awesome/css/font-awesome.css"
                            ],
                            "fonts": [
                                "{$config.path.node_modules}/font-awesome/fonts/**"
                            ]
                        },
                        "line-awesome": {
                            "styles": [
                                "{$config.path.src}/vendors/line-awesome/css/line-awesome.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/vendors/line-awesome/fonts/**"
                            ]
                        },
                        "flaticon": {
                            "styles": [
                                "{$config.path.src}/vendors/flaticon/css/flaticon.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/vendors/flaticon/fonts/**"
                            ]
                        },
                        "metronic": {
                            "styles": [
                                "{$config.path.src}/vendors/metronic/css/styles.css"
                            ],
                            "fonts": [
                                "{$config.path.src}/vendors/metronic/fonts/**"
                            ]
                        }
                    }
                },
                "bundle": {
                    "styles": "{$config.output}/vendors/base/vendors.bundle.css",
                    "scripts": "{$config.output}/vendors/base/vendors.bundle.js",
                    "images": "{$config.output}/vendors/base/images",
                    "fonts": "{$config.output}/vendors/base/fonts"
                }
            },
            "custom": {
                "jquery-ui": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/vendors/jquery-ui/jquery-ui.min.css"
                        ],
                        "scripts": [
                            "{$config.path.src}/vendors/jquery-ui/jquery-ui.min.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.js"
                    }
                },
                "fullcalendar": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/fullcalendar/dist/fullcalendar.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/fullcalendar/dist/fullcalendar.js",
                            "{$config.path.node_modules}/fullcalendar/dist/gcal.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/fullcalendar/fullcalendar.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/fullcalendar/fullcalendar.bundle.js"
                    }
                },
                "gmaps": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/gmaps/gmaps.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.output}/vendors/custom/gmaps/gmaps.js"
                    }
                },
                "jqvmap": {
                    "src": {
                        "styles": [
                            "{$config.path.node_modules}/jqvmap/dist/jqvmap.css"
                        ],
                        "scripts": [
                            "{$config.path.node_modules}/jqvmap/dist/jquery.vmap.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.europe.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.germany.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.russia.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.usa.js",
                            "{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.world.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/vendors/custom/jqvmap/jqvmap.bundle.css",
                        "scripts": "{$config.output}/vendors/custom/jqvmap/jqvmap.bundle.js"
                    }
                },
                "flot": {
                    "src": {
                        "scripts": [
                            "{$config.path.node_modules}/Flot/jquery.flot.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.resize.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.categories.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.pie.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.stack.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.crosshair.js",
                            "{$config.path.node_modules}/Flot/jquery.flot.axislabels.js"
                        ]
                    },
                    "bundle": {
                        "scripts": "{$config.output}/vendors/custom/flot/flot.bundle.js"
                    }
                }
            }
        },
        "demo": {
            "default": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/default/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/default/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/default/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/default/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/default/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/default/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/default/custom/",
                        "media": "{$config.output}/demo/default/media/"
                    }
                }
            },
            "demo2": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo2/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo2/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo2/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo2/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo2/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo2/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo2/custom/",
                        "media": "{$config.output}/demo/demo2/media/"
                    }
                }
            },
            "demo3": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo3/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo3/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo3/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo3/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo3/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo3/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo3/custom/",
                        "media": "{$config.output}/demo/demo3/media/"
                    }
                }
            },
            "demo4": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo4/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo4/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo4/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo4/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo4/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo4/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo4/custom/",
                        "media": "{$config.output}/demo/demo4/media/"
                    }
                }
            },
            "demo5": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo5/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo5/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo5/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo5/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo5/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo5/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo5/custom/",
                        "media": "{$config.output}/demo/demo5/media/"
                    }
                }
            },
            "demo6": {
                "base": {
                    "src": {
                        "styles": [
                            "{$config.path.src}/sass/demo/demo6/style.scss"
                        ],
                        "scripts": [
                            "{$config.path.src}/js/framework/**/*.js",
                            "{$config.path.src}/js/demo/demo6/base/**/*.js",
                            "{$config.path.src}/js/app/base/**/*.js",
                            "{$config.path.src}/js/snippets/base/**/*.js"
                        ]
                    },
                    "bundle": {
                        "styles": "{$config.output}/demo/demo6/base/style.bundle.css",
                        "scripts": "{$config.output}/demo/demo6/base/scripts.bundle.js"
                    }
                },
                "custom": {
                    "src": {
                        "scripts": [
                            "{$config.path.src}/js/demo/demo6/custom/**/*.js"
                        ],
                        "media": [
                            "{$config.path.src}/media/demo/demo6/**/*.*"
                        ]
                    },
                    "output": {
                        "scripts": "{$config.output}/demo/demo6/custom/",
                        "media": "{$config.output}/demo/demo6/media/"
                    }
                }
            }
        },
        "snippets": {
            "src": {
                "scripts": [
                    "{$config.path.src}/js/snippets/custom/**/*.js"
                ]
            },
            "output": {
                "scripts": "{$config.output}/snippets/"
            }
        },
        "app": {
            "src": {
                "scripts": [
                    "{$config.path.src}/js/app/custom/**/*.js"
                ],
                "media": [
                    "{$config.path.src}/media/app/**/*.*"
                ]
            },
            "output": {
                "scripts": "{$config.output}/app/js",
                "media": "{$config.output}/app/media"
            }
        }
    }
}

Launch your terminal and change its current directory to the project's tools folder where the build files are located. All commands below must be run in this tools folder.

cd [root]/tools/

For the first time launch, run the command below to install the npm dependencies defined in [root]/tools/package.json (if you haven't done already) :

yarn install

For the first time or after every modification in [root]/src/, run below task to compile the assets as defined in [root]/tools/conf/[version_package].json :

gulp

Provide argument --prod to build assets with JS and CSS minify enabled.

gulp --prod

Run below task to update server side ajax demo API URL fix (required fix for angular and html versions) as defined in config.path.demo_api_url right after gulp task completed:

gulp apiurl

In some cases, if the Angular demo folder was moved to other directories, gulp command may not work. Please use gulp command with flag --angular-jquery for the assets compilation.

gulp --prod --angular-jquery

gulp --prod --angular

Base theme CSS & JS in [root]/src/. When you run gulp, all CSS & JS from [root]/src/ will be compiled and place into several demo locations, for Angular and HTML static. The compile output folder is defined in [root]/tools/conf/[version_package].json file, under config.dist. You can create another compile output path.

"dist": [
    "./../theme/dist/preview/assets",
    "./../theme/dist/default/**/assets"
]

Each demo has own base style [root]/src/sass/demo/[demo_id]/style.scss that will be compiled and added into the demo's base css bundle assets/demo/[demo_id]/base/styles.bundle.css.

The demo's style.scss includes the entire framework stylesheets and compiles with its own layout and global settings that overrides's Metronic frameworks base global settings. Thus each demo can customize and change the look and feel of the the entire theme components by overriding global config [root]/src/sass/framework/_config.scss by the demo level config [root]/src/sass/demo/[demo_id]/_framework-config.scss.

Metronic uses nested map list to structure the config options with special custom function arrat-get() to access the nested config structure. Below is the example of the framework's base SASS config:

//
//** Global Config
//

//== Framework SASS Functions
@import "base/functions";

//== Layout Breakpoints
// Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$m--layout-breakpoints: (
  	// Small screen / phone
  	sm: 576px,

  	// Medium screen / tablet
  	md: 768px,

  	// Large screen / desktop
  	lg: 992px,

  	// Extra large screen / wide desktop
  	xl: 1200px,

    // Extra large screen / wide desktop
    xxl: 1400px,

    xxxl: 1600px
) !default;

//== Global arrow style
$m--arrow-style: 'smooth'; // supported options: smooth, classic

//== Default skin
$m--default-skin: 'light'; // supported options: light, dark

//== Global rounded border mode
$m--rounded: true;

//== Force cursor with pointer for button tags globally
$m--btn-force-hover-pointer: true;

//== Border Radius
$m--border-radius: (
    general: 4px,
    dropdown: 6px,
    scrollbar: 2px
);

//== Transition
$m--transition: (
    general: all 0.3s,
    link: (
        hover: color .4s ease
    )
);

//== UI State Color
$m--state-colors: (
    // metronic states
    brand: (
        base: #716aca,
        inverse: #ffffff
    ),
    metal: (
        base: #c4c5d6,
        inverse: #111111
    ),
    light: (
        base: #ffffff,
        inverse: #282a3c
    ),
    accent: (
        base: #00c5dc,
        inverse: #ffffff
    ),
    focus: (
        base: #9816f4,
        inverse: #ffffff
    ),

    // bootstrap states
    primary: (
        base: #5867dd,
        inverse: #ffffff
    ),
    success: (
        base: #34bfa3,
        inverse: #ffffff
    ),
    info: (
        base: #36a3f7,
        inverse: #ffffff
    ),
    warning: (
        base: #ffb822,
        inverse: #111111
    ),
    danger: (
        base: #f4516c,
        inverse: #ffffff
    )
);

//== The body element font settings
$m--root-font: (
    size: (
        desktop: 14px,
        tablet: 13px,
        mobile: 13px
    ),
    weight: 300,
    color: (
        light: #333333,
        dark: #efefef
    )
);

//== Best font families
$m--font-families: (
    regular: 'Poppins',
    heading: 'Roboto'
);

//== General link font settings
$m--link-font: (
    default: (
        color: (
            light: get-brand-color(),
            dark: get-brand-color()
        )
    ),

    hover: (
        color: (
            light: get-brand-color('+'),
            dark: get-brand-color('+')
        )
    )
);
							
							

You can access to an option by using array-get() function as shown below:

$border-radius: array-get($m--border-radius, general); // 4px;
$brand-base-color: array-get($m--state-colors, brand, base); // #716aca
$brand-inverse-color: array-get($m--state-colors, brand, inverse); // #ffffff

You can use Metronic's globally available base mixins in your custom codes. All available mixins can be found here: src/sass/framework/base/_mixins.scss

You can use Metronic's globally available SASS functions in your custom codes. All available functions can be found here: src/sass/framework/base/_functions.scss

Util is Metronic's base utility helper class defined in src/js/framework/base/util.js and globally available within the theme.

App is Metronic's base javascript class defined in src/js/framework/base/app.js and globally available within the theme that handles all the initializaitons of base components such as bootstrap popover and tooltips, scrollable contents(using Custom Scroll plugin), etc.

Datatable is a Metronic's custom plugin defined in src/js/framework/components/general/datatable.js.

Below code shows basic initialization of the datatable from element with attribute ID m_datatable:

<div id="m_datatable"></div>

var datatable = $('#m_datatable').mDatatable(options);

You can also init the datatable using the class name. But the ID attribute is required for the datatable session state such as pagination, query, etc. Datatable save state can be disabled if don't require.

<div class="my_datatable" id="m_datatable"></div>

var datatable = $('.my_datatable').mDatatable(options);

var options = {
    data: {
        type: 'remote',
        source: {
            read: {
                url: 'inc/api/datatables/demos/orders.php',
                method: 'GET',
                // custom headers
                headers: { 'x-my-custom-header': 'some value', 'x-test-header': 'the value'},
                params: {
                    // custom parameters
                    generalSearch: '',
                    EmployeeID: 1,
                    someParam: 'someValue',
                    token: 'token-value'
                },
                map: function(raw) {
                    // sample data mapping
                    var dataSet = raw;
                    if (typeof raw.data !== 'undefined') {
                         dataSet = raw.data;
                    }
                    return dataSet;
                },
            }
        },
        pageSize: 10,
        saveState: {
            cookie: true,
            webstorage: true
        },

        serverPaging: false,
        serverFiltering: false,
        serverSorting: false
        autoColumns: false
    },

    layout: {
        theme: 'default',
        class: 'm-datatable--brand',
        scroll: false,
        height: null,
        footer: false,
        header: true,

        smoothScroll: {
            scrollbarShown: true
        },

        spinner: {
            overlayColor: '#000000',
            opacity: 0,
            type: 'loader',
            state: 'brand',
            message: true
        },

        icons: {
            sort: {asc: 'la la-arrow-up', desc: 'la la-arrow-down'},
            pagination: {
                next: 'la la-angle-right',
                prev: 'la la-angle-left',
                first: 'la la-angle-double-left',
                last: 'la la-angle-double-right',
                more: 'la la-ellipsis-h'
            },
            rowDetail: {expand: 'fa fa-caret-down', collapse: 'fa fa-caret-right'}
        }
    },

    sortable: false,

    pagination: true,

    search: {
      // enable trigger search by keyup enter
      onEnter: false,
      // input text for search
      input: $('#generalSearch'),
      // search delay in milliseconds
      delay: 400,
    },

    detail: {
        title: 'Load sub table',
        content: function (e) {
            // e.data
            // e.detailCell
        }
    },

    rows: {
      callback: function() {},
      // auto hide columns, if rows overflow. work on non locked columns
      autoHide: false,
    },

    // columns definition
    columns: [{
        field: "RecordID",
        title: "#",
        locked: {left: 'xl'},
        sortable: false,
        width: 40,
        selector: {class: 'm-checkbox--solid m-checkbox--brand'}
    }, {
        field: "OrderID",
        title: "Order ID",
        sortable: 'asc',
        filterable: false,
        width: 150,
        responsive: {visible: 'lg'},
        locked: {left: 'xl'},
        template: '{{OrderID}} - {{ShipCountry}}'
    }, {
        field: "ShipCountry",
        title: "Ship Country",
        width: 150,
        overflow: 'visible',
        template: function (row) {
            return row.ShipCountry + ' - ' + row.ShipCity;
        }
    }, {
        field: "ShipCountry",
        title: "Ship Country",
        width: 150,
        overflow: 'visible',
        sortCallback: function (data, sort, column) {
            var field = column['field'];
            return $(data).sort(function (a, b) {
                var aField = a[field];
                var bField = b[field];
                if (sort === 'asc') {
                    return parseFloat(aField) > parseFloat(bField)
                        ? 1 : parseFloat(aField) < parseFloat(bField)
                            ? -1
                            : 0;
                } else {
                    return parseFloat(aField) < parseFloat(bField)
                        ? 1 : parseFloat(aField) > parseFloat(bField)
                            ? -1
                            : 0;
                }
            });
        }
    }],

    toolbar: {
        layout: ['pagination', 'info'],

        placement: ['bottom'],  //'top', 'bottom'

        items: {
            pagination: {
                type: 'default',

                pages: {
                    desktop: {
                        layout: 'default',
                        pagesNumber: 6
                    },
                    tablet: {
                        layout: 'default',
                        pagesNumber: 3
                    },
                    mobile: {
                        layout: 'compact'
                    }
                },

                navigation: {
                    prev: true,
                    next: true,
                    first: true,
                    last: true
                },

                pageSizeSelect: [10, 20, 30, 50, 100]
            },

            info: true
        }
    },

    translate: {
        records: {
            processing: 'Please wait...',
            noRecords: 'No records found'
        },
        toolbar: {
            pagination: {
                items: {
                    default: {
                        first: 'First',
                        prev: 'Previous',
                        next: 'Next',
                        last: 'Last',
                        more: 'More pages',
                        input: 'Page number',
                        select: 'Select page size'
                    },
                    info: 'Displaying {{start}} - {{end}} of {{total}} records'
                }
            }
        }
    }
}

Below is the sample ajax response from back-end for the remote source datatable.

{
    "meta": {
        "page": 1,
        "pages": 35,
        "perpage": 10,
        "total": 350,
        "sort": "asc",
        "field": "ShipDate"
    },
    "data": [
        {
            "RecordID": 10,
            "OrderID": "55154-5393",
            "ShipCountry": "NG",
            "ShipCity": "Sapele",
            "ShipName": "Moen, Kertzmann and Mills",
            "ShipAddress": "1 Nancy Junction",
            "CompanyEmail": "epere9@sina.com.cn",
            "CompanyAgent": "Ely Pere",
            "CompanyName": "Jacobi, O'Conner and Kuhlman",
            "Currency": "NGN",
            "Notes": "adipiscing molestie hendrerit at vulputate vitae nisl aenean lectus pellentesque eget nunc donec quis orci eget orci vehicula",
            "Department": "Shoes",
            "Website": "whitehouse.gov",
            "Latitude": 5.8750769,
            "Longitude": 5.6931356,
            "ShipDate": "1\/1\/2016",
            "PaymentDate": "2017-06-20 10:42:35",
            "TimeZone": "Africa\/Lagos",
            "Status": 3,
            "Type": 1,
            "TotalPayment": "88,211.68 NGN"
        },
        {
            "RecordID": 263,
            "OrderID": "43406-0032",
            "ShipCountry": "US",
            "ShipCity": "Fort Pierce",
            "ShipName": "Moore-Schaden",
            "ShipAddress": "451 Fuller Junction",
            "CompanyEmail": "tdefau7a@google.pl",
            "CompanyAgent": "Tristan Defau",
            "CompanyName": "Mayer and Sons",
            "Currency": "USD",
            "Notes": "mauris enim leo rhoncus sed vestibulum sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus",
            "Department": "Music",
            "Website": "cornell.edu",
            "Latitude": 27.3980151,
            "Longitude": -80.3714326,
            "ShipDate": "1\/1\/2017",
            "PaymentDate": "2017-05-21 01:45:57",
            "TimeZone": "America\/New_York",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "7,105.23 USD"
        },
        {
            "RecordID": 77,
            "OrderID": "68016-527",
            "ShipCountry": "PH",
            "ShipCity": "Batarasa",
            "ShipName": "Gibson Inc",
            "ShipAddress": "948 Roxbury Center",
            "CompanyEmail": "smatitiaho24@dailymotion.com",
            "CompanyAgent": "Skippy Matitiaho",
            "CompanyName": "Monahan, Haley and Murphy",
            "Currency": "PHP",
            "Notes": "sit amet consectetuer adipiscing elit proin risus praesent lectus vestibulum quam sapien varius",
            "Department": "Jewelery",
            "Website": "printfriendly.com",
            "Latitude": 8.5015747,
            "Longitude": 117.3557854,
            "ShipDate": "1\/12\/2017",
            "PaymentDate": "2016-09-07 16:34:55",
            "TimeZone": "Asia\/Manila",
            "Status": 1,
            "Type": 3,
            "TotalPayment": "9,541.82 PHP"
        },
        {
            "RecordID": 330,
            "OrderID": "54868-5303",
            "ShipCountry": "PH",
            "ShipCity": "Sillon",
            "ShipName": "Balistreri Group",
            "ShipAddress": "8203 Truax Center",
            "CompanyEmail": "kvickarman95@storify.com",
            "CompanyAgent": "Kipp Vickarman",
            "CompanyName": "Kerluke and Sons",
            "Currency": "PHP",
            "Notes": "lobortis ligula sit amet eleifend pede libero quis orci nullam molestie",
            "Department": "Clothing",
            "Website": "vkontakte.ru",
            "Latitude": 11.186148,
            "Longitude": 123.7487563,
            "ShipDate": "1\/14\/2017",
            "PaymentDate": "2017-05-16 18:29:45",
            "TimeZone": "Asia\/Manila",
            "Status": 6,
            "Type": 1,
            "TotalPayment": "8,300.97 PHP"
        },
        {
            "RecordID": 51,
            "OrderID": "49884-659",
            "ShipCountry": "ID",
            "ShipCity": "Atap",
            "ShipName": "Blanda Group",
            "ShipAddress": "1 Monica Alley",
            "CompanyEmail": "sjackes1e@reuters.com",
            "CompanyAgent": "Shelagh Jackes",
            "CompanyName": "Schiller Inc",
            "Currency": "IDR",
            "Notes": "iaculis justo in hac habitasse platea dictumst etiam faucibus cursus",
            "Department": "Jewelery",
            "Website": "forbes.com",
            "Latitude": 3.8152026,
            "Longitude": 117.1147095,
            "ShipDate": "1\/15\/2016",
            "PaymentDate": "2016-06-24 03:01:19",
            "TimeZone": "Asia\/Makassar",
            "Status": 2,
            "Type": 1,
            "TotalPayment": "8,397.18 IDR"
        },
        {
            "RecordID": 313,
            "OrderID": "23155-179",
            "ShipCountry": "PA",
            "ShipCity": "Potrero Grande",
            "ShipName": "Olson, Schmeler and Little",
            "ShipAddress": "3 Bartillon Place",
            "CompanyEmail": "cgrandison8o@auda.org.au",
            "CompanyAgent": "Corliss Grandison",
            "CompanyName": "Mills-Beatty",
            "Currency": "PAB",
            "Notes": "egestas metus aenean fermentum donec ut mauris eget massa tempor convallis nulla neque libero convallis eget eleifend",
            "Department": "Clothing",
            "Website": "mlb.com",
            "Latitude": 8.881634,
            "Longitude": -79.8268729,
            "ShipDate": "1\/16\/2016",
            "PaymentDate": "2017-12-06 10:30:59",
            "TimeZone": "America\/Panama",
            "Status": 3,
            "Type": 2,
            "TotalPayment": "85,706.89 PAB"
        },
        {
            "RecordID": 153,
            "OrderID": "53341-515",
            "ShipCountry": "MD",
            "ShipCity": "Saharna",
            "ShipName": "Leffler, Sawayn and Denesik",
            "ShipAddress": "07247 Del Sol Hill",
            "CompanyEmail": "fshank48@spotify.com",
            "CompanyAgent": "Findley Shank",
            "CompanyName": "Reilly LLC",
            "Currency": "MDL",
            "Notes": "dui nec nisi volutpat eleifend donec ut dolor morbi vel lectus in quam fringilla rhoncus mauris enim leo",
            "Department": "Industrial",
            "Website": "discuz.net",
            "Latitude": 47.6949791,
            "Longitude": 28.9654659,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2017-01-05 15:53:50",
            "TimeZone": "Europe\/Chisinau",
            "Status": 6,
            "Type": 1,
            "TotalPayment": "993,295.17 MDL"
        },
        {
            "RecordID": 112,
            "OrderID": "50580-198",
            "ShipCountry": "PT",
            "ShipCity": "Loureiro",
            "ShipName": "Labadie, Hegmann and Jones",
            "ShipAddress": "9986 Arapahoe Place",
            "CompanyEmail": "bglaister33@bbb.org",
            "CompanyAgent": "Baxie Glaister",
            "CompanyName": "Stark, Haley and Koepp",
            "Currency": "EUR",
            "Notes": "suspendisse potenti in eleifend quam a odio in hac habitasse platea dictumst maecenas",
            "Department": "Tools",
            "Website": "apple.com",
            "Latitude": 41.4808684,
            "Longitude": -8.3624629,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2016-04-24 01:53:42",
            "TimeZone": "Europe\/Lisbon",
            "Status": 3,
            "Type": 3,
            "TotalPayment": "9,705.78 EUR"
        },
        {
            "RecordID": 29,
            "OrderID": "30142-106",
            "ShipCountry": "RU",
            "ShipCity": "Loukhi",
            "ShipName": "Klein-Streich",
            "ShipAddress": "61 Cascade Plaza",
            "CompanyEmail": "mgallamores@businesswire.com",
            "CompanyAgent": "Minor Gallamore",
            "CompanyName": "Huels-Strosin",
            "Currency": "RUB",
            "Notes": "sollicitudin ut suscipit a feugiat et eros vestibulum ac est lacinia nisi venenatis tristique",
            "Department": "Beauty",
            "Website": "epa.gov",
            "Latitude": 66.0733463,
            "Longitude": 33.0544476,
            "ShipDate": "1\/17\/2016",
            "PaymentDate": "2016-03-09 04:40:38",
            "TimeZone": "Europe\/Moscow",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "931,956.17 RUB"
        },
        {
            "RecordID": 135,
            "OrderID": "49348-387",
            "ShipCountry": "FR",
            "ShipCity": "Sens",
            "ShipName": "Collins, Hackett and Vandervort",
            "ShipAddress": "594 Hanover Crossing",
            "CompanyEmail": "tkiezler3q@live.com",
            "CompanyAgent": "Tommy Kiezler",
            "CompanyName": "Eichmann and Sons",
            "Currency": "EUR",
            "Notes": "etiam faucibus cursus urna ut tellus nulla ut erat id mauris vulputate elementum nullam varius nulla facilisi",
            "Department": "Toys",
            "Website": "instagram.com",
            "Latitude": 48.1903349,
            "Longitude": 3.2995005,
            "ShipDate": "1\/18\/2017",
            "PaymentDate": "2016-12-28 03:56:57",
            "TimeZone": "Europe\/Paris",
            "Status": 2,
            "Type": 2,
            "TotalPayment": "811,814.44 EUR"
        }
    ]
}

Datatable has no full native Angular directive at the moment. But you can initilize it by jQuery.

To initialize Datatable in Angular, init under ngAfterViewInit or ngOnInit Angular hook function and cast jQuery element object with <any>.

ngAfterViewInit() {
    let datatable = (<any>$('#m_datatable')).mDatatable(options);
}

ngOnInit() {
    let datatable = (<any>$('#m_datatable')).mDatatable(options);
}

Checkbox

var datatableOptions = {
   ...
   extensions: {
      checkbox: {
         vars: {
           selectedAllRows: 'selectedAllRows',
           requestIds: 'requestIds',
           rowIds: 'meta.rowIds',
         },
      },
   }
   ...
};

mMenu is a Metronic's custom plugin defined in src/js/framework/components/general/menu.js.

The Metronic's Menu components allows to manage both horizontal and vertical multi level menus for both desktop and mobile modes.

The below code shows the basic vertical menu initialization with accordion submenu mode:

var menu = new mMenu('m_ver_menu', {
    // submenu setup
    submenu: {
        desktop: {
            // by default the menu mode set to accordion in desktop mode
            default: 'accordion,
            // whenever body has this class switch the menu mode to dropdown
            state: {
                body: 'm-aside-left--minimize',
                mode: 'dropdown'
            }
        },
        tablet: 'accordion', // menu set to accordion in tablet mode
        mobile: 'accordion'  // menu set to accordion in mobile mode
    },

    //accordion setup
    accordion: {
        autoScroll: true,
        expandAll: false
    }
});

The below code shows the basic vertical menu initialization with hoverable dropdown submenu mode:

var menu = new mMenu('m_ver_menu', {
    // submenu setup
    submenu: {
        desktop: {
            // by default the menu mode set to accordion in desktop mode
            default: 'dropdown',
            // whenever body has this class switch the menu mode to dropdown
            state: {
                body: 'm-aside-left--minimize',
                mode: 'dropdown'
            }
        },
        tablet: 'accordion', // menu set to accordion in tablet mode
        mobile: 'accordion'  // menu set to accordion in mobile mode
    },

    //accordion setup
    accordion: {
        autoScroll: true,
        expandAll: false
    }
});

The below code shows the basic horizontal menu initialization:

var menu = new mMenu('m_header_menu', {
    submenu: {
        desktop: 'dropdown',
        tablet: 'accordion',
        mobile: 'accordion'
    },
    accordion: {
        slideSpeed: 200,  // accordion toggle slide speed in milliseconds
        autoScroll: true, // enable auto scrolling(focus) to the clicked menu item
        expandAll: false   // allow having multiple expanded accordions in the menu
    }
});

mDropdown is a Metronic's custom plugin defined in src/js/framework/components/general/dropdown.js.

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

var dropdown1 = new mDropdown('m_dropdown_api_1', options);

var options = {
    toggle: 'click',
    hoverTimeout: 300,
    skin: 'light',
    height: 'auto',
    maxHeight: false,
    minHeight: false,
    persistent: false,
    mobileOverlay: true
}

toggle: 'click'

hoverTimeout: 300

skin: 'light'

height: 'auto'

maxHeight: false

minHeight: false

persistent: false

mobileOverlay: true

mHeader is a Metronic's custom plugin defined in src/js/framework/components/general/header.js.

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

var header = new mHeader('m_header', options);

var options = {
    classic: false,
    offset: {
        mobile: 150,
        desktop: 200
    },
    minimize: {
        mobile: false,
        desktop: false
    }
}

classic: false

offset: {
    mobile: 150,
    desktop: 200
}

offset: {
    mobile: false,
    desktop: false
}

mOffcanvas is a Metronic's custom plugin defined in src/js/framework/components/general/offcanvas.jsjs.

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

horMenuOffcanvas = new mOffcanvas('m_header_menu', {
    baseClass: 'm-aside-left--offcanvas-default',
    overlay: true,
    closeBy: 'm_aside_left_close_btn',
    toggleBy: {
        target: 'm_aside_left_offcanvas_toggle',
        state: 'm-brand__toggler--active'
    }
});

var options = {
    baseClass: 'm-aside-left--offcanvas-default',
    overlay: true,
    closeBy: 'm_aside_left_close_btn',
    toggleBy: {
        target: 'm_aside_left_offcanvas_toggle',
        state: 'm-brand__toggler--active'
    }
}

overlay: true

baseClass: 'm-aside-header-menu-mobile'

closeBy: 'm_aside_header_menu_mobile_close_btn'

toggleBy: {
    target: 'm_aside_header_menu_mobile_toggle',
    state: 'm-brand__toggler--active'
}

mHeader is a Metronic's custom plugin defined in src/js/framework/components/general/portlet.js.

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

 var portlet = new mPortlet('m_portlet_tools_1', options);

var options = {
    bodyToggleSpeed: 400,
    tooltips: true,
    tools: {
        toggle: {
            collapse: 'Collapse',
            expand: 'Expand'
        },
        reload: 'Reload',
        remove: 'Remove',
        fullscreen: {
            on: 'Fullscreen',
            off: 'Exit Fullscreen'
        }
    }
};

bodyToggleSpeed: 400

tooltips: true

tooltips: true

tools: {
    toggle: {
        collapse: 'Collapse',
        expand: 'Expand'
    }
}

tools: {
    reload: 'Reload',
}

tools: {
    remove: 'Remove',
}

tools: {
    fullscreen: {
        on: 'Fullscreen',
        off: 'Exit Fullscreen'
    }
}

mQuicksearch is a Metronic's custom plugin defined in src/js/framework/components/general/quicksearch.js.

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

var quicksearch = new mQuicksearch('m_quicksearch', options);

var options = {
    mode: 'default', //'default/dropdown'
    minLength: 1,
    maxHeight: 300,
    requestTimeout: 200, // ajax request fire timeout in milliseconds
    inputTarget: 'm_quicksearch_input',
    iconCloseTarget: 'm_quicksearch_close',
    iconCancelTarget: 'm_quicksearch_cancel',
    iconSearchTarget: 'm_quicksearch_search',

    spinnerClass: 'm-loader m-loader--skin-light m-loader--right',
    hasResultClass: 'm-list-search--has-result',

    templates: {
        error: '<div class="m-search-results m-search-results--skin-light"><span class="m-search-result__message">{{message}}</div></div>'
    }
};

mode: 'default'

minLength: 1

maxHeight: 300

requestTimeout: 200

inputTarget: 'm_quicksearch_input'

iconCloseTarget: 'm_quicksearch_close'

iconCancelTarget: 'm_quicksearch_cancel'

iconSearchTarget: 'm_quicksearch_search'

spinnerClass: 'm-loader m-loader--skin-light m-loader--right'

hasResultClass: 'm-list-search--has-result'

templates: {
    error: '<div class="m-search-results m-search-results--skin-light"><span class="m-search-result__message">{{message}}</div></div>'
}

mScrolltop is a Metronic's custom plugin defined in src/js/framework/components/general/scroll-top.js.

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

var scrollTop = new mScrollTop('m_scroll_top', options);

var options = {
    offset: 300,
    speed: 600
};

offset: 300

speed: 600

mToggle is a Metronic's custom plugin defined in src/js/framework/components/general/toggle.js.

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

var asideLeftToggle = new mToggle('m_aside_left_minimize_toggle', options);

var options = {
    target: 'body',
    targetState: 'm-brand--minimize m-aside-left--minimize',
    togglerState: 'm-brand__toggler--active'
}; 

target: 'body'

targetState: 'm-brand--minimize m-aside-left--minimize'

togglerState: 'm-brand__toggler--active'

mWizard is a Metronic's custom plugin defined in src/js/framework/components/general/wizard.js.

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

var wizard = new mWizard('m_wizard',options);

var options = {
    startStep: 1,
    manualStepForward: false
};

startStep: 1

manualStepForward: false

Angular is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser.

Please build the theme first at Tasks section before start to build the Angular app.

Angular CLI

Angular CLI is a command line interface for the latest Angular. Please install it before start with the Angular app.

npm install --global @angular/cli@latest

npm uninstall --global @angular/cli

npm install --global @angular/cli@latest

Angular for production

Run this command line in the Angular demo directory. This build process will use method of ahead-of-time (AOT) compilation. The ahead-of-time (AOT) compiler can catch template errors early and improve performance by compiling at build time.
The compiled Angular app will be in the folder [root]/dist/[demo_id]/.

ng build --prod

With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

ng build --prod --op=app

--op=app to specify which folder to output. If not set, dist folder will be the default.
For demo, please run build with --op=app for the Angular demo links in the documentation to work.

If you're serving the app out of a subfolder, edit a version of index.html to set the base href appropriately. For example, if the URL to index.html is www.mysite.com/my/app/index.html, set the base href to:

<base href="/my/app/">

You also can set the base href right in the ng build command

ng build --prod --base-href="/my/app/"

Ahead-of-time (AOT) vs just-in-time (JIT)

There is actually only one Angular compiler. The difference between AOT and JIT is a matter of timing and tooling. With AOT, the compiler runs once at build time using one set of libraries; with JIT it runs every time for every user at runtime using a different set of libraries. To use JIT build, run this command line to build.

ng build --prod --aot=false

Possible issues with Angular build

AOT build process can be failed due to JavaScript heap out of memory error. This is a known issue of Angular-cli. For the the temporary solution of this issue, you can use this workaround to increase allowed memory for node process.

For Windows users:

node --max_old_space_size=8192 "node_modules\@angular\cli\bin\ng" build --prod

For Linux and Mac users:

node --max_old_space_size=8192 ./node_modules/.bin/ng build --prod

Build Angular project

After generating Angular version layout from the builder, the generated Angular source code can be found in [root]/dist/. Each demo will generate different Angular app.

To setup Angular app, go to Angular app root and install Angular dependencies by this command line.

npm install

Start node development server for Angular by this command line, then you can access it at http://localhost:4200 via browser.

npm start

This is optional tool for formatting Angular source code which is Typescript. When you run npm install, formatting will be done automatically. But, everytime you generate a new Angular app, you will need to run this manually to reformat the source code.

npm run tsformat

How to use Metronic mApp and mUtil

mApp and mUtil are the Metronic base utilize class that privide helper functions. The source files are located at [root]/src/js/framework/base/

Declare mApp or mUtil at the top of the component.

declare let mApp: any;

declare let mUtil: any;

Sample code

mApp.blockPage();
mApp.unblockPage();

Sample API in theme demos are included for user references. [root]/docs/api_reference. These server side scrips and json files are used by datatable, dropzone, jstree, typeahead and other plugin demos.

The sample API is built using PHP code. Please check the section Config and Tasks above for updating the API URL in the source to our demo site.

ASP.NET Zero - Metronic .NET Integration

ASP.NET Zero is a starting point for new web projects based on our Metronic Theme UI. For more info please visit the product website.

Get it as your base application and directly start to develop your business code with:

• SOLID architecture
• Material design UI
• Cross-cutting concerns implemented
• Built with best practices
• Well documented
• Full source code included

For more info please check Full List Of Features.

Mecons - .NET Tag Helpers Library For Metronic

Mecons is the Most complete & trusted Tag Helper Library for Metronic. Mecons comes with Metronic 5, the most completed & trusted Admin Theme and UI Framework:

• 30+ Components and Controls for Metronic
• Validation States for Data Binding
• Intellisense Support in Visual Studio
• Provisioning over Bower and NuGet
• Free and up-to-date Online Documentation
• Full source code included

For more info please check Full List Of Features.

Keenthemes Freebies

Our collection of bootstrap themes and templates are totally free and you may use them for your private or commercial projects at absolutely no cost.

Hire Us

If you need theme customization or custom web development, please provide your project details using this form and one of our well established development partners will get back to you with a free quote.

JANGO - The Powerful HTML5 Component Based Bootstrap Frontend Theme

JANGO is a multi-purpose Bootstrap HTML5 component based theme. JANGO is incredibly robust and flexible that will easily be able to support every site development such as corporate, portfolio, blogs, product showcases, landing / one-page sites and much more to power any starting point for new web projects based on our Metronic Theme UI. For more info please visit the product page.

JANGO Drupal - The Ultimate Drupal 7/8 Theme With Layout Builder

JANGO Drupal is an ever expanding, fully responsive and multi-purpose Drupal 7/8 theme powered by Visual Shortcodes and Layout Builder. For more info please visit the product page.