New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs

Select2 not working


I reached out previously about the KT menus not working in Angular 20 https://devs.keenthemes.com/question/crafttheme-kt-menus-not-working-after-angular-20-upgrade . You advised me to manually initialize them. That fixed the KT menus. Now we are trying to implement the select2 drop down controls. The css only ones work, but the multiselect and clear ones don't work in angular 20. Is this a similar issue? And if it is can you just give me a full list of all the extra steps needed to make this theme work with all of its controls with Angular 20? In order for us to truly utilize this theme we need all the components to work. Do you have an Angular setup guide or something? I don't think it will be productive for either of us to have to message for every similar issue to this.

Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


Here is an alternative approach.

This approach avoids the need for a complex build process for the theme's assets within Angular project. Instead, theme's assets as third-party libraries and include them directly.

- In your downloaded theme package, find the directory with the compiled assets. This is located at [metronic]/dist/assets/ from the Craft HTML version.

- Copy the entire assets folder from the theme's dist directory into the src/ directory of your Angular project.

- Open your angular.json file and find the styles and scripts arrays for your project's build target. Add the paths to the theme's bundles.


{
// ... other angular.json config
"projects": {
"your-app-name": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.css",
"src/assets/plugins/global/plugins.bundle.css",
"src/assets/css/style.bundle.css"
],
"scripts": [
"src/assets/plugins/global/plugins.bundle.js",
"src/assets/js/scripts.bundle.js"
]
}
}
}
}
}
}


Thanks



This also didn't work. I get Uncaught ReferenceError: KTApp is not defined.

Here's my Angular.json I'm running Angular 20.


{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"Membershine.UI.Dashboard": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular/build:application",
"options": {
"outputPath": "dist/membershine-ui-dashboard",
"browser": "src/main.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.scss",
"src/craft-theme-assets/plugins/global/plugins.bundle.css",
"src/craft-theme-assets/css/style.bundle.css"
],
"scripts": [
"src/craft-theme-assets/plugins/global/plugins.bundle.js",
"src/craft-theme-assets/js/scripts.bundle.js"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kB",
"maximumError": "8kB"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular/build:dev-server",
"configurations": {
"production": {
"buildTarget": "Membershine.UI.Dashboard:build:production"
},
"development": {
"buildTarget": "Membershine.UI.Dashboard:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular/build:extract-i18n"
},
"test": {
"builder": "@angular/build:karma",
"options": {
"tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": [
"src/styles.scss"
]
}
}
}
}
},
"cli": {
"analytics": "ab34d051-f266-4a04-aa76-17cb4604fa2c"
}
}



The files do seem to be loading. I can see the Keen scripts in the scripts.js files, but it doesn't initialize them. I also tried calling the KTComponents.init(); and KTApp.init(); just to see if it helps, but gets the above error.



Hi Dave,

Yes, you need to manually trigger the initialization of our components within the Angular component lifecycle.

Our theme has a global function to initialize all components (KTMenu, KTDrawer, KTSelect, etc.) that are present on the page. This function looks for data-control attributes and activates the corresponding component. The function you need to call is KTComponents.init().

place to call this function is in Angular's ngAfterViewInit lifecycle hook.

Here is a code example


import { Component, AfterViewInit } from "@angular/core";

// This is an important import. You must declare the KTComponents object
// to make it available in your TypeScript code.
declare var KTComponents: any;

@Component({
selector: "app-my-component",
templateUrl: "./my-component.html",
})
export class MyComponent implements AfterViewInit {
constructor() {}

ngAfterViewInit(): void {
// This function will initialize all new components on the page,
// including your Select2 dropdowns.
KTComponents.init();
}
}


Thanks



This didn't seem to do anything unfortunately.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(