Skip to content

Instantly share code, notes, and snippets.


Carmelo carmelodevuz

View GitHub Profile
carmelodevuz /
Last active Jan 26, 2023
Metronic Angular Skeleton (demos 1-8)

Basic skeleton preparation:

  1. Remove unnecessary modules in the folder src/app/modules. (!!!Except auth, i18n and errors folders).
  2. Comment unnecessary routes in the src/app/pages/routing.ts file. [9-45] rows.
  3. Clear Dashboard src/app/pages/dashboard.component.html file.
  4. Clear Dashboard module src/app/pages/dashboard.module.ts file (!remove WidgetsModule from the code, rows [5, 17].
  5. Remove Widgets src/_metronic/partials/content/widgets folder and the file src/app/_metronic/partials/index.ts file comment row [3].
  6. Clear Aside menu in the file src/app/_metronic/layout/components/aside/aside-menu/aside-menu.component.html. Keep only Dashboard menu item. (For demo1 also need to clear src/app/_metronic/layout/components/sidebar/sidebar-menu/sidebar-menu.component.html file)
  7. Clear Header menu in the file src/app/_metronic/layout/components/header/header-menu/header-menu.component.html. Keep only dashboard menu item.
  8. In case if you don't need Aut
carmelodevuz /
Created Oct 4, 2022
Metronic 8 Angular CKEditor integration

!!! Check out the official documentation of CKEditort first

  1. Run the command: yarn add ckeditor4-angular.
  2. import CKEditorModule to your application.
  3. Add variable editorData and method onChange into code behind (See example in your.component.ts file).
  4. Add ckeditor into your HTML markup (See example in your.component.html file).
carmelodevuz / CKExampleComponent.tsx
Last active Oct 18, 2022
Metronic 8 React CKEditor integration
View CKExampleComponent.tsx
// ! CKEditor doesn't have a port to the Typescript version, cause of that we use @ts-ignore a lot here:
// @ts-ignore
import {CKEditor} from '@ckeditor/ckeditor5-react'
// @ts-ignore
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
const CKExampleComponent = () => {
return (<CKEditor
carmelodevuz /
Last active Jan 3, 2023
Metronic React v8.1.2 - RTL
  1. Copy and paste rtl.config.js file.
  2. Add packages to the package.json file (copy them from the package.json) below and re-install packages with yarn command.
  3. Run the command: yarn run webpack --config webpack-rtl.config.js
  4. In the file src/index.tsx file comment rows [18, 19]: // import './_metronic/assets/sass/plugins.scss' // import './_metronic/assets/sass/style.scss'
  5. In the file src/index.tsx add the row: import './_metronic/assets/css/style.rtl.css' (! before style.react.scss).
  6. In the file public/index.html update the html tag with: <html direction="rtl" dir="rtl" style="direction: rtl">
  7. Find and replace next attributes in the project: data-kt-menu-placement='bottom-start' =&gt; data-kt-menu-placement='bottom-end'
carmelodevuz /
Last active Jan 23, 2023
Keenthemes Metronic 8.038 RTL


  1. In file '/angular/demo{#}/src/assets/sass/style.angular.scss' comment the next rows [8, 9]:
  // @import "./core/vendors/plugins/prismjs";
  // @import "./core/vendors/plugins/formvalidation";


carmelodevuz / package.json
Last active Apr 11, 2022
View package.json
"name": "demo3",
"version": "8.0.38",
"private": true,
"homepage": "/metronic8/react/demo3",
"dependencies": {
"@formatjs/intl-pluralrules": "^4.0.28",
"@formatjs/intl-relativetimeformat": "^9.1.7",
"@fortawesome/fontawesome-free": "^5.15.3",
"@popperjs/core": "~2.10.1",