Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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];

E
Edson Burgos 4 months ago
Angular Webpack Tailwind 4
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Faizal Author 4 months ago

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.

Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(