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
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.
