The World’s #1 Bootstrap 5 HTML,
VueJS, React, Angular, Laravel, Asp.Net Core, Blazor, Django & Flask

Admin Dashboard Ecosystem

This is Metronic 7 documentation!

Upon purchase you can get Metronic 7 version from our Github Repository.
Request Github access
The new Metronic 8 is now available with the most advanced Bootstrap 5, VueJS, React and Laravel foundation with a solid light and dark mode design system, extensive utility classes and custom made in-house components.
View Metronic 8 documentation

To use most of the Metronic build tools, Node.js LTS version is required. Version 14.x LTS is recommended. Some of the plugins and framework in Metronic v7 does not support the latest Node.js version. https://nodejs.org/en/

Mock Back-end


Metronic Angular use a mock back-end for demo purpose. It's called in-memory web api for Angular demos and tests that emulates CRUD operations over a RESTy API.

It intercepts Angular Http and HttpClient requests that would otherwise go to the remote server and redirects them to an in-memory data store that you control.

For more info on the library: https://github.com/angular/in-memory-web-api

How switching to the Real REST API

You have to disable the mock back-end for the built Angular's Http and HttpClient requests to work normally. Check in the files /src/app/_helpers/fake/ which contains all the dummy data for the mock back-end.

When your Real back-end is done, follow the next two steps for switching to the real REST API:

  • 1. Change the configuration line in your /src/environments/environment.ts file:

    export const environment = {
      production: false,
      isMockEnabled: true // You have to set 'true', when your real back-end is done

  • 2. Switch paths to services in /src/app/modules/services/auth-http/index.ts file:

    // export { AuthHTTPService } from './auth-fake-http.service';
    export { AuthHTTPService } from './auth-http.service';

Think About The Future, Stay Connected With Us
The More We Learn, The More We Are Able To Innovate & To Develop