Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
KTUI Toast doesn't work
Hello, I'm having problems with the components
of KTUI, it all started with the KTToast, wanting to import it
import {KTToast} from "@keenthemes/ktui/src";
// Tambien encuentra estas rutas para importar pero ninguna funciona
// import { KTToast } from "@keenthemes/ktui/src/components/toast";
// import { KTToast } from "@keenthemes/ktui/src/components/toast/toast";
KTToast.show({
message: "This is a basic toast!",
});This gives me multiple errors within the node_modules files
Errors:
✘ [ERROR] TS4111: Property 'popper' comes from an index signature, so it must be accessed with ['popper']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/dropdown.ts:268:20:
268 │ state.styles.popper.width = `${state.rects.referenc...
╵ ~~~~~~
✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/select.ts:1514:47:
1514 │ const selectedValue = focusedOption.dataset.value;
╵ ~~~~~
✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/select.ts:1578:44:
1578 │ const optionValue = clickedOption.dataset.value;
╵ ~~~~~
✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/select.ts:2547:42:
2547 │ const val = focusedOptionEl.dataset.value;
╵ ~~~~~
✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/select.ts:2723:24:
2723 │ (opt) => opt.dataset.value as string,
╵ ~~~~~
✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/select.ts:2727:34:
2727 │ selectedValues.has(opt.dataset.value as string),
╵ ~~~~~
✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/select.ts:2769:34:
2769 │ selectedValues.has(opt.dataset.value as string),
╵ ~~~~~
✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/tags.ts:58:37:
58 │ if ((opt as HTMLElement).dataset.value === optionValue) {
╵ ~~~~~
✘ [ERROR] TS4111: Property 'text' comes from an index signature, so it must be accessed with ['text']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/templates.ts:291:28:
291 │ let content = optionData?.text?.trim(); // Default content to...
╵ ~~~~
✘ [ERROR] TS4111: Property 'text' comes from an index signature, so it must be accessed with ['text']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/templates.ts:298:24:
298 │ content = optionData.text || optionData.content; // Prefer ...
╵ ~~~~
✘ [ERROR] TS4111: Property 'content' comes from an index signature, so it must be accessed with ['content']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/templates.ts:298:43:
298 │ ...tionData.text || optionData.content; // Prefer explicit text, ...
╵ ~~~~~~~
✘ [ERROR] TS4111: Property 'disabled' comes from an index signature, so it must be accessed with ['disabled']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/templates.ts:305:17:
305 │ if (optionData.disabled) {
╵ ~~~~~~~~
✘ [ERROR] TS4111: Property 'selected' comes from an index signature, so it must be accessed with ['selected']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/templates.ts:314:24:
314 │ selected: optionData.selected
╵ ~~~~~~~~
✘ [ERROR] TS4111: Property 'disabled' comes from an index signature, so it must be accessed with ['disabled']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/templates.ts:317:24:
317 │ disabled: optionData.disabled ? 'aria-disabled="true"' : '',
╵ ~~~~~~~~
✘ [ERROR] TS4111: Property 'text' comes from an index signature, so it must be accessed with ['text']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/templates.ts:329:48:
329 │ ...lement.setAttribute('data-text', optionData?.text?.trim() || '');
╵ ~~~~
✘ [ERROR] TS4111: Property 'text' comes from an index signature, so it must be accessed with ['text']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/utils.ts:57:18:
57 │ option.dataset.text ||
╵ ~~~~
✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/utils.ts:208:20:
208 │ option.dataset.value?.toLowerCase().startsWith(lowerStr))
╵ ~~~~~
✘ [ERROR] TS4111: Property 'value' comes from an index signature, so it must be accessed with ['value']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/select/utils.ts:338:61:
338 │ ... = options.findIndex((option) => option.dataset.value === value);
╵ ~~~~~
✘ [ERROR] TS4111: Property 'top' comes from an index signature, so it must be accessed with ['top']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/toast/toast.ts:167:20:
167 │ positionGroups.top.push(toast);
╵ ~~~
✘ [ERROR] TS4111: Property 'bottom' comes from an index signature, so it must be accessed with ['bottom']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/toast/toast.ts:169:20:
169 │ positionGroups.bottom.push(toast);
╵ ~~~~~~
✘ [ERROR] TS4111: Property 'top' comes from an index signature, so it must be accessed with ['top']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/toast/toast.ts:175:18:
175 │ positionGroups.top.forEach((toast) => {
╵ ~~~
✘ [ERROR] TS4111: Property 'bottom' comes from an index signature, so it must be accessed with ['bottom']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/toast/toast.ts:193:31:
193 │ for (let i = positionGroups.bottom.length - 1; i >= 0; i--) {
╵ ~~~~~~
✘ [ERROR] TS4111: Property 'bottom' comes from an index signature, so it must be accessed with ['bottom']. [plugin angular-compiler]
node_modules/@keenthemes/ktui/src/components/toast/toast.ts:194:33:
194 │ const toast = positionGroups.bottom[i];
Replies (1)
Hi Edson Burgos
1. Load the KTUI bundle
In angular.json, under your project’s build → options → scripts, include the KTUI script, for example:
"src/assets/vendors/ktui/ktui.min.js"
(if you copied the Metronic KTUI build into your app), or
"node_modules/@keenthemes/ktui/dist/ktui.js"
if your setup exposes that path. The important part is that the script is in the scripts array so it runs before your app.
2. Expose the global in TypeScript
In a shared types file or a service that uses Toast, add:
declare var KTToast: any;
3. Initialise Toast once
Run KTToast.init() once when your app boots (e.g. in an init/service that runs from AppComponent or main.ts).
4. Use the global in your code
Where you need to show a toast, call:
KTToast.show({ message: 'This is a basic toast!' });
Do not use import { KTToast } from '@keenthemes/ktui/...'.
This is the same approach used in the official Metronic Tailwind Angular integration. That way, Angular never compiles KTUI’s source, so this TS4111 error doesn’t apply.
